/* === css/intel-building/pages/home.css === v1.4.3 ===
   Intel Building (new theme) — homepage styles (sections below the header).
   Built from figma-ui-folder/Intel- Building-Dev.fig ("Wireframe - 7" frame)
   + figma-ui-folder/screens/Wireframe - 7.png.
   Isolated from the legacy KIBMS theme (welcome.css) — do not merge.
   Loaded via intel-building/app.css, after base/variables.css and layout/header/.

   v1.1.0: tokens moved to intel-building/base/variables.css and the site
   header moved to intel-building/layout/header/ — load those before this
   file. Nothing else in this file changed.
   v1.1.1: fixed .plx-btn-primary's text color losing to ".plx-ib a"'s higher
   specificity color:inherit (was showing dark text on the header's white
   background) — see the comment above .plx-btn.plx-btn-primary below.
   v1.1.2: moved from css/intel-home.css to css/intel-building/pages/home.css
   per Frontend-doc's base/layout/components/pages structure. No rule changes.
   v1.2.0: Hero rebuilt to match Component 3.png — background is now the
   single existing intel-banner.jpg (person + dashboard cards baked in), so
   the hand-built hero overlay-card, qr-card, dashboard-card, scan-card and
   mini-stat rules were removed (they'd otherwise duplicate what's already
   in the image, same bug as before). Hero button padding fixed to the fig
   spec (16/12, not the base 24/12), and the trustbar got real 1px divider
   lines + fig-accurate 20px gap/padding.
   v1.2.1: the v1.2.0 changelog note above contained a class-name list
   ending in an asterisk immediately followed by a slash, which — same as
   a comment-close token — closed this comment early. Chromium then tried
   to parse the rest of the changelog prose as CSS and discarded the entire
   file (a lenient parser or Python reading the file back didn't reproduce
   it, which is what made this so slow to track down). Every rule below was
   unaffected all along; only this comment block was ever broken. (Writing
   about the exact two characters here without a space between them would
   trip the same bug again, so this note deliberately doesn't spell it out.)
   v1.3.0: hero background switched to the unmodified intel-banner.jpg (no
   webp re-encode); re-enabled the ::after darkening gradient (was left
   disabled with "content" commented out from an earlier debugging pass —
   restored since Component 3.png shows it and .plx-hero-desc needs it for
   contrast); hero-inner top/bottom padding replaced with the exact fig
   figures (237px / 120px at lg) so the total hero height lands on the
   design's real 750px instead of an approximate min-height, fixing the
   background photo being cropped; trustbar opacity/blur raised to match
   how dark Component 3.png's band actually is.
   v1.3.1: hero's .plx-container instances (hero-inner + trustbar) now match
   the header's exact left/right boundaries (both = x:120 on the fig canvas)
   via a scoped override instead of the generic 1320px/24px container.
   v1.4.0: the base .plx-container itself now uses --container-max (renamed
   from --header-container-max in variables.css v1.1.0) at 12px padding, so
   every section — not just the hero — shares the header's exact boundary;
   removed the now-redundant scoped .plx-hero override from v1.3.1. #features
   ("Explore The Platform") rebuilt light-themed to match Property
   1=Default/Variant2/Variant3.png (was dark — that never matched any
   reference image): image background, light tab/card treatment, dark
   heading/desc text, real check-circle.svg icon. Added a Manager and an
   Admin role-panel (previously only Staff App had real content) with their
   own heading/desc/checklist/photo, and the tabs now actually switch
   between the three panels instead of just toggling the active pill.
   v1.4.1: .plx-roles-tabs got the soft elevated shadow Property 1=Default.png
   shows (it had none before) plus a matching shadow on the active pill;
   .plx-check-grid now lays out 2 pills per row from the sm breakpoint up
   (was a single column); .plx-eyebrow-dot now pulses via the requested
   plx-dot-pulse animation. */

/* ============================================================
   2. BASE
   ============================================================ */
.plx-ib {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-x: hidden;
}

.plx-ib h1,
.plx-ib h2,
.plx-ib h3,
.plx-ib h4 {
  font-family: var(--font-heading);
  /* color intentionally inherited (not set here) so headings in dark
     sections/cards pick up their container's inverse text color instead
     of fighting it with specificity overrides everywhere. */
  line-height: 1.15;
  /* margin: 0; */
}

