/*
 * plx pages — marketing home
 * CCC Frontend — Wireframe-6 (homepage) page-specific composition
 */

/* ══════════════════ HOME SECTION ORDER (per active hero persona) ══════════════════ */
/* .plx-home-sections wraps every top-level section on the page (see
   home.blade.php) so their visual order can differ per the active hero
   persona — currently only "patient" needs a different order (Doctors
   section moves up next to Hero, per Property 1=Variant2.png), while
   "doctor" and "owner" both use the base order below, which is spaced out
   (10/20/30…) specifically so it reproduces the exact existing unwrapped
   DOM order with zero visual change for them. display:flex/column here is
   layout-equivalent to the plain block-flow stacking these sections used
   before wrapping — every section is still full-width, and none of them
   relied on margin-collapsing for their vertical spacing (that spacing is
   .plx-section-sm's own padding, not margin), so switching to flex changes
   nothing for anyone except where an order override below applies. */
.plx-home-sections {
  display: flex;
  flex-direction: column;
}

.plx-hero { order: 10; }
#spaces { order: 20; }
#how-it-works { order: 30; }
#advantages { order: 40; }
.plx-revenue { order: 50; }
#collective { order: 60; }
#testimonials { order: 70; }
#doctors { order: 80; }

/* Patient only: Doctors section moves to right after Hero, matching
   Property 1=Variant2.png. #spaces sits at order:20 and is hidden for
   patient anyway (see the [data-plx-visible='false'] rules below), so 15
   just needs to land before it — Doctor's and Owner's order (80, last) is
   completely untouched. */
[data-plx-active-hero-persona='patient'] #doctors {
  order: 15;
}

/* ══════════════════ HERO ══════════════════ */

.plx-hero {
  background: var(--plx-bg-body);
  border-bottom: 1px solid var(--plx-border-default);
  padding: 32px 0 80px;
  position: relative;
}

/* Clips only the background photo (.plx-hero-media) to the hero's box —
   overflow used to live on .plx-hero itself, which also clipped the
   .plx-hero-tab-panels dropdowns (a normal-flow sibling further down,
   inside .plx-container) whenever they extended past the hero. inset:0
   reproduces the exact same crop box .plx-hero's own padding box gave it,
   so the photo's crop is pixel-identical; dropdowns are no longer inside
   any clipping ancestor. */
.plx-hero-media-clip {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.plx-hero-grid {
  align-items: center;
  display: flex;
  gap: 62px;
}

.plx-hero-copy {
  flex-shrink: 0;
  position: relative;
}

.plx-hero-eyebrow {
  align-items: center;
  border: 1px solid var(--plx-border-default);
  border-radius: var(--plx-radius-full);
  color: var(--plx-text-primary);
  display: inline-flex;
  font-family: var(--plx-font-mono);
  font-size: var(--plx-text-xs);
  font-weight: var(--plx-weight-regular);
  gap: var(--plx-space-2);
  letter-spacing: 1.44px;
  margin-bottom: var(--plx-space-6);
  padding: 6px var(--plx-space-4) 6px var(--plx-space-2);
  text-transform: uppercase;
}

.plx-hero-eyebrow .plx-dot {
  background: var(--plx-color-primary);
  border-radius: var(--plx-radius-full);
  height: 8px;
  position: relative;
  width: 8px;
}

/* Continuous soft pulse/glow ring, per Component 1.png (two dot states —
   tight glow and expanded, faded glow — are the same animation's frames). */
.plx-hero-eyebrow .plx-dot::after {
  background: var(--plx-color-primary);
  border-radius: inherit;
  content: '';
  inset: 0;
  position: absolute;
  animation: plx-dot-pulse 2s ease-out infinite;
}

@keyframes plx-dot-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.75);
  }
}

.plx-hero-title {
  font-size: 80px;
  letter-spacing: -1.6px;
  line-height: 74px;
  margin-bottom: var(--plx-space-5);
  white-space: nowrap;
}

.plx-hero-subtitle {
  color: var(--plx-text-secondary);
  font-family: var(--plx-font-display);
  font-size: 16px;
  font-weight: var(--plx-weight-regular);
  letter-spacing: 0.16px;
  line-height: 20px;
  margin-bottom: var(--plx-space-8);
  max-width: 488px;
}

.plx-hero-tabs {
  margin-bottom: var(--plx-space-4);
  border: 1px solid var(--plx-border-default);
}

/* .plx-hero-tab-panel visibility is driven by Bootstrap's Tab component
   (data-bs-toggle="tab"), which toggles the .active/.show classes on the
   target pane — styled here rather than via Bootstrap's own CSS, which
   isn't loaded. .plx-hero-panel (the glass side panel) has no Bootstrap
   tab-content counterpart, so it stays on the existing data-plx-active
   toggle, kept in sync with the active tab by a small listener in home.js.

   All three search-bar panels are stacked in the same grid cell (rather
   than display:none/block swapping) so the wrapper's height is always the
   max of all three — switching tabs crossfades opacity in place instead of
   popping content in/out and jumping the hero's height. visibility is
   delayed on the way out only, so the outgoing panel stays paintable for
   the full fade instead of vanishing the instant the class changes. */
.plx-hero-tab-panels {
  display: grid;
}

.plx-hero-tab-panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--plx-transition-slow) ease, visibility 0s linear var(--plx-transition-slow);
  visibility: hidden;
}

.plx-hero-tab-panel.active.show {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--plx-transition-slow) ease;
  visibility: visible;
}

/* Full-bleed background photo — NOT a rounded card. In the real Figma file
   this sits behind the copy/panel, pinned to the section's right edge and
   vertically centered, with a soft gradient fading into the page background
   on its left edge (screens/get_design_context: "image 52", right:0,
   w:1151 h:576 on the 1440 canvas, no border-radius). */
.plx-hero-media {
  height: 606px;
  max-width: 1151px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
}

/* Three persona images are stacked and crossfaded via opacity so switching
   tabs never reloads/flickers the image or shifts the layout underneath it. */
.plx-hero-media img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  /* --plx-transition-slow already bakes in its own easing (400ms ease);
     appending another "ease" after it makes the value invalid, which the
     browser silently drops (computed transition-duration: 0s) instead of
     crossfading — the same bug already fixed elsewhere this session
     (space-card image hover, .plx-hero-tab-panel). Needed here so the new
     option-pill image swaps (and the existing persona-tab crossfade) are
     actually smooth rather than an instant snap. */
  transition: opacity var(--plx-transition-slow);
  width: 100%;
}

.plx-hero-media img[data-plx-active='true'] {
  opacity: 1;
}

/* Fade the left edge of the hero image container so any uploaded banner —
   regardless of brightness — dissolves into the page body background on the
   left, keeping the heading / search bar readable.  mask-image is the right
   tool here (no z-index layering needed): transparent areas let the hero's
   own #FFF8F2 background colour show through.  0%→22% is fully invisible,
   22%→45% softly fades in, 45%→100% is fully opaque photo. */
.plx-hero-media {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 22%,
    black 45%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 22%,
    black 45%
  );
}

.plx-hero-panel-col {
  align-self: stretch;
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

/* Same same-cell crossfade approach as .plx-hero-tab-panels above, so the
   glass panel's height (it differs slightly per tab's option-grid content)
   never jumps the row when switching. */
.plx-hero-panel {
  background: var(--plx-bg-glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--plx-color-white);
  border-radius: var(--plx-radius-md);
  grid-area: 1 / 1;
  /* Grid items default to min-width:auto (content-based) — without this,
     a wide .plx-option-grid (see forms.css) could still push this panel's
     own min-content past .plx-hero-panel-col's available track width. */
  min-width: 0;
  opacity: 0;
  padding: var(--plx-space-6) var(--plx-space-5);
  pointer-events: none;
  transition: opacity var(--plx-transition-slow) ease, visibility 0s linear var(--plx-transition-slow);
  visibility: hidden;
}

.plx-hero-panel[data-plx-active='true'] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--plx-transition-slow) ease;
  visibility: visible;
}


