/*
 * 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);
  overflow: hidden;
  padding: 62px 0 80px;
  position: relative;
}

.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;
}

.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;
  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-6);
}

@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 {
    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;
  }

  .plx-hero-media {
    height: 260px;
  }

  /* 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-hero-grid {
    align-items: stretch;
    gap: 0;
  }

  .plx-hero-panel-col {
    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);
  }

  .plx-hero-subtitle {
    order: 4;
  }

  .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 the intended 2-column grid. */
  .plx-hero-tabs.plx-pill-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: var(--plx-radius-md);
    -webkit-border-radius: var(--plx-radius-md);
    -moz-border-radius: var(--plx-radius-md);
    -ms-border-radius: var(--plx-radius-md);
    -o-border-radius: var(--plx-radius-md);
    padding: var(--plx-space-2) var(--plx-space-3);
}
.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;
}
  .plx-hero-tabs .plx-pill-toggle-item:last-child {
    grid-column: span 2;
  }
}

/* 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;
}

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

/* 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;
}

@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);
}

.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%;
}

/* 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);
}

@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;
}