.plx-ib p {
  /* margin: 0; */
}

.plx-ib img {
  max-width: 100%;
  display: block;
}

.plx-ib a {
  text-decoration: none;
  color: inherit;
}

/* This is now the one page-wide container — same box the header resolves
   to (1224px + Bootstrap's 12px gutter = 120px from the viewport edge at
   1440px). Every section below uses this instead of its own width. */
.plx-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.plx-section {
  padding: var(--space-20) 0;
}

.plx-section-tight {
  padding: var(--space-16) 0;
}

.plx-section-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.plx-section-black {
  background: var(--color-bg-black);
  color: var(--color-text-inverse);
}

.plx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(254, 102, 1, 0.15);
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.plx-eyebrow--dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border-dark);
}

.plx-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: 0 0 auto;
  animation: plx-dot-pulse 2s ease-out infinite;
}

.plx-eyebrow-dot--success {
  background: var(--color-success);
}

@keyframes plx-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(254, 102, 1, 0.45);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(254, 102, 1, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(254, 102, 1, 0);
  }
}

.plx-heading-xl {
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

.plx-heading-xl .plx-accent {
  color: var(--color-primary);
}

.plx-lede {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 640px;
}

.plx-section-dark .plx-lede,
.plx-section-black .plx-lede {
  color: var(--color-text-inverse-secondary);
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.plx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.plx-btn:hover {
  transform: translateY(-1px);
}

.plx-btn-primary {
  background: var(--color-primary);
}

/* .plx-btn.plx-btn-primary (not .plx-btn-primary alone): the base ".plx-ib a"
   rule sets color:inherit at (0,1,1) specificity, which otherwise beats a
   single ".plx-btn-primary" class at (0,1,0) and makes anchor-tag primary
   buttons pick up whatever text color their section happens to inherit
   (visible as a dark-on-orange button in the white header, though it went
   unnoticed on dark sections where inherit already resolved to white). No
   !important — just enough specificity to win correctly. */
.plx-btn.plx-btn-primary,
.plx-btn.plx-btn-primary:hover,
.plx-btn.plx-btn-primary:focus-visible {
  color: var(--color-text-inverse);
}

.plx-btn-primary:hover {
  background: var(--color-primary-hover);
}

.plx-btn-dark {
  background: var(--color-dark);
  color: var(--color-text-inverse);
}

.plx-btn-ghost-light {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.16);
}

.plx-btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.16);
}

.plx-btn-ghost-dark {
  background: rgba(13, 18, 23, 0.06);
  color: var(--color-text-primary);
  border-color: rgba(13, 18, 23, 0.1);
}

.plx-btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.plx-btn-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.9em;
}

/* Real arrow.svg icon (header, hero and demo-form buttons) instead of the
   unicode arrow used by the remaining .plx-btn-icon usage (CTA). */
.plx-btn-icon img {
  display: block;
  width: 14px;
  height: auto;
}

/* ============================================================
   4. SITE HEADER — moved to intel-building/layout/header/*.css
   ============================================================ */

/* ============================================================
   5. HERO
   ============================================================ */
.plx-hero {
  position: relative;
  color: var(--color-text-inverse);
  overflow: hidden;
}

.plx-site-header--overlay + .plx-hero {
  margin-top: 0;
}

.plx-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.plx-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}



/* Top/bottom padding here is what actually places the hero content and
   sizes the section (the header overlays on top via position:absolute, it
   doesn't push this down) — mobile-first defaults below, replaced with the
   exact fig figures at the lg breakpoint (see header-responsive note there:
   Frame 15 sits at y:237 in the 750px-tall "Wireframe - 7" hero frame, and
   the frame totals 237 + 321 (content) + 120 + 72 (trustbar) = 750). */
.plx-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-top: 132px;
  padding-bottom: var(--space-16);
}

.plx-hero-content {
  max-width: 460px;
}

