/* ==========================================================================
   PAGE: 3CX PHONE SYSTEM  (product page)

   Its own shape, not the vendor's: a light banner with the hardware bleeding
   off one side, alternating capability rows instead of a tab strip, a
   comparison table where they use three cards, and a four-step engagement
   strip. Light throughout — their page is dark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANNER
   -------------------------------------------------------------------------- */
.px-banner {
  position: relative;
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  background: linear-gradient(112deg, #e9f1fa 0%, #f7fafd 48%, #e8f3fb 100%);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  isolation: isolate;
}

.px-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    58% 100% at 78% 6%,
    rgba(0, 129, 189, 0.14) 0%,
    rgba(0, 129, 189, 0) 66%
  );
}

.px-banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
}

/* The mark leads, and it is deliberately large. Replace with the official
   asset when it arrives: assets/img/3cx-logo.png. */
.px-logo {
  display: inline-block;
  margin-bottom: 1.15rem;
}

.px-logo svg {
  display: block;
  width: clamp(150px, 12vw, 200px);
  height: auto;
}

.px-logo__text {
  font-family: var(--font-heading), sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1.5px;
  fill: #0081bd;
}

.px-logo__text tspan {
  fill: var(--c-navy-900);
}

.px-banner__title {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: var(--c-navy-900);
  margin-bottom: 0.85rem;
}

.px-banner__title span {
  display: block;
  color: var(--c-primary);
}

/* Body size, matching .page-hero__lead and .overview__text. */
.px-banner__lead {
  max-width: 34rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin-bottom: 1.5rem;
}

.px-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* The vendor pairs a solid black button with a light one, arrow inline and
   no divider — worth keeping on this page, since it is the product's own
   call to action rather than ours. */
.px-banner__actions .btn-sysin {
  height: 48px;
  border-radius: var(--r-md);
  font-size: var(--fs-body);
}

.px-banner__actions .btn-sysin__label {
  padding: 0 0.55rem 0 1.15rem;
}

.px-banner__actions .btn-sysin__arrow {
  padding: 0 1.15rem 0 0;
  border-left: 0;
}

.px-banner__actions .btn-sysin:not(.btn-sysin--outline) {
  --btn-bg: #0b0f14;
  --btn-color: var(--c-white);
  --btn-border: #0b0f14;
}

.px-banner__actions .btn-sysin:not(.btn-sysin--outline):hover {
  --btn-bg: #1b2430;
  box-shadow: 0 10px 24px rgba(11, 15, 20, 0.28);
}

.px-banner__actions .btn-sysin--outline {
  --btn-bg: #f2f4f6;
  --btn-color: var(--c-navy-900);
  --btn-border: #e2e6ea;
}

.px-banner__actions .btn-sysin--outline:hover {
  --btn-bg: var(--c-white);
  --btn-border: var(--c-navy-900);
  color: var(--c-navy-900);
}

/* Proof sits on the banner rather than in a panel of its own. */
.px-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.75rem 0 0;
}

.px-proof > div {
  padding-right: clamp(1rem, 0.6rem + 1.2vw, 1.9rem);
  margin-right: clamp(1rem, 0.6rem + 1.2vw, 1.9rem);
  border-right: 1px solid var(--c-border-mid);
}

.px-proof > div:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.px-proof dt {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.45rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--c-primary);
}

.px-proof dd {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-light);
  color: var(--c-ink-600);
  margin: 0.2rem 0 0;
  max-width: 11rem;
}

/* Runs past the container edge — the hardware is the one thing on this page
   allowed to break the grid. */
.px-banner__art {
  margin-right: clamp(-4rem, -2vw, 0rem);
}

/* The official render, when it is present. */
.px-banner__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* While the photo is in the document the drawing stays out of the way; if
   the file is missing the <img> removes itself and this becomes visible. */
.px-banner__photo + svg {
  display: none;
}

.px-banner__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.px-app__brand {
  font-family: var(--font-heading), sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.5px;
  fill: #ffffff;
}

.px-app__rail {
  font-family: var(--font-ui), sans-serif;
  font-size: 8px;
  fill: #9aa4b0;
}

.px-app__h {
  font-family: var(--font-heading), sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #eef2f6;
}

.px-app__ai {
  font-family: var(--font-ui), sans-serif;
  font-size: 7px;
  font-weight: 700;
  fill: #ffffff;
}

.px-phone__num {
  font-family: var(--font-ui), sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: #eef2f6;
}

.px-phone__meta {
  font-family: var(--font-ui), sans-serif;
  font-size: 7px;
  fill: #2fbf71;
}

.px-desk__brand {
  font-family: var(--font-heading), sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  fill: #ffffff;
}

/* Labels inside the capability figures — real names and numbers rather
   than grey bars, so the diagrams read as the system does. */
.px-fig__hub {
  font-family: var(--font-heading), sans-serif;
  font-size: 14px;
  font-weight: 700;
  fill: #ffffff;
}