.plx-hero-panel-title {
  color: var(--plx-text-primary);
  font-family: var(--plx-font-display);
  font-size: 20px;
  /* font-weight: var(--plx-weight-semibold); */
  letter-spacing: -0.4px;
  margin-bottom: var(--plx-space-5);
}

.plx-hero-panel .plx-option-grid {
  margin-bottom: var(--plx-space-2);
}

/* ══════════════════ SEARCH FIELD DROPDOWNS ══════════════════
   Location / Space Type / Availability dropdowns opened from a
   .plx-search-field (see initHeroFieldDropdowns() in home.js). Each is a
   position:absolute child of .plx-hero-tab-panels, so it's excluded from
   that container's grid-area:1/1 stacking (out-of-flow items don't
   contribute to grid track sizing) — opening/closing one never changes
   the hero's own height. */
.plx-hero-tab-panels {
  position: relative;
}

/* Toggled on <body> only while a field dropdown is open on mobile (see
   initHeroFieldDropdowns() in home.js) — locks background scroll behind
   the fixed bottom-sheet-style dropdown at that breakpoint. Never added
   on desktop, so it has no effect there. */
.plx-scroll-locked {
  overflow: hidden;
}

.plx-field-dropdown {
  background: var(--plx-bg-surface);
  border: 1px solid var(--plx-border-default);
  border-radius: var(--plx-radius-lg);
  box-shadow: var(--plx-shadow-md);
  left: 0;
  margin-top: var(--plx-space-2);
  max-height: min(60vh, 420px);
  opacity: 0;
  overflow-y: auto;
  padding: var(--plx-space-5);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(-4px);
  transition: opacity var(--plx-transition-fast), transform var(--plx-transition-fast), visibility 0s linear var(--plx-transition-fast);
  visibility: hidden;
  z-index: 30;
}

.plx-field-dropdown[data-plx-open='true'] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--plx-transition-fast), transform var(--plx-transition-fast);
  visibility: visible;
}

/* Desktop auto-flip: set only by initHeroFieldDropdowns() in home.js
   (measured against real available viewport space, mobile's own fixed/
   centered positioning never sets this) when there isn't enough room
   below the field — opens upward instead, same container-relative
   width/size, just anchored from the opposite edge. */
.plx-field-dropdown[data-plx-position='top'] {
  bottom: 100%;
  margin-bottom: var(--plx-space-2);
  margin-top: 0;
  top: auto;
  transform: translateY(4px);
}

.plx-field-dropdown[data-plx-position='top'][data-plx-open='true'] {
  transform: translateY(0);
}

.plx-field-dropdown-grid {
  display: grid;
  gap: var(--plx-space-2) var(--plx-space-5);
  grid-template-columns: repeat(4, 1fr);
}

.plx-field-dropdown-item {
  background: none;
  border: none;
  border-radius: var(--plx-radius-sm);
  color: var(--plx-text-primary);
  cursor: pointer;
  font-size: var(--plx-text-sm);
  font-weight: var(--plx-weight-medium);
  padding: var(--plx-space-2);
  text-align: left;
  transition: background-color var(--plx-transition-fast), color var(--plx-transition-fast);
}

.plx-field-dropdown-item:hover {
  background: var(--plx-bg-alt);
  color: var(--plx-color-primary);
}

.plx-field-dropdown-cal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--plx-space-3);
}

.plx-field-dropdown-cal-title {
  color: var(--plx-text-primary);
  font-size: var(--plx-text-sm);
  font-weight: var(--plx-weight-semibold);
}

.plx-field-dropdown-times {
  display: flex;
  gap: var(--plx-space-3);
  margin-top: var(--plx-space-4);
}

.plx-field-dropdown-time {
  color: var(--plx-text-secondary);
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: var(--plx-text-xs);
  font-weight: var(--plx-weight-medium);
  gap: var(--plx-space-1);
}

.plx-field-dropdown-select {
  appearance: none;
  background: var(--plx-bg-surface) url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6,9 12,15 18,9' stroke='%23121212' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--plx-border-default);
  border-radius: var(--plx-radius-md);
  color: var(--plx-text-primary);
  cursor: pointer;
  font-size: var(--plx-text-sm);
  padding: var(--plx-space-2) var(--plx-space-8) var(--plx-space-2) var(--plx-space-3);

}

.plx-field-dropdown-footer {
  border-top: 1px solid var(--plx-border-default);
  display: flex;
  justify-content: flex-end;
  margin-top: var(--plx-space-4);
  padding-top: var(--plx-space-4);
}

.plx-field-dropdown-clear {
  background: none;
  border: none;
  color: var(--plx-text-secondary);
  cursor: pointer;
  font-size: var(--plx-text-sm);
  font-weight: var(--plx-weight-medium);
}

.plx-field-dropdown-clear:hover {
  color: var(--plx-color-primary);
}

/* Availability: calendar left, start/end time + Apply right — one cohesive
   row instead of everything stacked vertically, so the dropdown's overall
   height (previously calendar + times + footer all stacked) shrinks
   substantially and rarely needs to scroll. */
.plx-field-dropdown-availability-grid {
  display: flex;
  gap: var(--plx-space-5);
}

.plx-field-dropdown-cal-col {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    max-width: 70%;
    width: 70%;
}

.plx-field-dropdown-cal {
  flex: 1 1 auto;
}

.plx-field-dropdown-options-col {
  border-left: 1px solid var(--plx-border-default);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: var(--plx-space-5);
  width: 180px;
}

.plx-field-dropdown--availability .plx-field-dropdown-times {
  flex-direction: column;
}

.plx-field-dropdown--availability .plx-field-dropdown-footer {
  border-top: none;
  margin-top: var(--plx-space-4);
  padding-top: 0;
}


@media (max-width: 767.98px) {
  .plx-field-dropdown-availability-grid {
    flex-direction: column;
  }

  /* Desktop's 70% width (sized for the side-by-side row) otherwise
     persists in this stacked column layout, leaving the calendar hugging
     the left edge with unused space on the right. */
  .plx-field-dropdown-cal-col {
    max-width: 100%;
    width: 100%;
  }

  .plx-field-dropdown-options-col {
    border-left: none;
    border-top: 1px solid var(--plx-border-default);
    padding-left: 0;
    padding-top: var(--plx-space-4);
    width: 100%;
  }

  /* Start/end time side by side instead of desktop's stacked column, to
     cut the dropdown's vertical scroll on mobile. */
  .plx-field-dropdown--availability .plx-field-dropdown-times {
    flex-direction: row;
  }
  .plx-field-dropdown-cal-col .flatpickr-calendar, .plx-field-dropdown-cal-col .flatpickr-days, .plx-field-dropdown-cal-col .dayContainer {
    max-width: 107%;
    width: 107%;
}
div.plx-field-dropdown-cal-col .flatpickr-calendar {
    margin-left: -13px;
}
.plx-field-dropdown-cal-col .flatpickr-day {
    max-width: 32px;
}
div.plx-field-dropdown--availability .flatpickr-current-month {
    left: 10px;
}
div.plx-field-dropdown--availability .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, div.plx-field-dropdown--availability .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    right: 3px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    padding-left: 0;
}
.plx-field-dropdown-clear {
  padding-right: 0;
}
}

/* flatpickr theme, scoped to the hero availability dropdown only — doesn't
   touch the sidebar date-picker's own theme on the doctor search page. */