.plx-hero-title {
  font-size: clamp(34px, 3.4vw, var(--text-hero));
  font-weight: var(--weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  color: var(--color-text-inverse);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.plx-hero-title span {
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);

}
.plx-hero-desc {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-inverse-secondary);
  max-width: 412px;
  /* Component 3.png / fig "Frame 15" stackSpacing: 24px between the
     heading+desc block and the button row below it. */
  margin-bottom: var(--space-6);
}

.plx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Hero "Book Demo" / "Download App" — fig "Frame 129" > "Frame 7": 146x43,
   16px horizontal / 12px vertical padding (narrower than the header's 20/12). */
.plx-hero-actions .plx-btn {
  height: 43px;
  padding: 0 var(--space-4);
}

/* Component 3.png's trustbar reads as almost solid dark (sampled pixels
   ~rgb(10-50) across the band) — the photo should barely show through, not
   the ~55%-opacity tint this had before. */
.plx-hero-trustbar {
    position: relative;
    z-index: 1;
    background: rgb(4 6 9 / 42%);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-top: 1px solid var(--color-border-dark);
}

/* fig "Frame 130" (72px tall) > "Frame 21": stackSpacing 20px applied
   uniformly between every item AND every divider, counter-align centered
   (=27px top/bottom within the 72px bar, i.e. vertically centered). */
.plx-trustbar-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: 27px 0;
}

.plx-trustbar-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

.plx-trustbar-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border-dark);
  flex: 0 0 auto;
}

.plx-trustbar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: 0 0 auto;
}

.plx-trustbar-dot--success {
  background: var(--color-success);
}

/* ============================================================
   6. EXPLORE / THREE ROLES
   Pixel reference: figma-ui-folder/screens/Property 1=Default.png (Staff
   App), "Property 1=Variant2 (1).png" (Manager), "Property 1=Variant3.png"
   (Admin) — fig: "Wireframe - 7" > "Component 37", the same 1440x911
   instance with 3 variants of its "Property 1" tab state.
   ============================================================ */
.plx-roles {
  position: relative;
  padding: var(--space-16) 0 var(--space-20);
  overflow: hidden;
}

.plx-roles-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.plx-roles-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.plx-roles > .plx-container {
  position: relative;
  z-index: 1;
}

.plx-roles-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.plx-roles-head .plx-heading-xl {
  max-width: 580px;
  font-weight: var(--weight-semibold);
}
.plx-roles-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    padding: var(--space-2);
    backdrop-filter: blur(13px);
    box-shadow: inset 4px 6px 9px 2px rgb(176 176 176 / 12%);
}

.plx-roles-tab {
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.plx-roles-tab[data-plx-active="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  /* the active pill has its own subtler "inner" elevation, distinct from the
     outer .plx-roles-tabs container's shadow above */
  /* box-shadow: 0 4px 10px rgba(254, 102, 1, 0.28); */
}

.plx-frontline-card {
    background: rgb(255 255 255 / 20%);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    overflow: hidden;
    backdrop-filter: blur(13px);
    box-shadow: inset 0 6px 9px 2px rgb(176 176 176 / 9%);
}

.plx-role-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.plx-role-panel[data-plx-active="false"] {
  display: none;
}

@keyframes plxRolePanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.plx-role-panel[data-plx-active="true"] {
  animation: plxRolePanelIn var(--transition-base) ease;
}

.plx-frontline-heading {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.plx-frontline-desc {
  color: var(--color-text-secondary);
  max-width: 460px;
  margin-bottom: var(--space-6);
}

/* 1 column on small screens, 2 per row from sm up — matches Property
   1=Default/Variant2/Variant3.png, where the 5 pills always lay out 2-2-1. */
.plx-check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.plx-check-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-surface);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  /* box-shadow: 0 1px 2px rgba(13, 18, 23, 0.06); */
}

/* images/intel-building/icons/check-circle.svg — used as-is (orange stroke
   circle + check), replacing the previous hand-built filled-circle icon. */
.plx-check-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.plx-check-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.plx-frontline-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
}

.plx-frontline-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plx-frontline-overlays {
  position: absolute;
  inset: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.plx-fl-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  width: 220px;
  box-shadow: var(--shadow-pop);
}

.plx-fl-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.plx-fl-card-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.plx-fl-card-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-primary);
  margin-top: 2px;
}