.px-fig__hubsub {
  font-family: var(--font-ui), sans-serif;
  font-size: 8px;
  fill: rgba(255, 255, 255, 0.65);
}

.px-fig__label {
  font-family: var(--font-ui), sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  fill: #22405f;
}

.px-fig__meta {
  font-family: var(--font-ui), sans-serif;
  font-size: 8px;
  fill: #8aa0b8;
}

.px-fig__ini {
  font-family: var(--font-ui), sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  fill: #ffffff;
}

.px-fig__pill {
  font-family: var(--font-ui), sans-serif;
  font-size: 7.5px;
  font-weight: 600;
}

.px-fig__pill--ok { fill: #12805a; }
.px-fig__pill--warn { fill: #a86408; }

.px-mock__chrome {
  font-family: var(--font-ui), sans-serif;
  font-size: 11px;
  fill: rgba(255, 255, 255, 0.75);
}

.px-mock__label {
  font-family: var(--font-ui), sans-serif;
  font-size: 13px;
  font-weight: 700;
  fill: #ffffff;
}

.px-mock__stat {
  font-family: var(--font-heading), sans-serif;
  font-size: 20px;
  font-weight: 700;
  fill: #ffffff;
}

.px-mock__statlabel {
  font-family: var(--font-ui), sans-serif;
  font-size: 9px;
  fill: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   2. CAPABILITY ROWS
   -------------------------------------------------------------------------- */
.px-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  align-items: center;
}

.px-row + .px-row {
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  padding-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-top: 1px solid var(--c-border);
}

/* Every other row turns round, so the eye zig-zags down the page instead of
   running down one column. */
.px-row--flip .px-row__figure {
  order: -1;
}

.px-row__copy {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 0.85rem;
  align-content: start;
}

/* Badge beside the heading, not stacked above it. */
.px-row__num {
  grid-column: 1;
  grid-row: 1;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 14px rgba(0, 129, 189, 0.26);
}

.px-row__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.6rem;
}

.px-row__text,
.px-row__list {
  grid-column: 1 / -1;
}

.px-row__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin-bottom: 1rem;
}

.px-row__list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.px-row__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-ink-800);
}

.px-row__list svg {
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  color: var(--c-primary);
}

.px-row__figure svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   3. DEPLOYMENT TABLE
   -------------------------------------------------------------------------- */
.px-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: 0 2px 18px rgba(11, 28, 45, 0.07);
}

.px-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.px-table th,
.px-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border-soft);
}

.px-table thead th {
  background: var(--c-navy-900);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 0;
}

.px-table tbody th {
  width: 22%;
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  background: #f7f9fc;
}

.px-table tbody td {
  color: var(--c-ink-850);
  font-weight: var(--fw-light);
}

.px-table tbody tr:last-child th,
.px-table tbody tr:last-child td {
  border-bottom: 0;
}

.px-tick {
  width: 20px;
  height: 20px;
  color: #16a394;
}

/* --------------------------------------------------------------------------
   4. ENGAGEMENT STEPS
   -------------------------------------------------------------------------- */
.px-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.px-step {
  position: relative;
  padding: 1.2rem 1.2rem 1.35rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-md);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.px-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
}

.px-step__num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 0.7rem;
  border-radius: var(--r-pill);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
}

.px-step__title {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.35rem;
}

.px-step__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin: 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .px-banner__grid,
  .px-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .px-banner__art {
    margin-right: 0;
  }

  /* Artwork above the copy on a stacked row would push the heading below the
     fold on every one of them. */
  .px-row--flip .px-row__figure {
    order: 0;
  }
}

/* ==========================================================================
   5. SERVICE CARDS

   Nine services, each with its own icon. The generic tick that repeated on
   every card told the reader nothing — the icon does, and it lets the grid
   be scanned rather than read top to bottom.
   ========================================================================== */
.px-svc {
  position: relative;
  height: 100%;
  padding: 1.35rem 1.3rem 1.4rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base);
}

.px-svc:hover {
  transform: translateY(-4px);
  border-color: var(--c-tint-blue);
  box-shadow: var(--sh-card-hover);
}

/* Icon and index share a row, so the title starts on a clean baseline. */
.px-svc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.px-svc__ico {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
}

.px-svc__ico svg {
  width: 21px;
  height: 21px;
}

/* The index is reference, not sequence — muted and monospaced so it reads
   as a label rather than a step number. */
.px-svc__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-slate-400);
  letter-spacing: 0.04em;
}

.px-svc__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-navy-900);
  margin-bottom: 0.45rem;
}

.px-svc__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin: 0;
}

/* ==========================================================================
   6. FEATURE INDEX

   Fourteen features as fourteen cards was a wall. A buyer comparing phone
   systems reads a spec sheet, so this is one: two columns of hairline rows,
   dense enough to take in at a glance.
   ========================================================================== */
