/* ==========================================================================
   Proximity Detection (PAS): 2026 page. Prefix pd-
   Rebuilt 23 Sep 2026 from the Claude Design canvas "PAS Page Redesign"
   (https://claude.ai/artifact/HCkzbNBdcUmBAEAhAUHkKs), Hero A.

   The page answers four questions in order: what it is (the hero), what it
   solves, how it works (sense, understand, act; then the response ladder and
   the operator's screen), and why it matters, closing on the case study and
   the CTA.

   Depends on home-2026.css for the tokens, the reset, .hp-shell,
   .hp-gradient, .hp-chip, .hp-section__head, the .hp-how block (reused as is
   for sense / understand / act), .hp-btn-*, the .hp-cta block and the footer.
   This file only adds what the page needs on top of those. The previous
   stylesheet carried rules for sections that no longer exist; it was
   replaced rather than trimmed so none of them can collide with a new class.
   ========================================================================== */

:root {
  --pd-tint: #f5f8fa;
  --pd-rule: #dde6f1;
  /* State colours report a thing the machine did. They never decorate.
     The lit pair sits on navy and on photographs. */
  --pd-warn: #b5761c;
  --pd-crit: #b32135;
  --pd-warn-lit: #f2a93b;
  --pd-crit-lit: #ff6b7a;
  --pd-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------- type */
.pd-d1 { margin: 0; font-size: 76px; font-weight: 600; line-height: 1.04; letter-spacing: -2.9px; color: #fff; }
/* The brand gradient on a dark ground: the site ramp opens on navy and would
   vanish here, so the stops are shifted up to ice, cyan, blue and violet.
   .pd-grad-dark carries the same ramp inline, on the other dark cards. */
.pd-d1 em, .pd-grad-dark { font-style: normal;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 38%, var(--hp-blue-bright) 72%, var(--hp-violet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Block and fit-content, so the phrase keeps its own line and the stops span
   the words rather than the column. */
.pd-d1 em { display: block; width: fit-content; padding-bottom: 2px; }
/* "Sees the person." cycles through what PAS finds (solutions-2026.js). The
   line never wraps, so a longer word cannot push the headline down a line. */
.pd-d1__line { white-space: nowrap; }
.pd-cycle { position: relative; display: inline-block; }
.pd-cycle > span { display: inline-block; transition: opacity 0.5s var(--pd-ease), transform 0.5s var(--pd-ease); }
.pd-cycle > .is-in { opacity: 0; transform: translateY(0.3em); }
.pd-cycle > .is-out { position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(-0.3em); }
.pd-d2 { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.12; letter-spacing: -1.4px; color: var(--hp-ink); }
/* a second line in the brand gradient, on its own line */
.pd-d2 em { display: block; width: fit-content; font-style: normal; font-weight: inherit; }
.pd-lead { margin: 22px 0 0; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--hp-body); text-wrap: pretty; }

/* ----------------------------------------------------------- shells */
.pd-sec { position: relative; padding: 96px 0; }
.pd-sec--tint { background: var(--pd-tint); }
/* The nav is sticky, so an anchor jump has to clear it. */
.pd-sec[id], .pd-anchor { scroll-margin-top: calc(var(--nv-offset, 80px) + 16px); }
.pd-anchor { display: block; height: 0; }
.pd-sec .hp-chip { margin-bottom: 0; }
.pd-sec .hp-chip + .pd-d2 { margin-top: 20px; }

/* ================================================================ HERO */
/* The nav is transparent while it is over the hero, so the hero runs up
   underneath it or the bar goes white on white. */
.pd-hero { position: relative; z-index: 0; overflow: hidden; background: var(--hp-deep);
  margin-top: calc(-1 * var(--nv-offset, 80px)); padding-bottom: 80px; }
.pd-hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(88% 66% at 20% 4%, rgba(7, 110, 232, 0.26) 0%, transparent 62%),
              radial-gradient(66% 56% at 90% 0%, rgba(26, 206, 225, 0.15) 0%, transparent 58%); }
.pd-hero__sentinel { position: absolute; left: 0; top: 0; width: 100%; height: 2px; pointer-events: none; }
.pd-hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* The homepage's ghost: Bigmate's own aerial of the approach, duotoned into
   brand blue so it reads as one surface with the navy, and masked so it only
   sits behind the plan view. Still, not the clip: a second moving picture
   beside the plan view competes with it. */
.pd-hero__ghost { position: absolute; right: -60px; top: -40px; width: 1180px; height: 760px; opacity: 0.17;
  background: url(../images/pas/hero-approach.webp) center / cover no-repeat;
  filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.4) brightness(1.05);
  -webkit-mask-image: radial-gradient(80% 76% at 62% 40%, #000 24%, transparent 78%);
  mask-image: radial-gradient(80% 76% at 62% 40%, #000 24%, transparent 78%); }
.pd-hero__grid { position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(143, 230, 245, 0.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(143, 230, 245, 0.07) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 58%); }

.pd-hero__in { position: relative; z-index: 1; padding-top: calc(var(--nv-offset, 80px) + 60px); }
.pd-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 0 44px; align-items: center; }
/* The eyebrow sits inside the h1 as its first line, so the heading names the
   category ("what is this page") and not only the slogan. Block, with the
   body's line height and the gap the h1's top margin used to give. */
.pd-hero__eyebrow { display: block; margin: 0 0 18px; color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700;
  line-height: 1.6; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pd-hero__lead { margin: 26px 0 0; max-width: 45ch; font-size: 18px; line-height: 1.62; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.pd-hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --- the plan view -------------------------------------------------------
   One clock in solutions-2026.js drives the person, their distance tag, the
   band that beats, how fast the machine turns and the readout below, from a
   single distance profile, so nothing can drift. Standard settings, drawn as
   an illustration, not a capture. */
.pd-display { position: relative; }
.pd-radar { position: relative; margin: 0; }
.pd-radar::before { content: ""; position: absolute; inset: -12% -6%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 16, 47, 0.56) 0%, rgba(2, 16, 47, 0.34) 54%, rgba(2, 16, 47, 0) 76%); }
.pd-radar svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }

.pd-z { stroke-width: 1.25; }
.pd-z--track { fill: rgba(143, 230, 245, 0.05); stroke: rgba(143, 230, 245, 0.55); }
.pd-z--slow  { fill: rgba(242, 169, 59, 0.10); stroke: rgba(242, 169, 59, 0.7); }
.pd-z--stop  { fill: rgba(255, 107, 122, 0.14); stroke: rgba(255, 107, 122, 0.8); }
/* the band the person is standing in beats, as the cab display tints it */
@keyframes pd-beat-slow { 0%, 100% { fill: rgba(242, 169, 59, 0.10); } 42% { fill: rgba(242, 169, 59, 0.30); } }
@keyframes pd-beat-stop { 0%, 100% { fill: rgba(255, 107, 122, 0.14); } 38% { fill: rgba(255, 107, 122, 0.40); } }
.pd-z--slow.is-live { animation: pd-beat-slow 1.5s ease-in-out infinite; stroke: var(--pd-warn-lit); }
.pd-z--stop.is-live { animation: pd-beat-stop 1s ease-in-out infinite; stroke: var(--pd-crit-lit); }

/* A plan view of a real dragline, graded back to sit inside the display. No
   CSS animation on purpose: the script turns it at the speed reference, so
   the boom slowing and stopping is the number the readout shows. */
.pd-mach { filter: saturate(0.5) contrast(1.14) brightness(1.04) drop-shadow(0 10px 26px rgba(2, 16, 47, 0.75)); }

/* the track the system held on them, each dot in the zone it was seen in */
.pd-trail__d { fill: var(--hp-ice); stroke: rgba(2, 16, 47, 0.55); stroke-width: 0.9; }
.pd-trail__d.is-slow { fill: var(--pd-warn-lit); }
.pd-trail__d.is-stop { fill: var(--pd-crit-lit); }

.pd-obj__dot { fill: var(--hp-ice); }
.pd-obj.is-slow .pd-obj__dot { fill: var(--pd-warn-lit); }
.pd-obj.is-stop .pd-obj__dot { fill: var(--pd-crit-lit); }
.pd-obj__halo { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.pd-obj__tag { fill: rgba(4, 19, 73, 0.88); stroke: rgba(143, 230, 245, 0.4); stroke-width: 1; }
.pd-obj.is-slow .pd-obj__tag { stroke: rgba(242, 169, 59, 0.85); }
.pd-obj.is-stop .pd-obj__tag { stroke: rgba(255, 107, 122, 0.95); }
.pd-obj__d { fill: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: inherit; text-anchor: middle; }
.pd-obj__l { fill: rgba(226, 236, 247, 0.72); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; font-family: inherit; text-anchor: middle; }

/* Each ring is named where it is drawn, rather than on a gauge beside it.
   Positions are percentages of the plan view, so they stay on their ring at
   any size; a dot marks the exact point. */
.pd-ring { position: absolute; display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px;
  border-radius: var(--hp-radius-pill); background: rgba(2, 16, 47, 0.8); white-space: nowrap;
  font-size: 12.5px; font-weight: 600; transform: translate(11px, -50%); }
.pd-ring--l { transform: translate(calc(-100% - 11px), -50%); }
.pd-ring b { color: #fff; font-weight: 700; }
.pd-ring::before { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: currentColor; }
.pd-ring:not(.pd-ring--l)::before { left: -14px; }
.pd-ring--l::before { right: -14px; }
.pd-ring--track { color: var(--hp-ice); }
.pd-ring--slow { color: var(--pd-warn-lit); }
.pd-ring--stop { color: var(--pd-crit-lit); }

/* The readout: what the cab shows on the left, what the machine did on the
   right, in the state colour. The rule above them carries the state too.
   State lives in two custom properties so the line and the words cannot
   disagree. No transition: a zone change is a step. */
.pd-status { --pd-state: var(--hp-ice); --pd-state-line: rgba(143, 230, 245, 0.22);
  display: flex; flex-direction: column; gap: 5px;
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--pd-state-line); }
/* Stacked, not side by side: the alert carries a live distance, and a line
   that fits at 50.0 m and wraps at 12.4 m makes the whole block jump. */
.pd-status.is-slow { --pd-state: var(--pd-warn-lit); --pd-state-line: rgba(242, 169, 59, 0.55); }
.pd-status.is-stop { --pd-state: var(--pd-crit-lit); --pd-state-line: rgba(255, 107, 122, 0.62); }
.pd-status__alert { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
.pd-status__act { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.2px; color: var(--pd-state);
  font-variant-numeric: tabular-nums; }
.pd-radar__cap { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }

/* One contrast, carried by two words: the stop the system makes against the
   stop somebody else has to make. Weight and colour together, because colour
   alone on two words in a paragraph is easy to read straight past. */
.pd-hi { font-weight: 600; }
.pd-hi--on { color: var(--hp-blue-bright); }
.pd-hi--off { color: #f2495f; }

/* --- credentials under the buttons --------------------------------------- */
/* The award is shown by its own mark; the logo wall below the hero is the
   homepage's .hp-hero__logos, unchanged. */
.pd-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 40px; }
.pd-hero__award { display: inline-flex; align-items: center; gap: 16px; color: #fff; }
.pd-hero__award:hover { color: #fff; }
.pd-hero__award img { display: block; width: 150px; height: auto; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transition: transform 0.3s var(--pd-ease); }
.pd-hero__award:hover img { transform: translateY(-2px); }
.pd-hero__proof > * + * { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.pd-hero__fact { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.pd-hero__fact b { color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pd-hero__fact span { color: rgba(255, 255, 255, 0.86); font-size: 14.5px; line-height: 1.4; }

/* ==================================================== WHAT IT SOLVES */
.pd-solves { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 462fr); gap: 56px; margin-top: 48px; align-items: start; }
/* The plate is generated (physical things only); the view boundary is the
   line drawn on the canvas review, in the plate's own 2688 x 1520
   coordinates, so the overlay and the photograph crop together. */
.pd-blind { position: relative; margin: 0; aspect-ratio: 760 / 428; border-radius: var(--hp-radius); overflow: hidden;
  background: var(--hp-deep); box-shadow: var(--hp-sh-md); }
.pd-blind img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pd-blind svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pd-blind svg * { vector-effect: non-scaling-stroke; }
.pd-tagp { position: absolute; padding: 4px 10px; border-radius: var(--hp-radius-pill); background: rgba(2, 16, 47, 0.8);
  color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pd-tagp--big { padding: 7px 14px; background: rgba(2, 16, 47, 0.86); font-size: 14px; font-weight: 700; }
.pd-tagp--warn { color: var(--pd-warn-lit); }
.pd-tagp--ice { color: var(--hp-ice); }
.pd-illus { position: absolute; right: 12px; bottom: 12px; padding: 3px 8px; border-radius: var(--hp-radius-pill);
  background: rgba(2, 16, 47, 0.62); color: rgba(255, 255, 255, 0.9); font-size: 11px; font-weight: 600; }

.pd-fails { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 26px; }
.pd-fails li { padding-top: 22px; border-top: 1px solid var(--pd-rule); }
.pd-fails h3 { margin: 0; color: var(--hp-ink); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.pd-fails p { margin: 9px 0 0; color: var(--hp-body); font-size: 15.5px; line-height: 1.6; }

/* ====================================================== HOW IT WORKS */
/* The homepage's sense / understand / act block, unchanged, with PAS media.
   Its images default to the top of the frame; these overlays are drawn
   centred, so the photographs are too. */
.pd-how .hp-how__media img { object-position: 50% 50%; }
/* two lines, as drawn; the homepage's 16ch breaks this one into three */
.pd-how .hp-section__head--row .hp-section__title { max-width: 19ch; }
.pd-how .hp-how__tag--top { top: 10px; bottom: auto; }
/* The cable strike response leads the Act list across both columns, a step
   up from the rest, with the gradient on what the stop protects. */
.pd-how .hp-how__responses .pd-cable-resp { grid-column: 1 / -1; color: #fff; font-size: 16px; font-weight: 600; }
.pd-how .hp-how__responses .pd-cable-resp::before { top: 10px; }
.pd-mark { position: absolute; padding: 2px 8px; border-radius: 4px; background: #fff; color: var(--hp-deep);
  font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pd-zone-tag { position: absolute; padding: 3px 9px; border-radius: var(--hp-radius-pill); background: rgba(2, 16, 47, 0.8);
  color: var(--pd-crit-lit); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* worded as the operator's screen words it; no recorded distance, because
   this photograph is not that event */
.pd-alert { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 14px; border-radius: 8px; background: rgba(2, 16, 47, 0.82); border: 1px solid rgba(255, 107, 122, 0.55); }
.pd-alert span { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 13.5px; font-weight: 600; }
.pd-alert span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pd-crit-lit);
  box-shadow: 0 0 0 4px rgba(255, 107, 122, 0.25); }
.pd-alert b { color: var(--pd-crit-lit); font-size: 13.5px; font-weight: 700; }
.pd-zone-fill { fill: var(--pd-crit-lit); fill-opacity: 0.16; stroke: none; }
.pd-zone-edge { fill: none; stroke: var(--pd-crit-lit); stroke-width: 2; stroke-dasharray: 8 6; stroke-linejoin: round; }

/* ===================================================== THE RESPONSE */
/* A working model: the controls on the light ground, the result on navy.
   Standard settings load first; nothing here is fixed. */
.pd-resp { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 0 78px; align-items: start; }
.pd-resp .pd-lead { max-width: 40ch; }
.pd-seg { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: var(--hp-radius-pill); background: var(--hp-line); }
.pd-seg button { height: 40px; padding: 0 20px; border: 0; border-radius: var(--hp-radius-pill); background: transparent;
  color: var(--hp-body); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pd-seg button[aria-pressed="true"] { background: #fff; color: var(--hp-navy); font-weight: 700; box-shadow: 0 2px 8px rgba(4, 19, 73, 0.12); }
.pd-seg button:focus-visible, .pd-tune__reset:focus-visible, .pd-live__play:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; }
.pd-sliders { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; }
.pd-slider { display: block; }
.pd-slider__row { display: flex; align-items: baseline; justify-content: space-between; color: var(--hp-ink); font-size: 15px; font-weight: 700; }
.pd-slider__v { font-size: 17px; font-variant-numeric: tabular-nums; }
.pd-slider__end { display: inline-flex; align-items: center; gap: 12px; }
/* the curve is a property of the slow down, so it sits on that row */
.pd-curve { height: 30px; padding: 0 30px 0 12px; border: 1px solid var(--pd-rule); border-radius: var(--hp-radius-pill);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23041349' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  -webkit-appearance: none; appearance: none; color: var(--hp-navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pd-curve:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; }
.pd-slider__v--warn { color: var(--pd-warn); }
.pd-slider__v--crit { color: var(--pd-crit); }
.pd-tune input[type="range"] { display: block; width: 100%; height: 22px; margin: 10px 0 0; accent-color: var(--hp-blue); cursor: pointer; }
.pd-tune__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.pd-tune__reset { flex: 0 0 auto; height: 40px; padding: 0 18px; border: 1px solid var(--pd-rule); border-radius: var(--hp-radius-pill);
  background: #fff; color: var(--hp-navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pd-tune__foot p { margin: 0; max-width: 30ch; color: var(--hp-muted); font-size: 13px; line-height: 1.45; text-align: right; }

.pd-live { padding: 24px 32px 26px; border-radius: var(--hp-radius); background: var(--hp-deep); color: #fff;
  box-shadow: 0 30px 70px rgba(4, 19, 73, 0.30); }
.pd-live__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 0;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.pd-live__head b { color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pd-live__head span { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.pd-live__chart { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.pd-live__ax { fill: rgba(255, 255, 255, 0.55); font-size: 12px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums; }
.pd-live__ax--warn { fill: var(--pd-warn-lit); }
.pd-live__ax--crit { fill: var(--pd-crit-lit); }
.pd-live__mark { fill: var(--hp-deep); stroke: var(--pd-state, var(--hp-ice)); stroke-width: 3; }
.pd-live__scrub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; margin-top: 6px; }
.pd-live__scrub label { display: block; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.pd-live__scrub b { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; }
.pd-live .pd-live__scrub input[type="range"] { accent-color: var(--hp-ice); }
.pd-live__play { height: 40px; padding: 0 18px; border: 1px solid rgba(143, 230, 245, 0.45); border-radius: var(--hp-radius-pill);
  background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pd-live__play:hover { background: rgba(143, 230, 245, 0.12); }
/* the result, in the state colour, with the rule above it carrying it too */
.pd-live { --pd-state: var(--hp-ice); --pd-state-line: rgba(143, 230, 245, 0.22); }
.pd-live.is-slow { --pd-state: var(--pd-warn-lit); --pd-state-line: rgba(242, 169, 59, 0.55); }
.pd-live.is-stop { --pd-state: var(--pd-crit-lit); --pd-state-line: rgba(255, 107, 122, 0.62); }
.pd-live__state { margin: 12px 0 0; padding-top: 14px; border-top: 1px solid var(--pd-state-line); color: var(--pd-state);
  font-size: 22px; font-weight: 700; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.pd-live__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pd-live__stages li { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 0; }
.pd-live__stages li:first-child { padding-left: 0; }
.pd-live__stages li + li { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.pd-live__d { color: var(--hp-ice); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-live__d--warn { color: var(--pd-warn-lit); }
.pd-live__d--crit { color: var(--pd-crit-lit); }
.pd-live__n { color: #fff; font-size: 16px; font-weight: 700; }
.pd-live__x { color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }

/* --- Sense: the real capture, tinted into the brand ---------------------- */
/* White returns on black: screen drops the black onto the navy ground, and a
   cyan layer multiplied over the top turns the returns cyan. */
.pd-capture img { mix-blend-mode: screen; }
.pd-capture__tint { position: absolute; inset: 0; background: var(--hp-cyan); mix-blend-mode: multiply; pointer-events: none; }
.pd-capture__tint::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 80% at 50% 55%, rgba(2, 16, 47, 0) 40%, rgba(2, 16, 47, 0.55) 100%); }
.pd-capture__tag { background: rgba(2, 16, 47, 0.72); color: var(--hp-ice); }
.pd-mark--crit { background: var(--pd-crit-lit); color: #fff; }

/* ===================================================== THE OPERATOR */
.pd-hud { position: relative; margin: 48px 0 0; border-radius: var(--hp-radius); overflow: hidden; background: #2b2b2b;
  box-shadow: var(--hp-sh-lg); }
.pd-hud img { display: block; width: 100%; height: auto; }
.pd-hud__mk { position: absolute; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  margin: -14px 0 0 -14px; border-radius: 50%; background: var(--hp-blue); color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 0 0 4px rgba(7, 110, 232, 0.28); }
.pd-hudnotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin: 40px 0 0; padding: 0; list-style: none; }
.pd-hudnotes li { padding-top: 20px; border-top: 1px solid var(--pd-rule); }
.pd-hudnotes h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--hp-ink); font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.pd-hudnotes h3 span { color: var(--hp-blue); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }
.pd-hudnotes p { margin: 8px 0 0; color: var(--hp-body); font-size: 14.5px; line-height: 1.55; }

/* ==================================================== WHY IT MATTERS */
.pd-why { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; margin-top: 52px; align-items: start; }
.pd-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; margin: 0; padding: 0; list-style: none; }
.pd-outcomes li { padding-top: 22px; border-top: 1px solid var(--pd-rule); }
.pd-outcomes h3 { margin: 0; color: var(--hp-ink); font-size: 21px; font-weight: 700; letter-spacing: -0.45px; }
.pd-outcomes p { margin: 10px 0 0; color: var(--hp-body); font-size: 15.5px; line-height: 1.6; }
.pd-proof { padding: 30px 32px 18px; border-radius: var(--hp-radius); background: #fff; box-shadow: var(--hp-sh-md); }
.pd-proof__k { margin: 0; color: var(--hp-muted); font-size: var(--hp-label); font-weight: 600; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
/* Gradient-clipped text: kept on one line, or the % wraps and disappears. */
.pd-proof__stat { margin: 16px 0 0; font-size: 76px; font-weight: 700; line-height: 0.93; letter-spacing: -3.8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-proof__stat small { font-size: 38px; letter-spacing: -1.6px; }
.pd-proof__label { margin: 14px 0 0; color: var(--hp-ink); font-size: 16px; font-weight: 600; }
.pd-proof__sub { margin: 6px 0 20px; color: var(--hp-muted); font-size: 14px; }
.pd-proof__sub b { color: var(--hp-ink); font-variant-numeric: tabular-nums; }
.pd-proof dl { margin: 0; }
.pd-proof dl div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--hp-line); }
.pd-proof dt { color: var(--hp-blue); font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track); text-transform: uppercase; line-height: 1.5; }
.pd-proof dd { margin: 0; color: var(--hp-ink); font-size: 14.5px; line-height: 1.5; }

/* ================================================================ FAQ */
/* Heading held on the left while the questions scroll past on the right.
   Each question is a native <details>: the answers stay in the page for
   search and find-in-page, and open without script. */
.pd-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.pd-faq__head { position: sticky; top: calc(var(--nv-offset, 80px) + 32px); }
.pd-faq__lead { margin: 22px 0 0; color: var(--hp-body); font-size: 16px; line-height: 1.6; }
.pd-faq__lead a { color: var(--hp-blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pd-faq__lead a:hover { color: var(--hp-ink); }
.pd-faq { border-bottom: 1px solid var(--pd-rule); }
.pd-faq__item { border-top: 1px solid var(--pd-rule); }
.pd-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.pd-faq__item summary::-webkit-details-marker { display: none; }
.pd-faq__item summary:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; border-radius: 6px; }
.pd-faq__item h3 { margin: 0; color: var(--hp-ink); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.3px; transition: color 0.2s ease; }
.pd-faq__item summary:hover h3 { color: var(--hp-blue); }
/* Plus that folds into a minus, on a ring that fills when the answer is open */
.pd-faq__icon { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--pd-rule); border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease; }
.pd-faq__icon::before, .pd-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px;
  border-radius: 1px; background: var(--hp-ink); transition: transform 0.3s var(--pd-ease), background-color 0.25s ease; }
.pd-faq__icon::after { transform: rotate(90deg); }
.pd-faq__item summary:hover .pd-faq__icon { border-color: var(--hp-blue); }
.pd-faq__item[open] .pd-faq__icon { border-color: var(--hp-ink); background: var(--hp-ink); }
.pd-faq__item[open] .pd-faq__icon::before, .pd-faq__item[open] .pd-faq__icon::after { background: #fff; }
.pd-faq__item[open] .pd-faq__icon::after { transform: rotate(0deg); }
.pd-faq__item p { margin: 0; padding: 0 56px 26px 0; max-width: 64ch; color: var(--hp-body); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
/* Opens and closes smoothly where the browser can animate to an auto
   height; elsewhere it simply opens. */
@supports (interpolate-size: allow-keywords) {
  .pd-faq { interpolate-size: allow-keywords; }
}
.pd-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--pd-ease), content-visibility 0.35s allow-discrete; }
.pd-faq__item[open]::details-content { block-size: auto; }

/* ===================================================== THE CLOSE */
/* The case study is a white card overhanging the dark CTA, the homepage's
   closing move (.hp-ways over .hp-cta), so the light page and the dark close
   meet on an object. White on purpose: a dark photo card over the dark CTA
   disappeared into it. */
/* Only the card is lifted, as on the homepage: if the section itself sits
   above the CTA, its ground covers the top of the CTA and the overlap
   vanishes. White, the FAQ's ground, so the card closes the FAQ and carries
   straight on into the CTA with no band between. */
.pd-bridge { background: #fff; }
.pd-case { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: center;
  margin-bottom: -140px; padding: 20px 20px 20px 44px; border-radius: var(--hp-radius); background: #fff; box-shadow: var(--hp-sh-lg);
  color: var(--hp-ink); transition: box-shadow 0.4s ease, transform 0.5s var(--pd-ease); }
.pd-case:hover { color: var(--hp-ink); transform: translateY(-3px); box-shadow: 0 30px 70px rgba(4, 19, 73, 0.22); }
.pd-case__k { display: block; margin: 0 0 14px; color: var(--hp-muted); font-size: var(--hp-label); font-weight: 600; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pd-case__t { display: block; max-width: 20ch; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; }
.pd-case__b { display: block; margin-top: 14px; max-width: 42ch; color: var(--hp-body); font-size: 16px; line-height: 1.6; }
.pd-case__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--hp-blue); font-size: 15.5px; font-weight: 600; }
.pd-case__img { display: block; height: 320px; border-radius: var(--hp-radius-sm); overflow: hidden; }
.pd-case__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.pd-cta .hp-cta__inner { padding-top: calc(128px + 140px); }

/* ======================================================== RESPONSIVE */
@media (max-width: 1239px) {
  .pd-resp { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pd-resp__copy { max-width: 620px; }
  .pd-resp .pd-lead { max-width: 60ch; }
  /* stacked, the chart would otherwise scale its lettering up with it */
  .pd-live { max-width: 780px; }
}

@media (max-width: 1180px) {
  .pd-d1 { font-size: 58px; letter-spacing: -2px; }
  .pd-hero__head { grid-template-columns: minmax(0, 1fr); gap: 48px 0; }
  .pd-display { max-width: 520px; }
  .pd-solves { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pd-fails { flex-direction: row; gap: 28px; }
  .pd-fails li { flex: 1 1 0; }
  .pd-why { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pd-proof { max-width: 560px; }
  .pd-case { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: 32px; padding-left: 32px; }
}

@media (max-width: 1099px) {
  .pd-d2 { font-size: 38px; letter-spacing: -1.1px; }
  .pd-hudnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  /* the overhang is a wide-screen device, as on the homepage */
  .pd-bridge { padding-bottom: 72px; }
  .pd-case { margin-bottom: 0; }
  .pd-cta .hp-cta__inner { padding-top: 96px; }
}

@media (max-width: 940px) {
  .pd-sec { padding: 72px 0; }
  .pd-fails { flex-direction: column; gap: 22px; }
  .pd-hud__mk { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 11px; }
  .pd-case { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 22px; }
  .pd-case__img { order: -1; height: 220px; }
  .pd-case__copy { padding: 0 8px 12px; }
  .pd-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pd-faq__head { position: static; }
}

@media (max-width: 760px) {
  .pd-live { padding: 18px 18px 20px; }
  .pd-live__stages { grid-template-columns: minmax(0, 1fr); }
  .pd-live__stages li, .pd-live__stages li:first-child { padding: 12px 0; }
  .pd-live__stages li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .pd-live__state { font-size: 18px; }
  .pd-tune__foot { flex-direction: column; align-items: flex-start; }
  .pd-tune__foot p { text-align: left; max-width: none; }
  /* the chart scales with the panel, so its lettering is set larger in
     drawing units to land near 10px on a phone */
  .pd-live__ax { font-size: 19px; }
  .pd-live__mark { stroke-width: 4; }
  .pd-outcomes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pd-faq__item h3 { font-size: 16.5px; }
  .pd-faq__item summary { padding: 18px 0; }
  .pd-faq__item p { padding-right: 0; font-size: 15.5px; }
  .pd-tagp { padding: 2px 7px; font-size: 10.5px; }
  .pd-tagp--big { padding: 4px 9px; font-size: 11.5px; }
  .pd-illus { display: none; }
}

@media (max-width: 640px) {
  .pd-d1 { font-size: 40px; letter-spacing: -1.3px; }
  .pd-d2 { font-size: 30px; letter-spacing: -0.8px; }
  .pd-lead, .pd-hero__lead { font-size: 16.5px; }
  .pd-hero__acts .hp-btn-primary, .pd-hero__acts .hp-btn-ghost { width: 100%; justify-content: center; }
  .pd-ring { padding: 2px 7px; font-size: 11px; gap: 4px; }
  .pd-status__act { font-size: 17px; }
  .pd-hero__proof > * + * { padding-left: 0; border-left: 0; }
  .pd-hudnotes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pd-hud__mk { display: none; }
  .pd-hudnotes h3 span { display: none; }
  .pd-proof { padding: 24px 22px 12px; }
  .pd-proof__stat { font-size: 58px; letter-spacing: -2.6px; }
  .pd-proof__stat small { font-size: 30px; }
  .pd-proof dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pd-alert { padding: 7px 10px; }
  .pd-alert span, .pd-alert b { font-size: 12px; }
  .pd-mark { font-size: 10.5px; }
  /* the tint already shows the zone; at this size its tag meets the banner */
  .pd-zone-tag { display: none; }
}

@media (max-width: 400px) {
  /* keeps "Slows the machine." on one line on a phone */
  .pd-d1 { font-size: 35px; letter-spacing: -1.1px; }
  .pd-proof__stat { font-size: 50px; letter-spacing: -2.2px; }
  .pd-proof__stat small { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-z--slow.is-live, .pd-z--stop.is-live { animation: none; }
  .pd-case { transition: none; }
  .pd-faq__icon, .pd-faq__icon::before, .pd-faq__icon::after { transition: none; }
}
/* Its own rule: a browser that does not know ::details-content drops the
   whole rule, and should not take the lines above with it. */
@media (prefers-reduced-motion: reduce) {
  .pd-faq__item::details-content { transition: none; }
}