.plx-fl-card-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.plx-fl-card-check svg {
  width: 10px;
  height: 10px;
}

.plx-fl-progress {
  margin-top: var(--space-2);
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.plx-fl-progress span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.plx-fl-card-person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.plx-fl-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

/* ============================================================
   7. SEE IN ACTION (product demo photo)
   ============================================================ */
.plx-action {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 0;
  background-color: var(--color-bg-page);
}

.plx-action-bg-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.plx-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.plx-action-copy {
  /* Same left inset as the page-wide .plx-container (120px at 1440, scaling
     the same way below the 1224px max-width) instead of a fixed padding —
     this is a half-width column so the container class itself can't center
     here; this formula reproduces its exact math. */
  padding-left: max(var(--space-3), calc((100vw - var(--container-max)) / 2 + var(--space-3)));
  padding-right: var(--space-6);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* opaque so the section's full-bleed gif background only actually shows
     through on the media column's side, not behind the text */
  /* background-color: var(--color-bg-page); */
}

.plx-action-copy .plx-container {
  padding: 0;
  max-width: 460px;
  margin: 0;
}

/* No background of its own — this column is just a transparent spacer so
   the grid keeps its width; the gif is .plx-action's own background now. */
.plx-action-media {
  position: relative;
  min-height: 340px;
}

/* ============================================================
   8. PLATFORM MODULES (phone mockup)
   ============================================================ */
.plx-modules {
  position: relative;
  overflow: hidden;
  padding: var(--space-20) 0;
  background: #FDF9FA;
}

.plx-modules-shape {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.plx-modules > .plx-container {
  position: relative;
  z-index: 1;
}

.plx-modules-head {
  max-width: 620px;
  margin-bottom: var(--space-8);
}

.plx-modules-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  background: var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2);
  margin-bottom: var(--space-8);
      box-shadow: inset 4px 6px 9px 2px rgb(176 176 176 / 12%);

}

.plx-modules-tab {
  border: none;
  background: transparent;
  /* color: var(--color-text-secondary); */
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.plx-modules-tab[data-plx-active="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.plx-modules-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.plx-modules-intro {
  font-size: var(--text-lg);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.plx-modules-intro b {
  font-weight: var(--weight-bold);
}

.plx-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plx-feature-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgba(254, 102, 1, 0.15);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.plx-feature-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(254, 102, 1, 0.1);
}

.plx-feature-icon {
  flex: 0 0 auto;
  line-height: 0;
  margin-top: 2px;
}

.plx-feature-icon img {
  width: 22px;
  height: 22px;
}

.plx-feature-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: 4px;
}

.plx-feature-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.plx-phone-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plx-phone-stage img.plx-phone-main {
  width: 100%;
  max-width: 460px;
}

/* ============================================================
   9. OUTCOMES
   ============================================================ */
.plx-outcomes {
  position: relative;
  overflow: hidden;
  padding: var(--space-20) 0;
  background: var(--color-bg-surface);
}

.plx-outcomes-shape {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.plx-outcomes > .plx-container {
  position: relative;
  z-index: 1;
}

.plx-outcomes-head {
  margin-bottom: var(--space-10);
}
.plx-outcomes-head .plx-heading-xl {
  max-width: 700px;

}
.plx-outcomes-head  .plx-lede {
  max-width: 100%;
}
.plx-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.plx-outcome-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

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

.plx-outcome-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  background: var(--color-bg-surface);
  border: 1px solid rgba(254, 102, 1, 0.3);
  display: flex;
  flex-direction: column;
}

.plx-outcome-card--dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-text-inverse);
}

.plx-outcome-card--orange {
  background: #FE7D27;
  border-color: #FE7D27;
  color: var(--color-text-inverse);
}

.plx-outcome-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  margin-bottom: var(--space-3);
}

.plx-outcome-card--orange .plx-outcome-tag {
  color: rgba(255, 255, 255, 0.75);
}

.plx-outcome-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.plx-outcome-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.plx-outcome-card--dark .plx-outcome-desc {
  color: rgba(255, 255, 255, 0.5);
}

.plx-outcome-card--orange .plx-outcome-desc {
  color: rgba(255, 255, 255, 0.75);
}