.px-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--c-border-mid);
}

.px-index__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: baseline;
  padding: 0.95rem 0.15rem 1rem;
  border-bottom: 1px solid var(--c-border-mid);
}

.px-index__item svg {
  width: 17px;
  height: 17px;
  color: var(--c-primary);
  transform: translateY(0.18em);
}

.px-index__name {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin: 0 0 0.15rem;
}

.px-index__desc {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-ink-600);
  margin: 0;
}

/* ==========================================================================
   7. BENEFIT LEDGER

   Eight benefits, set as a ruled ledger rather than pills. Pills gave every
   phrase the same weight as a one-word industry tag; these are claims and
   they earn a line each.
   ========================================================================== */
.px-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.px-ledger li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-ink-800);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.px-ledger li:hover {
  transform: translateX(3px);
  box-shadow: var(--sh-card);
}

.px-ledger svg {
  width: 18px;
  height: 18px;
  color: var(--c-primary);
}

/* ==========================================================================
   8. CALL-FLOW DIAGRAM  (signature element)

   The one thing this page is remembered by: an inbound call traced through
   trunk, IVR, queue and device. It is the product's actual mechanism, drawn
   once, rather than another row of cards.

   The diagram is drawn wide (a call moves left to right), so below the lg
   breakpoint it is swapped for a stacked list rather than being squashed —
   a 900-unit viewBox on a 360px screen renders the labels illegibly small.
   ========================================================================== */
.px-flow {
  padding: clamp(1.15rem, 0.8rem + 1.3vw, 1.75rem);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-tile);
}

.px-flow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Stage names in the box: the thing itself. */
.px-flow__cap {
  font-family: var(--font-heading), sans-serif;
  font-size: 15px;
  font-weight: 700;
  fill: var(--c-navy-900);
}

/* Supporting detail — real numbers and names, not grey filler bars. */
.px-flow__sub {
  font-family: var(--font-ui), sans-serif;
  font-size: 11.5px;
  fill: #5a6b83;
}

/* The trunk card is the one dark surface in the diagram, so its text needs the
   fills inverted. It has to be done with a class: a `fill` attribute on the
   <text> itself is a presentation attribute, which loses to any CSS rule — so
   the navy `fill` above was painting "Inbound call" navy-on-navy. */
.px-flow__cap--light {
  fill: var(--c-white);
}

.px-flow__sub--light {
  fill: rgba(255, 255, 255, 0.72);
}

/* The rail label above each box. Monospaced and tracked out so the row of
   them reads as a legend across the top of the diagram. */
.px-flow__stage {
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  font-weight: 700;
  fill: var(--c-primary);
  letter-spacing: 0.1em;
}

.px-flow__note {
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  font-style: italic;
  fill: var(--c-ink-400);
}

/* The call itself: a comet rather than a loose dot, so it reads as movement
   along the rail instead of a bug sitting on the line.

   Animated with a plain transform rather than `offset-path` — the call runs
   along a straight horizontal rail here, so a translate does the same job
   and works everywhere (offset-path is still patchy in Safari, where the
   dot would otherwise sit frozen at the origin). */
.px-flow__pulse {
  animation: px-travel 5s var(--ease) infinite;
}

@keyframes px-travel {
  0%   { opacity: 0; transform: translateX(0); }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(690px); }
}

@media (prefers-reduced-motion: reduce) {
  .px-flow__pulse {
    animation: none;
    transform: translateX(360px);
  }
}

/* --------------------------------------------------------------------------
   CALL-FLOW — STACKED FALLBACK (below lg)
   Same five stages, same order, read top to bottom with a rail down the
   left. The diagram itself is hidden; this is not a summary of it.
   -------------------------------------------------------------------------- */
.px-flow__stack {
  display: none;
}

.px-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.px-flow__steps li {
  position: relative;
  padding: 0 0 1.35rem 2.5rem;
}

/* The rail, drawn as a border on the item rather than a pseudo-element on
   the list, so it stops cleanly at the last stage. */
.px-flow__steps li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: var(--c-border-mid);
}

.px-flow__steps li:last-child {
  padding-bottom: 0;
}

.px-flow__steps li:last-child::before {
  display: none;
}

.px-flow__steps li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42rem;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 3px solid var(--c-primary);
}

.px-flow__stage-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--c-primary);
  margin-bottom: 0.15rem;
}

.px-flow__step-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin: 0 0 0.2rem;
}

.px-flow__step-text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-ink-600);
  margin: 0;
}

.px-flow__caption {
  margin: 1.35rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--c-border-mid);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-600);
}

@media (max-width: 991.98px) {
  .px-flow__diagram {
    display: none;
  }

  .px-flow__stack {
    display: block;
  }

  .px-flow__caption {
    margin-top: 1.15rem;
  }
}

@media (max-width: 575.98px) {
  .px-index {
    grid-template-columns: minmax(0, 1fr);
  }
}