.plx-field-dropdown-cal-col .flatpickr-calendar,
.plx-field-dropdown-cal-col .flatpickr-calendar.inline,
.plx-field-dropdown-cal-col .flatpickr-innerContainer,
.plx-field-dropdown-cal-col .flatpickr-rContainer {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.plx-field-dropdown-cal-col .flatpickr-calendar {
  font-family: var(--plx-font-body);
  height: 100%;
  width: 100%;
  margin-left: -22px;
}

/* .flatpickr-rContainer/.flatpickr-days are inline-block/flex by default
   with no declared width, so they shrink-to-fit their own content instead
   of taking the calendar's full (compact) width — leaving .dayContainer's
   "width:100%" below to resolve against that indeterminate size instead of
   the actual visible column, which desyncs the day grid from the weekday
   header row (both are otherwise sized independently against different
   effective widths). Forcing block + 100% here gives both the same,
   definite width to divide into 7 columns from. */
.plx-field-dropdown-cal-col .flatpickr-innerContainer,
.plx-field-dropdown-cal-col .flatpickr-rContainer,
.plx-field-dropdown-cal-col .flatpickr-days {
  display: block;
  width: 100%;
}

/* flatpickr's own JS re-asserts a hard-coded pixel width as an INLINE
   style on .flatpickr-calendar/.dayContainer/.flatpickr-days after every
   render (confirmed in its source: `daysContainer.style.width = …+"px"`),
   which no external stylesheet rule can out-rank on specificity alone —
   only !important can. Left unfixed this keeps the calendar at its native
   ~308px regardless of the compact dropdown's actual (narrower) width,
   which is what was actually breaking the 7-column match against the
   weekday row above (the grid itself was already correct at 7 columns —
   just 7 columns of the plugin's own fixed width, not this container's). */
.plx-field-dropdown-cal-col .flatpickr-calendar,
.plx-field-dropdown-cal-col .flatpickr-days,
.plx-field-dropdown-cal-col .dayContainer {
      max-width: 108%;
    width: 108%;
}

.plx-field-dropdown-cal-col .flatpickr-day {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--plx-radius-full);
  color: var(--plx-text-primary);
  display: flex;
  font-family: var(--plx-font-body);
  font-size: var(--plx-text-sm);
  font-weight: var(--plx-weight-regular);
  height: auto;
  justify-content: center;
  line-height: normal;
  /* flatpickr's own default width:14.2857% assumed a flex-wrap row (% of
     the whole day grid); now that .dayContainer below is a fixed 7-column
     grid, each day's containing block for a percentage width is its own
     ~1/7 grid cell instead — that shrank every circle to ~14% of a single
     cell (a few px). width:100% fills the cell itself; max-width keeps
     the circle's actual visual diameter compact and unchanged. */
  max-width: 36px;
  width: 100%;
}

.plx-field-dropdown-cal-col .flatpickr-day:hover {
  background: var(--plx-bg-alt);
  color: var(--plx-color-primary);
}

.plx-field-dropdown-cal-col .flatpickr-day.flatpickr-disabled,
.plx-field-dropdown-cal-col .flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  color: var(--plx-text-subtle);
}

.plx-field-dropdown-cal-col .flatpickr-prev-month,
.plx-field-dropdown-cal-col .flatpickr-next-month {
  color: var(--plx-text-secondary);
  fill: currentColor;
}

.plx-field-dropdown-cal-col .flatpickr-prev-month:hover,
.plx-field-dropdown-cal-col .flatpickr-next-month:hover {
  color: var(--plx-color-primary);
}

/* flatpickr's own .dayContainer relies on flex-wrap, breaking a new row
   once 7 items' hypothetical main sizes fill the line — but that
   hypothetical size is clamped by .flatpickr-day's own max-width (36px)
   below, which lets more than 7 narrower items fit on one line and wraps
   the grid out of sync with the weekday header row (the exact "two dates
   under Sunday" symptom). A fixed 7-column grid isn't width-dependent, so
   it always breaks exactly at 7 regardless of each day's own max-width. */
.plx-field-dropdown-cal-col .dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}

.plx-field-dropdown-cal-col .flatpickr-months,
.plx-field-dropdown-cal-col .flatpickr-weekdays,
.plx-field-dropdown-cal-col .flatpickr-days,
.plx-field-dropdown-cal-col .dayContainer {
  max-width: 100%;
  width: 100%;
}

.plx-field-dropdown-cal-col .flatpickr-current-month {
  font-family: var(--plx-font-body);
  font-size: var(--plx-text-sm);
  font-weight: var(--plx-weight-semibold);
}

.plx-field-dropdown-cal-col .flatpickr-weekday {
  color: var(--plx-text-subtle);
  font-family: var(--plx-font-body);
}

.plx-field-dropdown-cal-col .flatpickr-day.selected,
.plx-field-dropdown-cal-col .flatpickr-day.selected:hover {
  background: var(--plx-color-primary);
  border-color: var(--plx-color-primary);
  color: var(--plx-text-inverse);
}

.plx-field-dropdown-cal-col .flatpickr-day.today {
  border-color: var(--plx-color-primary);
}

@media (max-width: 767.98px) {
  /* Mobile only: fixed + vertically centered in the viewport instead of
     absolutely positioned below the field (which, on this page, can sit
     well below the fold) — opens immediately in view regardless of scroll
     position, closes/reopens exactly as before (initHeroFieldDropdowns()
     in home.js is untouched), just anchored differently. Desktop's
     absolute/top:100% positioning above is completely unaffected. */
  .plx-field-dropdown {
    left: var(--plx-space-4);
    margin-top: 0;
    max-height: min(75vh, 520px);
    position: fixed;
    right: var(--plx-space-4);
    top: 50%;
    transform: translateY(calc(-50% + 12px));
  }

  .plx-field-dropdown[data-plx-open='true'] {
    transform: translateY(-50%);
  }

  .plx-field-dropdown-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-field-dropdown-times {
    flex-direction: column;
  }
}

@media (max-width: 1199.98px) {
  .plx-hero-grid {
    flex-direction: column;
  }

  .plx-hero-copy {
    flex-shrink: 1;
    width: 100%;
  }

  .plx-hero-title {
    white-space: normal;
  }

  .plx-hero-media {
    /* Remove the left-edge fade mask on responsive — images stack full-width
       above the text, so a left-fade would clip the image awkwardly. */
    -webkit-mask-image: none;
    mask-image: none;
    height: 420px;
    max-width: none;
    /* Must stay a positioned ancestor (not static) — the 3 stacked
       persona <img> tags are position:absolute; height:100%, and without
       a positioned .plx-hero-media to contain them they resolve against
       the next positioned ancestor up (.plx-hero, the whole section)
       instead, ballooning far past this 420px/260px box and covering the
       content below it. relative keeps the element in normal flow here
       (no offset applied) while still containing its children correctly. */
    position: relative;
    transform: none;
    width: 100%;
  }

  .plx-hero-panel-col {
    align-self: auto;
    width: 100%;
  }

  /* .plx-hero-panel-col height fix (responsive/mobile+tablet only): its 3
     persona panels were still crossfading via the shared grid-area:1/1
     stack, which sizes the column to the TALLEST of the 3 — fine on the
     1200px+ desktop row (already as tall as its sibling copy column
     regardless), but on responsive layouts it left visible empty space
     under whichever panel switched in shorter than the others. Below
     1200px only, panels come out of flow (position:absolute) and home.js
     sets this column's own height inline to match just the active panel,
     transitioning smoothly via the line below instead of jumping. */
  .plx-hero-panel-col {
    display: block;
    transition: height var(--plx-transition-slow) ease;
  }

  .plx-hero-panel {
    /* left: 0;
    position: absolute;
    right: 0;
    top: 0; */
  }
  .plx-hero-panel[data-plx-active="false"] {
    height: 0;
    min-height: 0;
    padding: 0;
  }
}

/* 1200px–1535.98px fit: the 1536px+ layout is the reference design, and
   .plx-container already caps at 1260px so anything ≥ ~1308px (1260px +
   the container's 48px of padding) already renders pixel-identical to
   1536px — nothing to fix there. Below that, down to 1200px, the
   container has to shrink narrower than its 1260px cap, but
   .plx-hero-title stays nowrap at 80px and .plx-hero-grid keeps its full
   62px gap (neither is touched again until the ≤1199.98px breakpoint
   below), so the fixed-width title/gap increasingly crowd out the side
   panel versus how much room they have at 1536px. Scaling both by the
   same ratio the available content width has shrunk by (capped at 1, so
   it's a no-op from ~1308px up) reproduces the exact 1536px proportions,
   just fit into the narrower viewport — without touching typography or
   spacing anywhere else, and without moving the 1199.98px-and-below
   stacked layout at all. */