.plx-outcome-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-8);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(13, 18, 23, 0.08);
}

.plx-outcome-card--dark .plx-outcome-stats,
.plx-outcome-card--orange .plx-outcome-stats {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.plx-outcome-stat-solo {
  margin-top: auto;
}

.plx-outcome-stat-value {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-text-primary);
}

.plx-outcome-stats > div:first-child .plx-outcome-stat-value {
  color: var(--color-primary);
}

.plx-outcome-card--dark .plx-outcome-stat-value,
.plx-outcome-card--orange .plx-outcome-stat-value {
  color: var(--color-text-inverse);
}
.plx-outcome-card--orange .plx-outcome-stat-value {
  font-size: var(--text-6xl);
}
.plx-outcome-card--dark .plx-outcome-stats > div:first-child .plx-outcome-stat-value,
.plx-outcome-card--orange .plx-outcome-stats > div:first-child .plx-outcome-stat-value {
  color: var(--color-primary);
}

.plx-outcome-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.plx-outcome-card--dark .plx-outcome-stat-label,
.plx-outcome-card--orange .plx-outcome-stat-label {
  color: rgba(255, 255, 255, 0.6);
}

.plx-outcome-ring-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
}

.plx-outcome-ring-label {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
}

.plx-outcome-ring-sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.plx-outcome-ring {
  --ring-pct-size: var(--text-base);
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--color-primary) calc(var(--pct, 98) * 1%), #D9D9D9 0);
}

.plx-outcome-ring::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--color-bg-surface);
}

.plx-outcome-ring::before {
  content: attr(data-plx-value);
  position: relative;
  z-index: 1;
  font-weight: var(--weight-bold);
  font-size: var(--ring-pct-size);
  color: var(--color-text-primary);
}

.plx-outcome-pin {
  margin-top: auto;
}

.plx-outcome-pin img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.plx-outcome-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 92px;
  margin-top: auto;
}

.plx-outcome-bars span {
  flex: 1;
  height: calc(var(--h) * 1%);
  background: var(--color-primary);
  opacity: calc(0.1 + var(--h) * 0.0044);
  border-radius: 3px;
}

/* ---- Scroll-reveal + counter/ring/bar animation ------------------------
   JS-driven (home.js: initOutcomeAnimations). Markup already carries the
   correct final values/attributes, so a JS-disabled or reduced-motion visit
   renders the section exactly as before this file — the [data-plx-anim]
   states below only ever get applied by the observer, and only when the
   user allows motion. Cards fade/rise in once on first viewport entry;
   .plx-outcome-bars grow from their base with a transform (no layout
   thrash, since --h already sets the real final height). */
@media (prefers-reduced-motion: no-preference) {
  .plx-outcome-card-js[data-plx-anim="pending"] {
    opacity: 0;
    transform: translateY(16px);
  }

  .plx-outcome-card-js[data-plx-anim="in"] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .plx-outcome-card-js .plx-outcome-bars span {
    transform: scaleY(0);
    transform-origin: bottom;
  }

  .plx-outcome-card-js[data-plx-anim="in"] .plx-outcome-bars span {
    transform: scaleY(1);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .plx-outcome-card-js .plx-outcome-bars span:nth-child(2) { transition-delay: 40ms; }
  .plx-outcome-card-js .plx-outcome-bars span:nth-child(3) { transition-delay: 80ms; }
  .plx-outcome-card-js .plx-outcome-bars span:nth-child(4) { transition-delay: 120ms; }
  .plx-outcome-card-js .plx-outcome-bars span:nth-child(5) { transition-delay: 160ms; }
  .plx-outcome-card-js .plx-outcome-bars span:nth-child(6) { transition-delay: 200ms; }
  .plx-outcome-card-js .plx-outcome-bars span:nth-child(7) { transition-delay: 240ms; }
  .plx-outcome-card-js .plx-outcome-bars span:nth-child(8) { transition-delay: 280ms; }
}

/* ============================================================
   10. TRUSTED / STATS BANNER
   ============================================================ */
.plx-trusted {
  position: relative;
  padding: var(--space-16) 0;
  overflow: hidden;
  text-align: center;
  background: var(--color-dark);
}

.plx-trusted-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.plx-trusted-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.plx-trusted-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 13, 0.71);
}

.plx-trusted-inner {
  position: relative;
  z-index: 1;
}

.plx-trusted .plx-eyebrow {
  margin-left: auto;
  margin-right: auto;
}

.plx-trusted .plx-eyebrow--dark {
  background: rgba(254, 102, 1, 0.08);
  border-color: rgba(254, 102, 1, 0.2);
}

.plx-trusted-heading {
  font-size: clamp(28px, 4.5vw, var(--text-hero));
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-text-inverse);
  max-width: 900px;
  margin: 0 auto var(--space-10);
}
.plx-trusted-heading .plx-accent {
    color: var(--color-primary);
}

.plx-trusted-heading br {
  display: none;
}

.plx-trusted-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-dark);
}

.plx-trusted-stats > div {
  position: relative;
}

.plx-trusted-stat-value {
  font-family: var(--font-serif);
  font-size: var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-primary);
}

.plx-trusted-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-inverse-secondary);
  margin-top: var(--space-2);
}

.plx-trusted-logos {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  /* Break out of .plx-trusted-inner/.plx-container to span the full
     viewport width edge-to-edge; .plx-trusted's own overflow:hidden
     clips the sub-pixel/scrollbar overhang from 100vw, so this never
     introduces horizontal scroll. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.plx-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: plx-ticker-scroll var(--plx-ticker-duration, 22s) linear infinite;
  cursor: grab;
  touch-action: pan-y;
}

.plx-ticker-track.plx-ticker-dragging {
  cursor: grabbing;
  user-select: none;
}

.plx-trusted-logos:hover .plx-ticker-track {
  animation-play-state: paused;
}

@keyframes plx-ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}

.plx-trusted-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.plx-trusted-logo img {
  height: 110px;
  width: auto;
  background-color: var(--color-bg-surface);
    margin-right: var(--space-10);
    padding: var(--space-2);
  -webkit-user-drag: none;

  /* opacity: 0.6; */
}

/* ============================================================
   11. BUILT FOR EVERY KIND OF BUILDING
   ============================================================ */
.plx-industries {
  padding: var(--space-20) 0;
  text-align: center;
}

.plx-industries .plx-eyebrow {
  margin-left: auto;
  margin-right: auto;
}

.plx-industries-head {
  max-width: 780px;
  margin: 0 auto var(--space-10);
}

.plx-industries-head .plx-lede {
  max-width: none;
  margin: 0 auto;
}

.plx-industries-track {
  overflow: hidden;
  padding-top: 20px;
  margin-top: -20px;
}

.plx-industry-card {
  position: relative;
  aspect-ratio: 1 / 1.12;
  text-align: left;
}

/* Clips/rounds the image only, in its own stacking context — kept separate
   from .plx-industry-caption-clip so the hover overflow below can free the
   image without ever touching the caption's own clipping/rounding.
   Clipping is done with clip-path (not overflow:hidden) because clip-path
   can be transitioned smoothly — overflow can't, so toggling it on :hover
   would make the clip snap back instantly instead of easing out with the
   image's return transform. */
.plx-industry-media {
  position: absolute;
  inset: 0;
  clip-path: inset(0 round var(--radius-md));
  border-radius: var(--radius-md);
  z-index: 0;
  transition: clip-path var(--transition-base), z-index 0s linear var(--transition-base);
}

.plx-industry-card:hover .plx-industry-media {
  clip-path: inset(-20px 0 0 0 round var(--radius-md));
  z-index: 5;
  transition: clip-path var(--transition-base), z-index 0s;
}

.plx-industry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform var(--transition-base);
}

.plx-industry-card:hover .plx-industry-media img {
  transform: translateY(-20px);
}

.plx-industry-caption-clip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 10;
}

.plx-industry-caption {
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: var(--color-dark);
  clip-path: polygon(0% 28%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);
  color: var(--color-text-inverse);
}

.plx-industry-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
}

.plx-industry-desc {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.75);
}

.plx-industries-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.plx-industries-dots .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #C0BAB6;
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.plx-industries-dots .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

/* ============================================================
   12. DEMO FORM
   ============================================================ */