@media (min-width: 1200px) and (max-width: 1535.98px) {
  .plx-hero-grid {
    --plx-hero-fit-scale: min(1, calc((100vw - 48px) / 1212px));
  }

  .plx-hero-title {
    font-size: calc(80px * var(--plx-hero-fit-scale, 1));
  }

  .plx-hero-grid {
    gap: calc(62px * var(--plx-hero-fit-scale, 1));
  }
}

@media (max-width: 767.98px) {
  .plx-hero {
    padding: 0 0 var(--plx-space-10);
  }

  .plx-hero-title {
    font-size: var(--plx-text-3xl);
    letter-spacing: -0.02em;
    line-height: var(--plx-leading-tight);
    order: 2;
    margin-bottom: var(--plx-space-3);
  }

  .plx-hero-media {
    height: 260px;
    position: absolute;
    top: 0;
  }

  /* Mobile hero reorder: .plx-hero-media must sit directly above
     .plx-hero-panel-col (the option-pill panel that drives the hero
     photo crossfade), so picking an option and watching the photo update
     never needs a scroll. .plx-hero-copy's own box is dropped (display:
     contents) so its children become direct flex items of
     .plx-hero-grid alongside the sibling .plx-hero-panel-col and can be
     reordered against it — .plx-hero-media itself stays outside this
     flex group entirely (unchanged, still the first thing in .plx-hero
     ahead of .plx-container), so giving .plx-hero-panel-col the lowest
     order here makes it the very next thing rendered after the photo.
     Gap is zeroed to match — spacing between these items has always come
     entirely from each element's own margin-bottom (unchanged below),
     not the row gap, which previously only ever fired once, between the
     whole copy block and the panel column. align-items switches to
     stretch so eyebrow/title/subtitle/tabs/search-bar keep their
     existing full-width block sizing now that they're flex items instead
     of normal-flow children of .plx-hero-copy — except the eyebrow
     badge, which keeps hugging its own content via align-self. Scoped to
     ≤767.98px only: tablet/desktop keep the existing DOM order and
     layout untouched. */
  .plx-hero-copy {
    display: contents;
  }

  .plx-home-sections .plx-hero-grid {
    align-items: stretch;
    gap: 0;
    position: relative;
  }

  .plx-hero::before {
    background-color: rgb(255 255 255 / 68%);
    content: '';
    left: 0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
  }

  .plx-hero-grid {
    z-index: 1;
  }

  .plx-hero-panel-col {
    display: none;
    margin-bottom: var(--plx-space-4);
    /* Same order as .plx-hero-tabs below (5): flex items that tie on
       `order` fall back to source/DOM order, and .plx-hero-tabs is
       earlier in the DOM (nested in the now-flattened .plx-hero-copy)
       than .plx-hero-panel-col (its sibling under .plx-hero-grid), so it
       still renders first — placing the panel directly below the tabs,
       in normal flow, without needing to renumber any other item's
       order. */
    order: 5;
  }

  .plx-hero-eyebrow {
    align-self: flex-start;
    order: 1;
    margin-top: var(--plx-space-6);
    margin-bottom: var(--plx-space-3);
  }

  .plx-hero-subtitle {
    order: 4;
    margin-bottom: var(--plx-space-3);
  }

  .plx-hero-tabs {
    order: 5;
  }

  .plx-hero-tab-panels {
    order: 6;
  }
}

@media (max-width: 575.98px) {
  /* .plx-hero-tabs IS the .plx-pill-toggle element (both classes on the
     same <div> in the markup), not an ancestor of one — the previous
     descendant-combinator selector never matched anything, so the tabs
     stayed inline-flex and squeezed/wrapped into an unreadable stack at
     narrow widths instead of scrolling as a single row. */
.plx-hero-tabs.plx-pill-toggle {
    display: flex;
    width: 100%;
    border-radius: var(--plx-radius-full);
    -webkit-border-radius: var(--plx-radius-full);
    -moz-border-radius: var(--plx-radius-full);
    -ms-border-radius: var(--plx-radius-full);
    -o-border-radius: var(--plx-radius-full);
    padding: var(--plx-space-1) var(--plx-space-1);
    white-space: nowrap;
    overflow: auto;
}
.plx-hero-tabs .plx-pill-toggle-item {
    border: 1px solid var(--plx-border-default);
    justify-content: center;
    padding: var(--plx-space-2) var(--plx-space-2);
}
.plx-hero-panel {
    padding: var(--plx-space-6) var(--plx-space-2);
    pointer-events: none;
}
div.plx-advantage-hero-title {
    font-size: var(--plx-text-4xl);
}
.plx-advantage-tile .plx-advantage-dark-content {
    margin-top: 0;
}
}

/* Search-bar treatment (icon position/size/color, fixed width, spacing)
   now lives in forms.css as the shared .plx-search-bar/.plx-search-field-*
   rules, applied identically to all three persona tabs. */

/* ══════════════════ SPACES ══════════════════ */

/* Hidden outright for the Patient hero tab, matching Property
   1=Variant2.png (clinic-space booking isn't a patient journey) — home.js
   toggles this off the same tab-switch event as .plx-revenue above.
   display:none removes it from flow completely so no empty space is
   reserved. Doctor and Owner are untouched (this only matches when
   data-plx-visible is explicitly 'false', which only ever happens for
   patient — see initPersonaHiddenSections in home.js). */
#spaces[data-plx-visible='false'] {
  display: none;
}

/* ─── #spaces listing card carousel — .plx-cards-slider wraps .plx-spaces-grid ─── */
.plx-cards-slider {
  min-width: 0;
  position: relative;
  margin-bottom: var(--plx-space-6);
}

.plx-spaces-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--plx-space-5)) / 4);
  grid-template-columns: none;
  grid-template-rows: 1fr;
  gap: var(--plx-space-5);
  margin-bottom: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--plx-space-2) 2px var(--plx-space-4);
  align-items: stretch;
}

.plx-spaces-grid::-webkit-scrollbar {
  display: none;
}