.plx-demo {
  padding: var(--space-20) 0;
  background: var(--color-bg-surface);
}

.plx-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}

.plx-demo-copy {
  display: flex;
  flex-direction: column;
}

.plx-demo-copy > .plx-eyebrow {
  align-self: flex-start;
}

.plx-demo-copy .plx-heading-xl {
  margin-bottom: var(--space-4);
}

.plx-demo-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-8);
}

.plx-demo-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.plx-demo-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.plx-demo-check svg {
  width: 14px;
  height: 14px;
}

.plx-testimonial {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid rgba(254, 102, 1, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-page);
  margin-top: auto;
}

.plx-testimonial img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.plx-testimonial-name {
  font-weight: var(--weight-bold);
}

.plx-testimonial-role {
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.plx-testimonial-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.plx-demo-form {
  background: var(--color-bg-alt);
  border: 1px solid rgba(254, 102, 1, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 28px 45px rgba(13, 18, 23, 0.08);
}

.plx-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

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

.plx-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.plx-input,
.plx-select,
.plx-textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.plx-textarea {
  resize: vertical;
  min-height: 96px;
}

.plx-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234B5565' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 12px 8px;
}

.plx-input:focus,
.plx-select:focus,
.plx-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.plx-form-actions {
  margin-top: var(--space-2);
  text-align: center;
}

.plx-form-actions .plx-btn {
  width: 100%;
}

.plx-form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  text-align: center;
}

/* ============================================================
   13. FAQ
   ============================================================ */
.plx-faq {
  position: relative;
  overflow: hidden;
  padding: var(--space-20) 0;
  background: #FDF9FA;
}

.plx-faq-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  transform: rotate(180deg);
}

.plx-faq > .plx-container {
  position: relative;
  z-index: 1;
}

.plx-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

.plx-faq-list {
  border-top: 1px solid var(--color-border);
}

.plx-faq-item {
  border-bottom: 1px solid var(--color-border);
}

.plx-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-5) 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
}

.plx-faq-question svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}

.plx-faq-item[data-plx-expanded="true"] .plx-faq-question svg {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.plx-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.plx-faq-item[data-plx-expanded="true"] .plx-faq-answer {
  grid-template-rows: 1fr;
}

.plx-faq-answer-inner {
  overflow: hidden;
}

.plx-faq-answer p {
  padding: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  max-width: 640px;
}

/* ============================================================
   14. CTA
   ============================================================ */
.plx-cta {
  position: relative;
  overflow: hidden;
  background-image: url('/images/home-v2/cta-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.plx-cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}

.plx-cta-copy {
  padding: var(--space-16) 0;
}

.plx-cta-heading {
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-4);
}

.plx-cta-desc {
  color: var(--color-text-inverse-secondary);
  max-width: 480px;
  margin-bottom: var(--space-6);
}

.plx-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.plx-cta .plx-eyebrow--dark {
  background: rgba(254, 102, 1, 0.08);
  border-color: rgba(254, 102, 1, 0.2);
}

.plx-cta-heading .plx-accent {
  color: var(--color-primary);
}

/* ============================================================
   15. FOOTER
   ============================================================ */
.plx-site-footer {
  background: var(--color-bg-black);
  color: var(--color-text-inverse);
  padding: var(--space-20) 0;
}

.plx-footer-top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
}

.plx-footer-logo {
  width: 216px;
  height: auto;
}

.plx-footer-tagline {
  color: var(--color-text-inverse-secondary);
  font-size: var(--text-sm);
  max-width: 388px;
  margin: var(--space-4) 0 var(--space-5);
}

.plx-footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.plx-footer-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  transition: border-color var(--transition-fast);
}

.plx-footer-social-btn:hover {
  border-color: var(--color-primary);
}

.plx-footer-social-btn img {
  width: 16px;
  height: 16px;
}

.plx-footer-store-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-inverse);
  transition: border-color var(--transition-fast);
}

.plx-footer-store-btn:hover {
  border-color: var(--color-primary);
}

.plx-footer-store-btn img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.plx-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.plx-footer-col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.plx-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plx-footer-col a {
  color: var(--color-text-inverse-secondary);
  font-size: var(--text-sm);
}

.plx-footer-col a:hover {
  color: var(--color-text-inverse);
}

.plx-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
}

.plx-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.plx-footer-legal a {
  color: rgba(255, 255, 255, 0.5);
}

.plx-footer-legal a:hover {
  color: var(--color-text-inverse);
}

/* ============================================================
   16. RESPONSIVE — mobile-first, min-width scale-up
   ============================================================ */
@media (max-width: 575.98px) {
  .plx-roles-tabs {
    width: 100%;
    flex: 1 1 auto;
}
.plx-roles-tab {
      width: 100%;

}

.plx-frontline-media {
    min-height: 220px;
}
.plx-action-media {
    min-height: 0px;
}
.plx-action-copy {
    position: relative;

}
.plx-action-copy::before {
    content: "";
  position: absolute;
  inset: 0;
background: rgb(255 255 255 / 62%);
}
.plx-action-copy .plx-container {
  position: relative;
}
.plx-hero-inner::before {
    content: "";
  position: absolute;
  inset: 0;
background: rgb(0 0 0 / 62%);
}
.plx-hero-content {
  position: relative;
}
.plx-modules-tabs {
    width: 100%;
    overflow: auto;
        flex-wrap: nowrap;

}

.plx-modules-tab {
    white-space: nowrap;
}
}
/* sm — large phones (>=576px) */
@media (min-width: 576px) {
  .plx-trusted-stats {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Was a hardcoded inline style on every .plx-form-row regardless of
     viewport, forcing 2 columns even on narrow phones and clipping input
     text (e.g. "Jane Coop|"). Belongs here instead, alongside the rest of
     the sm-and-up 2-column upgrades. */
  .plx-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* md — tablets (>=768px) */
@media (min-width: 768px) {
  .plx-trusted-heading br {
    display: inline;
  }

  .plx-hero-content {
    max-width: 520px;
  }

  .plx-role-panel {
    grid-template-columns: 1fr;
  }

  .plx-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .plx-action-media {
    min-height: 730px;
  }

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

  .plx-outcome-row-2--wide-first {
    grid-template-columns: 3fr 2fr;
  }

  .plx-outcome-row-2--wide-last {
    grid-template-columns: 2fr 3fr;
  }

  .plx-footer-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .plx-footer-top {
    flex-direction: row;
    column-gap: 146px;
    row-gap: var(--space-10);
  }
}

/* lg — small laptops (>=992px); nav/toggle breakpoint now lives in
   intel-building/layout/header/header-responsive.css */
@media (min-width: 992px) {
  /* fig "Wireframe - 7" > "Component 3" > "Frame 15": pos y:237. Precise
     desktop figures (see the comment on .plx-hero-inner above) so the hero's
     total rendered height lands on the design's actual 750px, instead of a
     guessed min-height that left the background photo cropped/over-tall. */
  .plx-hero-inner {
    min-height: 678px;
    padding-top: 237px;
    padding-bottom: 120px;
  }

  .plx-role-panel {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .plx-frontline-media {
    min-height: 100%;
  }

  .plx-modules-body {
    grid-template-columns: 1fr 1fr;
  }

  .plx-outcomes-grid {
    gap: var(--space-6);
  }

  .plx-outcome-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .plx-trusted-stats {
    grid-template-columns: repeat(5, 1fr);
  }

.plx-trusted-stats > div:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--space-6) / -2);
    width: 3px;
    background: rgb(235 95 3 / 17%);
}

  .plx-demo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .plx-faq-grid {
    grid-template-columns: 0.8fr 1fr;
  }

  .plx-cta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .plx-cta-copy {
    padding: var(--space-24) 0;
  }
}

/* xl — laptops / desktops (>=1200px) */
@media (min-width: 1200px) {
  .plx-hero-title {
    font-size: var(--text-hero);
  }
  .plx-industries-head .plx-lede {
  white-space: nowrap;
}
}

/* Mobile-only tweaks */
@media (max-width: 767.98px) {
  .plx-hero-inner {
    padding-bottom: var(--space-10);
  }

}
@media (min-width: 1800px) {
.plx-hero-inner {
    min-height: 858px;
    padding-top: 297px;

}
.plx-trusted-logo img {
  height: 140px;
}
}