.plx-spaces-grid > * {
  scroll-snap-align: start;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.plx-spaces-grid .plx-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.plx-spaces-grid .plx-space-card-footer {
  margin-top: auto;
}

@media (min-width: 1200px) {
  .plx-spaces-grid {
    grid-auto-columns: calc((100% - 3 * var(--plx-space-5)) / 4);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .plx-spaces-grid {
    grid-auto-columns: calc((100% - 2 * var(--plx-space-5)) / 3);
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .plx-spaces-grid {
    grid-auto-columns: calc((100% - var(--plx-space-5)) / 2);
  }
}

@media (max-width: 575.98px) {
  .plx-spaces-grid {
    grid-auto-columns: calc(88% - var(--plx-space-3));
    gap: var(--plx-space-3);
  }
}

/* ─── Carousel Navigation Arrows ─── */
.plx-cards-slider .plx-slider-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--plx-radius-full);
  background: var(--plx-bg-body, #ffffff);
  border: 1px solid var(--plx-border-default, #e2e8f0);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  color: var(--plx-text-primary, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color var(--plx-transition-fast), color var(--plx-transition-fast), border-color var(--plx-transition-fast), transform var(--plx-transition-fast), opacity var(--plx-transition-fast), box-shadow var(--plx-transition-fast);
}

.plx-cards-slider .plx-slider-arrow-prev {
  left: -22px;
}

.plx-cards-slider .plx-slider-arrow-next {
  right: -22px;
}

.plx-cards-slider .plx-slider-arrow:hover:not(:disabled) {
  background: var(--plx-color-ink, #0f172a);
  color: var(--plx-text-inverse, #ffffff);
  border-color: var(--plx-color-ink, #0f172a);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.plx-cards-slider .plx-slider-arrow:disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transform: translateY(-50%) scale(0.9);
}

@media (max-width: 991.98px) {
  .plx-cards-slider .plx-slider-arrow-prev {
    left: -12px;
  }
  .plx-cards-slider .plx-slider-arrow-next {
    right: -12px;
  }
}

@media (max-width: 767.98px) {
  .plx-cards-slider .plx-slider-arrow {
    display: none;
  }
}

/* ─── Carousel Pagination Dots ─── */
.plx-cards-slider .plx-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: var(--plx-space-4);
  margin-bottom: var(--plx-space-6);
}

.plx-cards-slider .plx-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--plx-radius-full);
  background: var(--plx-border-default, #cbd5e1);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--plx-transition-base);
}

.plx-cards-slider .plx-slider-dot[data-plx-active='true'] {
  width: 24px;
  background: var(--plx-color-primary, #e11d48);
  border-radius: 4px;
}

/* Subtle image scale-in on card hover. .plx-space-card-media already has
   overflow:hidden, so the scaled image stays clipped to its existing crop
   and border-radius — nothing else about the card changes.
   Note: --plx-transition-slow already bakes in its own easing (400ms ease),
   so it must be used bare — appending another easing keyword after it
   makes the transition value invalid and the browser silently drops it
   (computes to transition-duration:0s), which is what made this snap
   instead of animate. */
#plxSpacesGridJs .plx-space-card-media img,
#plxSpacesGridOwnerJs .plx-space-card-media img,
#doctors .plx-doctor-card-media img {
  transition: transform var(--plx-transition-slow);
}

#plxSpacesGridJs .plx-card-hover:hover .plx-space-card-media img,
#plxSpacesGridOwnerJs .plx-card-hover:hover .plx-space-card-media img,
#doctors .plx-card-hover:hover .plx-doctor-card-media img {
  transform: scale(1.06);
}

.plx-section-footer {
  text-align: center;
}

#plxSpaceFiltersJs,
#plxSpaceFiltersOwnerJs {
  margin-bottom: var(--plx-space-6);
}

.plx-spaces-grid [data-plx-visible='false'] {
  display: none !important;
}

/* ══════════════════ EMPTY STATE / COMING SOON ══════════════════ */

.plx-spaces-empty {
  align-items: center;
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  margin: var(--plx-space-4) 0;
  width: 100%;
}

.plx-spaces-empty[data-plx-visible='false'] {
  display: none !important;
}

.plx-empty-card {
  align-items: center;
  background: var(--plx-bg-card, #ffffff);
  border: 1.5px dashed var(--plx-border-card, #e2e8f0);
  border-radius: var(--plx-radius-2xl, 24px);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--plx-space-3);
  justify-content: center;
  max-width: 640px;
  overflow: hidden;
  padding: var(--plx-space-10) var(--plx-space-8);
  position: relative;
  text-align: center;
  width: 100%;
}

.plx-empty-card-decor {
  color: var(--plx-text-muted, #94a3b8);
  pointer-events: none;
  position: absolute;
  right: -20px;
  top: -20px;
}

.plx-empty-icon-wrap {
  align-items: center;
  background: var(--plx-bg-muted, #f1f5f9);
  border-radius: var(--plx-radius-full, 9999px);
  color: var(--plx-text-primary, #0f172a);
  display: flex;
  height: 60px;
  justify-content: center;
  margin-bottom: var(--plx-space-2);
  width: 60px;
}

.plx-badge-coming-soon {
  align-items: center;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--plx-radius-full, 9999px);
  color: #059669;
  display: inline-flex;
  font-size: var(--plx-text-xs, 12px);
  font-weight: var(--plx-weight-semibold, 600);
  gap: 6px;
  padding: 4px 14px;
}

.plx-empty-title {
  color: var(--plx-text-primary, #0f172a);
  font-family: var(--plx-font-display, inherit);
  font-size: var(--plx-text-2xl, 22px);
  font-weight: var(--plx-weight-bold, 700);
  line-height: var(--plx-leading-tight, 1.25);
  margin: 0;
}

.plx-empty-category-name {
  color: var(--plx-highlight, #2563eb);
}

.plx-empty-desc {
  color: var(--plx-text-secondary, #64748b);
  font-size: var(--plx-text-sm, 14px);
  line-height: var(--plx-leading-relaxed, 1.6);
  margin: 0;
  max-width: 480px;
}

.plx-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plx-space-3, 12px);
  justify-content: center;
  margin-top: var(--plx-space-3, 12px);
}

@media (max-width: 991.98px) {
  .plx-spaces-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* #plxSpacesStackJs (doctor/owner variants) — same absolute-positioned-
   panel + JS-measured-height technique as #plxTestimonialsStackJs: the
   Owner card (extra earnings box + button) renders visibly taller than
   Doctor's, so the shared .plx-persona-stack "size to the tallest
   variant" behavior would leave empty space under the shorter one when
   it's active. #advantages keeps the shared technique untouched — this
   override is scoped to this one #id only. */
#plxSpacesStackJs {
  display: block;
  position: relative;
  transition: height var(--plx-transition-slow) ease;
}

#plxSpacesStackJs .plx-persona-panel {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* ─── Owner space card (Frame 108.png) ─── */

/* Red "Top Performer" pill — same position as the doctor card's category
   badge (.plx-space-card-badge, top-left over the image), just its own
   red/white coloring instead of the shared .plx-badge surface/ink theme. */
.plx-space-card-badge-top {
  align-items: center;
  background: var(--plx-color-primary);
  color: var(--plx-text-inverse);
  gap: 4px;
}

.plx-space-card-badge-top svg {
  color: var(--plx-text-inverse);
}

/* Estimated-earnings box — same "dark/tinted card with a bottom-right
   corner pattern" treatment as .plx-calculator-result, in the site's
   existing success-green tokens instead of --bg-dark. */
.plx-space-card-earnings {
  background: var(--plx-color-success-bg);
  border-radius: var(--plx-radius-md);
  margin-top: var(--plx-space-4);
  overflow: hidden;
  padding: 0 var(--plx-space-4);
  position: relative;
}

.plx-space-card-earnings-pattern {
  bottom: 0;
  height: 100%;
  position: absolute;
  right: 0;
  width: 60px;
}

.plx-space-card-earnings-amount {
  color: var(--plx-text-primary);
  font-family: var(--plx-font-serif);
  font-size: var(--plx-text-xl);
  position: relative;
}

.plx-space-card-earnings-amount span {
  color: var(--plx-text-muted);
  font-family: var(--plx-font-body);
  font-size: var(--plx-text-base);
  vertical-align: text-top;
}

.plx-space-card-earnings-label {
  color: var(--plx-text-secondary);
  font-size: var(--plx-text-sm);
  margin-top: 2px;
  position: relative;
  margin-bottom: var(--plx-space-1);
  font-style: italic;
}

/* Owner's footer, per Frame 108.png: "View Clinic" is plain text (no pill/
   button background), paired with the exact same .plx-card-arrow icon
   circle the Doctor cards already use — not a solid .plx-btn. Reuses the
   shared .plx-space-card-footer space-between row + border-top divider
   as-is, matching the doctor card's price+arrow layout exactly. */
.plx-space-card-view-text {
  color: var(--plx-text-primary);
  font-size: var(--plx-text-base);
  font-weight: var(--plx-weight-medium);
}

@media (max-width: 575.98px) {
  .plx-spaces-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════ DOCTORS ══════════════════ */

.plx-doctors-grid {
  display: grid;
  gap: var(--plx-space-5);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--plx-space-8);
}

@media (max-width: 991.98px) {
  .plx-doctors-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575.98px) {
  .plx-doctors-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════ ECOSYSTEM / HOW IT WORKS ══════════════════ */

.plx-ecosystem {
  background: var(--plx-bg-ecosystem);
}

/* 5 card columns sized equally (1fr) with 4 narrow auto-sized arrow
   columns between them, so each .plx-step-arrow only takes the space its
   own icon needs instead of a full extra card-width column — which is
   what was pushing cards 4-5 onto a wrapped second row. */
.plx-ecosystem-steps {
  align-items: stretch;
  display: grid;
  gap: var(--plx-space-1);
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
}

@media (max-width: 1199.98px) {
  .plx-ecosystem-steps {
    grid-template-columns: 1fr 1fr;
  }

  .plx-step-arrow {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .plx-ecosystem-steps {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════ PERSONA CONTENT SWITCHING ══════════════════ */
/* Shared by #advantages and the testimonials section below it — both
   swap their content to match the active hero persona tab (doctor /
   patient / owner). Same "stack all variants in one grid cell + opacity
   crossfade" technique as .plx-hero-tab-panels, so the section's height
   is always the max of all three variants and switching never jumps or
   flickers. Written without the redundant trailing "ease" that made the
   equivalent .plx-hero-tab-panel transition silently compute to 0s
   (invalid — --plx-transition-slow already bakes in its own easing). */
.plx-persona-stack {
  display: grid;
}

.plx-persona-panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--plx-transition-slow), visibility 0s linear var(--plx-transition-slow);
  visibility: hidden;
}

.plx-persona-panel[data-plx-active='true'] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--plx-transition-slow);
  visibility: visible;
}

/* ══════════════════ ADVANTAGES ══════════════════ */

.plx-advantages-grid {
  display: grid;
  gap: var(--plx-space-5);
  /* Column ratio + gap measured directly off Frame 99.png: hero card and
     the combined right-hand column (tile + gap + tile) are the SAME width
     (590px each, at 1200px container), i.e. hero:tile:tile ≈ 2.07:1:1 —
     not the previous 1.3:1:1, which rendered the hero card noticeably
     narrower than the reference. */
  grid-template-columns: 2.07fr 1fr 1fr;
  grid-template-rows: auto auto;
}

.plx-advantage-hero {
  align-items: flex-start;
  background: var(--plx-color-primary);
  border-radius: var(--plx-radius-lg);
  color: var(--plx-text-inverse);
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1 / 3;
  overflow: hidden;
  /* 20px measured on every side (left edge of eyebrow/title/copy/button,
     and button-bottom-to-card-edge) — was space-8 (32px), visibly roomier
     than Frame 99. */
  padding: var(--plx-space-5);
  position: relative;
}

/* Frame 99's hero card carries a deliberate amount of empty space above
   its bottom-anchored content block (measured 440px tall at 590px wide)
   — content alone doesn't naturally reach that height, so without a
   min-height the auto-sized grid rows collapse to the two short right-
   column cards and the margin-top: auto has nothing to push into. Scoped
   to the desktop 3-column layout only (matches the breakpoint below,
   where the mobile/tablet rules stop spanning 2 rows). */
@media (min-width: 992px) {
  .plx-advantage-hero {
    min-height: 440px;
  }
}

/* Corner pattern — exact ccc-card-bg.svg, native size, top-right anchored
   (same "native size + overflow:hidden containment" treatment used for the
   step-card pattern in cards.css). The paths already carry their own
   fill-opacity, so no extra opacity is applied on the wrapper. */
.plx-advantage-hero-pattern {
  height: 235px;
  position: absolute;
  right: 0;
  top: 0;
  width: 233px;
}

/* Title + copy anchor to the bottom of the tall hero card via
   margin-top: auto on the flex column above; the CTA button follows
   immediately after in normal flow, so the whole cluster reads as one
   bottom-aligned group per Frame 99. */
.plx-advantage-hero-content {
  align-self: stretch;
  margin-top: auto;
  position: relative;
}

/* No max-width: Frame 99's title/copy wrap at the card's own content
   width (padding-to-padding, ~550px), not a narrower fixed column —
   confirmed by where "Practice without owning a" / "clinic space." and
   each copy line actually break. */
.plx-advantage-hero-title {
  color: var(--plx-text-inverse);
  font-size: 48px;
  margin: 0 0 var(--plx-space-4);
}

.plx-advantage-hero-copy {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  margin-bottom: var(--plx-space-6);
}

.plx-advantage-hero .plx-eyebrow-muted {
  color: rgba(255, 255, 255, 0.75);
  position: relative;
}

/* CTA sits on the solid red card as a dark pill (per Frame 99 — not the
   shared light/white treatment used elsewhere). Sized to the button as
   actually measured in Frame 99 (36px tall, 16px horizontal / 9px
   vertical padding) rather than the sitewide 44px .plx-btn min-height —
   scoped to this card only, the shared .plx-btn-dark class elsewhere is
   untouched. */
.plx-advantage-hero .plx-btn-dark {
  min-height: 36px;
  padding: 9px var(--plx-space-4);
}

/* Icon circle measured 18px here vs the sitewide .plx-btn-icon's 22px —
   scoped down to this card only so every other button's icon is untouched. */
.plx-advantage-hero .plx-btn-dark .plx-btn-icon {
  height: 18px;
  width: 18px;
}

/* --plx-btn-dark's default hover (background -> primary red) would
   disappear against this card's own red background, so it's inverted to
   white here instead. */
.plx-advantage-hero .plx-btn-dark:hover:not(:disabled) {
  background: var(--plx-text-inverse);
  border-color: var(--plx-text-inverse);
  color: var(--plx-color-primary);
}

.plx-advantage-hero .plx-btn-dark:hover:not(:disabled) .plx-btn-icon {
  background: var(--plx-color-primary);
  color: var(--plx-text-inverse);
}

/* Same bottom-anchoring logic as .plx-advantage-dark: a flex column so
   .plx-advantage-tile-copy's margin-top: auto can push it to the card's
   bottom edge. Unlike the dark card, only the copy needs to move — the
   title stays put right after the eyebrow — so the auto margin sits on
   the copy itself instead of a shared content wrapper. This keeps the
   copy anchored to the bottom regardless of how tall the card ends up
   (e.g. when grid row-stretch or a longer sibling title changes it),
   rather than leaving dead space beneath a short copy line. */
.plx-advantage-tile {
  background: var(--plx-bg-surface);
  border-radius: var(--plx-radius-lg);
  display: flex;
  flex-direction: column;
  padding: var(--plx-space-6);
}

.plx-advantage-tile-title {
  font-size: var(--plx-text-lg);
  line-height: var(--plx-leading-snug);
  margin-top: var(--plx-space-6);
  font-weight: inherit;
}

.plx-advantage-tile-copy {
  color: var(--plx-text-muted);
  font-size: var(--plx-text-sm);
  margin-top: auto;
  padding-top: var(--plx-space-2);
}

.plx-advantage-dark {
  align-items: flex-start;
  background: var(--plx-bg-dark);
  border-radius: var(--plx-radius-lg);
  color: var(--plx-text-inverse);
  display: flex;
  flex-direction: column;
  grid-column: 2 / 4;
  grid-row: 2;
  /* 20-21px measured on every side, matching .plx-advantage-hero — was
     space-6 (24px). */
  padding: var(--plx-space-5);
}

/* Same bottom-anchoring pattern as .plx-advantage-hero-content. */
.plx-advantage-dark-content {
  align-self: stretch;
  margin-top: auto;
}

.plx-advantage-dark-title {
  color: var(--plx-text-inverse);
  /* text-lg (19px) measured visibly smaller than Frame 99's title. */
  font-size: var(--plx-text-xl);
  margin: 0 0 var(--plx-space-4);
  font-weight: inherit;
}

.plx-advantage-dark-copy {
  color: var(--plx-text-inverse-muted);
  font-size: var(--plx-text-sm);
}

.plx-advantage-dark .plx-eyebrow-muted {
  color: var(--plx-text-subtle);
}

/* "For Clinic Owners" — sampled red (#EC1F25) against the dark section
   background in Frame 107.png, not the subtle gray used elsewhere; and a
   ~20px gap to the title where none existed before. */
.plx-revenue .plx-eyebrow-muted {
  color: var(--plx-color-primary);
  margin-bottom: var(--plx-space-5);
}

/* "Live Calculator" sits on the white card, so it needs its own (darker,
   neutral) color — overrides the red set above for this nested context. */
.plx-calculator .plx-eyebrow-muted {
  color: var(--plx-text-secondary);
  display: block;
  margin-bottom: var(--plx-space-4);
}

@media (max-width: 991.98px) {
  .plx-advantages-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .plx-advantage-hero,
  .plx-advantage-dark {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .plx-advantages-grid {
    grid-template-columns: 1fr 1fr;
  }

  .plx-advantage-hero {
    grid-column: 1 / 3;
  }

  .plx-advantage-dark {
    grid-column: 1 / 3;
  }
}

/* ══════════════════ REVENUE CALCULATOR ══════════════════ */

.plx-revenue {
  background: var(--plx-bg-dark);
  color: var(--plx-text-inverse);
  overflow: hidden;
  position: relative;
}

/* Hidden outright (not opacity/visibility-crossfaded like the persona
   panels elsewhere) for the Doctor and Patient hero tabs — visible only
   for Owner, matching Property 1=Variant2.png and the clinic-owner-only
   content of this section. home.js toggles this off the same tab-switch
   event driving every other persona-linked panel. display:none removes it
   from flow completely so no empty space is reserved underneath. */
.plx-revenue[data-plx-visible='false'] {
  display: none;
}

.plx-revenue-grid {
  align-items: center;
  display: grid;
  gap: var(--plx-space-10);
  grid-template-columns: 1fr 1fr;
}

.plx-revenue-title {
  color: var(--plx-text-inverse);
  /* font-size: var(--plx-text-5xl); */
  margin-bottom: var(--plx-space-4);
}

.plx-revenue-copy {
  color: var(--plx-text-inverse-muted);
  margin-bottom: var(--plx-space-6);
  max-width: 420px;
}

.plx-calculator {
  background: var(--plx-bg-surface);
  border-radius: var(--plx-radius-lg);
  box-shadow: var(--plx-shadow-lg);
  color: var(--plx-text-primary);
  padding: var(--plx-space-6);
}

.plx-calculator-fields {
  display: grid;
  gap: var(--plx-space-5);
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--plx-space-6);
}

/* Measured off Frame 107.png: 83px tall pill (radius = half its own
   height, i.e. --radius-full, not --radius-md), filled with the same
   pale-red --plx-bg-ecosystem tone used elsewhere (not --bg-accent), and
   much roomier padding than before. */
.plx-calculator-field {
  background: var(--plx-bg-ecosystem);
  border-radius: var(--plx-radius-full);
  padding: var(--plx-space-5) var(--plx-space-8);
  position: relative;
}

.plx-calc-select-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--plx-radius-sm);
  color: var(--plx-text-primary);
  cursor: pointer;
  display: flex;
  font-family: var(--plx-font-body);
  font-size: var(--plx-text-sm);
  font-weight: var(--plx-weight-semibold);
  justify-content: space-between;
  margin-top: 2px;
  padding: 0;
  text-align: left;
  transition: background-color var(--plx-transition-fast), box-shadow var(--plx-transition-fast);
  width: 100%;
}

.plx-calc-select-btn:focus-visible {
  background-color: var(--plx-bg-surface);
  box-shadow: 0 0 0 3px var(--plx-color-primary-light);
  outline: none;
}

.plx-calc-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.plx-calc-select-arrow {
  color: #53555c;
  flex-shrink: 0;
  margin-left: var(--plx-space-2);
  transition: transform 0.2s ease;
}

.plx-calc-select-btn[aria-expanded="true"] .plx-calc-select-arrow {
  transform: rotate(180deg);
}

/* Calculator custom dropdown matching Image 2 */
.plx-calc-dropdown {
  background: #ffffff;
  border: 1px solid var(--plx-border-default, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  display: none;
  left: 0;
  margin-top: 8px;
  min-width: 280px;
  padding: 14px;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1050;
}

.plx-calc-dropdown.is-open {
  display: block;
  animation: plxCalcDropdownFadeIn 0.18s ease-out;
}

@keyframes plxCalcDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.plx-calc-dropdown-content {
  display: flex;
  flex-direction: column;
}

.plx-calc-dropdown .plx-filter-search {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: var(--plx-text-primary);
  font-family: var(--plx-font-body);
  font-size: var(--plx-text-sm);
  margin-bottom: 10px;
  padding: 8px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.plx-calc-dropdown .plx-filter-search:focus {
  border-color: #ff4415;
  box-shadow: 0 0 0 3px rgba(255, 68, 21, 0.12);
  outline: none;
}

.plx-calc-dropdown .plx-filter-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.plx-calc-dropdown .plx-filter-options::-webkit-scrollbar {
  width: 6px;
}

.plx-calc-dropdown .plx-filter-options::-webkit-scrollbar-track {
  background: transparent;
}

.plx-calc-dropdown .plx-filter-options::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.plx-calc-dropdown .plx-filter-options::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.plx-calc-dropdown .plx-filter-option {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  font-size: var(--plx-text-sm);
  gap: 10px;
  padding: 8px 10px;
  transition: background-color 0.15s ease;
  user-select: none;
}

.plx-calc-dropdown .plx-filter-option:hover {
  background: #f8fafc;
}

.plx-calc-dropdown .plx-filter-option.is-selected {
  background: #fff5f2;
}

.plx-calc-dropdown .plx-filter-checkbox {
  accent-color: #ff4415;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}

.plx-calc-dropdown .plx-filter-option span {
  color: #1e293b;
  flex: 1;
  font-weight: 400;
}

.plx-calc-dropdown .plx-calc-empty {
  color: #94a3b8;
  display: none;
  font-size: var(--plx-text-xs);
  padding: 14px 8px;
  text-align: center;
}

.plx-calculator-field-value {
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2353555C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 10px 6px no-repeat;
  background-color: transparent;
  border: 0;
  border-radius: var(--plx-radius-sm);
  color: var(--plx-text-primary);
  cursor: pointer;
  font-family: var(--plx-font-body);
  font-size: var(--plx-text-sm);
  font-weight: var(--plx-weight-semibold);
  margin-top: 2px;
  padding-right: var(--plx-space-4);
  transition: background-color var(--plx-transition-fast), box-shadow var(--plx-transition-fast);
  width: 100%;
}

.plx-calculator-field-value[type="number"] {
  background: none;
  padding-right: var(--plx-space-4);
}

.plx-calculator-field-value[type="number"]::-webkit-outer-spin-button,
.plx-calculator-field-value[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Same focus treatment as the shared .plx-input/.plx-select fields
   (forms.css) — a clear white fill plus the sitewide primary-tinted
   ring — instead of the previous plain outline, which sat awkwardly
   against the pill-shaped field background. Stays fully transparent
   until focused. */
.plx-calculator-field-value:focus-visible {
  background-color: var(--plx-bg-surface);
  box-shadow: 0 0 0 3px var(--plx-color-primary-light);
  outline: none;
}

.plx-calculator-slider-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--plx-space-2);
}

/* Not directly confirmed (Figma MCP call limit hit before this node could
   be checked) — inferred from the consistent pattern that every other
   numeral/amount in this design (prices, "₹72,000") uses Instrument Serif. */
.plx-calculator-slider-value {
  font-family: var(--plx-font-serif);
  font-size: 20px;
}

.plx-calculator-result {
  background: var(--plx-bg-dark);
  border-radius: var(--plx-radius-md);
  color: var(--plx-text-inverse);
  margin-top: var(--plx-space-5);
  overflow: hidden;
  padding: var(--plx-space-5);
  position: relative;
}

/* Exact calculator-shape.svg, native size, right-anchored and stretched
   to the card's full height (measured 142x143 against a 143px-tall card
   in Frame 107.png — the two already match almost exactly). The paths
   carry their own fill-opacity, so no extra opacity on the wrapper. */
.plx-calculator-result-pattern {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 142px;
}

/* Inferred Instrument Serif — same not-directly-confirmed caveat as the
   slider value above. */
.plx-calculator-result-amount {
  font-family: var(--plx-font-serif);
  font-size: var(--plx-text-2xl);
  margin: var(--plx-space-1) 0;
}

/* Wraps the asterisk icon + amount so JS can update the amount's text
   without ever touching (and wiping out) the icon markup. */
.plx-calculator-result-amount-row {
  align-items: center;
  display: flex;
  gap: 6px;
  position: relative;
}

.plx-calculator-result-icon {
  color: var(--plx-text-inverse);
  flex-shrink: 0;
  margin-top: -13px;
}

.plx-calculator-result-meta {
  color: var(--plx-text-inverse-muted);
  font-size: var(--plx-text-sm);
  position: relative;
}

.plx-calculator-disclaimer {
  color: var(--plx-text-muted);
  font-size: var(--plx-text-xs);
  font-style: italic;
  margin-top: var(--plx-space-4);
}

.plx-calculator-hours-display {
  cursor: default;
  padding: 0 !important;
  background: none !important;
}

.plx-calculator-breakdown {
  border: 1px solid var(--plx-border-light, #e7e7e7);
  border-radius: var(--plx-radius-md);
  margin-top: var(--plx-space-3);
  padding: 4px 18px;
}

.plx-calculator-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: var(--plx-space-3) 0;
  border-bottom: 1px solid var(--plx-border-lighter, #eee);
  font-size: 14px;
}

.plx-calculator-breakdown-row:last-child {
  border-bottom: 0;
}

.plx-calculator-breakdown-row-final {
  font-weight: var(--plx-weight-bold, 700);
}

.plx-calculator-deduct {
  color: var(--plx-color-danger);
}

.plx-calculator-receive {
  color: var(--plx-color-success);
  font-size: var(--plx-text-base);
}

@media (max-width: 991.98px) {
  .plx-revenue-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .plx-calculator-fields {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════ NEWS / FROM THE COLLECTIVE ══════════════════ */

.plx-news {
  /* background: var(--plx-color-primary); */
  background: #EC1F250D;

}

.plx-news-grid {
  display: grid;
  gap: var(--plx-space-5);
  grid-template-columns: 1.15fr 1fr;
  margin-bottom: var(--plx-space-8);
}

.plx-news-side {
  display: grid;
  gap: var(--plx-space-5);
  grid-template-rows: 1fr 1fr;
}

@media (max-width: 767.98px) {
  .plx-news-grid {
    grid-template-columns: 1fr;
  }
}

/* .plx-btn-outline is shared with other sections (e.g. "Explore All
   Spaces"), so this section's own bordered/white-icon treatment — measured
   off Frame 124-from-the-collective.png — is scoped here rather than
   changed on the shared class. */
.plx-news .plx-btn-outline {
  background: var(--plx-bg-accent);
  border-color: var(--plx-border-default);
  color: var(--plx-text-primary);
}
.plx-news .plx-btn-outline:hover:not(:disabled) {
  background: var(--plx-color-ink);
  border-color: var(--plx-color-ink);
  color: var(--plx-text-inverse);
}
.plx-news .plx-btn-outline .plx-btn-icon {
  background: var(--plx-bg-surface);
  color: var(--plx-color-ink);
}
.plx-news .plx-btn-outline:hover:not(:disabled) .plx-btn-icon {
  background: var(--plx-text-inverse);
  color: var(--plx-color-primary);
}

/* ══════════════════ TESTIMONIALS ══════════════════ */

.plx-testimonials-grid {
  display: grid;
  gap: var(--plx-space-5);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991.98px) {
  .plx-testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575.98px) {
  .plx-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* #plxTestimonialsStackJs bug fix: the shared .plx-persona-stack technique
   above (all persona panels stacked in one grid cell, sized to the
   tallest) is right for #advantages, whose 3 persona variants are close
   in height, but the testimonials' quote lengths differ enough per
   persona that it was reserving the tallest panel's height under the
   shorter ones, showing up as empty space beneath the active cards.
   Testimonials get their own sizing model instead, scoped to this one
   #id so #advantages is untouched: panels are taken out of flow
   (position:absolute) so the shortest one no longer inherits the
   tallest's height, and home.js sets this container's own height inline
   to match only the active panel, transitioning smoothly alongside the
   existing opacity crossfade instead of jumping. */
#plxTestimonialsStackJs {
  display: block;
  position: relative;
  transition: height var(--plx-transition-slow) ease;
}

#plxTestimonialsStackJs .plx-persona-panel {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#spaces {
  background-color: #FAF9F6;
}
#spaces .plx-btn-icon,
#doctors .plx-btn-icon {
    background: var(--plx-text-inverse);
    color: var(--plx-color-ink);
}
.d-none {
  display: none;
}

.plx-field-dropdown--availability .flatpickr-current-month {
    font-size: 100%;
    width: 100%;
    left: 15px;
    text-align: left;
}

.plx-field-dropdown--availability span.flatpickr-weekday {
  font-weight: initial;
}
.plx-field-dropdown--availability .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .plx-field-dropdown--availability .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
    right: 50px;
    left: auto;
}
.plx-field-dropdown--availability .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .plx-field-dropdown--availability .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    right: 15px;
}

/* Card navigation styling for space cards with listing links */
.plx-card-clickable {
  cursor: pointer;
}

/* ══════════════════ DOCTOR FILTERS ══════════════════ */

.plx-doctor-filter-buttons {
  display: flex;
  gap: var(--plx-space-2);
  margin-top: var(--plx-space-6);
  position: relative;
}

.plx-doctor-filter-btn {
  background: var(--plx-bg-body);
  border: 1px solid var(--plx-border-default);
  border-radius: 20px;
  color: var(--plx-text-primary);
  cursor: pointer;
  font-size: var(--plx-text-sm);
  padding: 8px 16px;
  position: relative;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.plx-doctor-filter-btn:hover {
  border-color: #000;
  color: #000;
}

.plx-doctor-filter-btn:first-child {
  background: #000;
  color: #fff;
  border-color: #000;
}

.plx-doctor-filter-btn:first-child:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

.plx-filter-dropdown {
  background: var(--plx-bg-body);
  border: 1px solid var(--plx-border-default);
  border-radius: var(--plx-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
  left: 0;
  margin-top: var(--plx-space-2);
  min-width: 280px;
  position: absolute;
  top: 100%;
  z-index: 1000;
}

.plx-filter-dropdown-content {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--plx-space-4);
}

.plx-filter-search {
  background: var(--plx-bg-elevated);
  border: 1px solid var(--plx-border-default);
  border-radius: var(--plx-radius-sm);
  font-size: var(--plx-text-sm);
  margin-bottom: var(--plx-space-3);
  padding: var(--plx-space-2) var(--plx-space-3);
  width: 100%;
}

.plx-filter-search::placeholder {
  color: var(--plx-text-tertiary);
}

.plx-filter-search:focus {
  border-color: var(--plx-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--plx-color-primary-rgb), 0.1);
}

.plx-filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--plx-space-2);
}

.plx-filter-option {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--plx-text-sm);
  gap: var(--plx-space-2);
  padding: var(--plx-space-2) var(--plx-space-2);
  user-select: none;
}

.plx-filter-option:hover {
  background: var(--plx-bg-hover);
  border-radius: var(--plx-radius-sm);
}

.plx-filter-checkbox {
  cursor: pointer;
  accent-color: var(--plx-color-primary);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.plx-filter-option span {
  flex: 1;
  color: var(--plx-text-primary);
}

.plx-doctors-grid {
  margin-top: var(--plx-space-8);
  transition: opacity 0.3s ease;
}

.plx-doctor-card-media {
  position: relative;
  overflow: hidden;
  background: #f5f0e8;
}

.plx-doctor-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, #f5f0e8 0%, #ede5d9 100%);
  color: #999;
}

.plx-doctor-placeholder svg {
  width: 120px;
  height: 120px;
  color: #999;
}

.plx-doctor-card-media-error {
  background: #f5f0e8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.plx-doctor-card-media-error::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f5f0e8 0%, #ede5d9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .plx-doctor-filter-buttons {
    gap: var(--plx-space-2);
  }

  .plx-filter-dropdown {
    left: auto;
    right: 0;
    min-width: 250px;
  }
}