/* ==========================================================================
   Proximity Detection (PAS): 2026 page. Prefix pd-
   Imported from the Claude Design canvas "PAS Page Flow".

   Depends on home-2026.css for the token block, the reset, .hp-shell,
   .hp-gradient, .hp-btn-*, the .hp-cta block and the footer. Nothing here
   redefines any of those, with one exception: the page's own .pd-cta--proof
   modifier lays the proof panel out inside the CTA (end of file).

   Discipline this file holds to, and the reason each rule exists:
     - one type ladder, no ad hoc sizes
     - three corner radii: 18px surfaces, 10px small, 100px pills
     - one uppercase tracking, .14em
     - .hp-gradient appears five times on the page and nowhere else
     - three full bleed moments, so the 1302px column is broken deliberately
   ========================================================================== */

:root {
  /* Deeper than the home page tint, which is effectively white: these sections
     need a boundary that is visible without a rule. */
  --pd-tint: #f5f8fa;
  --pd-rule: #d7e0eb;
  /* State colours report a thing the machine did. They never decorate. */
  --pd-warn: #b5761c;  --pd-warn-tx: #8a5812;
  --pd-warn-bg: #fdf4e9; --pd-warn-line: #f3e2cc;
  --pd-crit: #b32135;  --pd-crit-tx: #9c1b2c;
  --pd-crit-bg: #fdeef0; --pd-crit-line: #f6d5da;
  --pd-r-sm: 10px;
  --pd-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------- type ladder */
.pd-d1 { margin: 18px 0 0; font-size: 76px; font-weight: 600; line-height: 1.04; letter-spacing: -2.9px; color: #fff; }
.pd-d1 em { display: block; font-style: normal; color: var(--hp-ice); }
/* The brand gradient on a dark ground. The site ramp starts on --hp-navy and
   is windowed to show cyan through indigo to blue, which is built for the
   light sections: over the hero's own navy the first half of it disappears.
   Same device, same angle, same family, shifted up so every stop carries on
   #02102f. The sixth and last use of the gradient on this page. */
.pd-d1 em.pd-on-dark {
  background: linear-gradient(95deg,
    var(--hp-ice) 0%, var(--hp-cyan) 34%,
    var(--hp-blue-bright) 68%, var(--hp-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* the descender on the p needs the clip box to reach below the baseline */
  padding-bottom: 2px; }
.pd-d2 { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.12; letter-spacing: -1.4px;
  color: var(--hp-ink); max-width: 18ch; text-wrap: balance; }
.pd-d3 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.7px; color: var(--hp-ink); }
.pd-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--hp-body); }
.pd-body { margin: 0; font-size: 15px; line-height: 1.62; color: var(--hp-body); }
.pd-cap { margin: 0; font-size: 13px; line-height: 1.55; color: var(--hp-muted); }
.pd-lbl { margin: 0; font-size: var(--hp-label); font-weight: 600; letter-spacing: var(--hp-label-track);
  text-transform: uppercase; color: var(--hp-muted); }
.pd-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- section shells */
.pd-sec { position: relative; padding: var(--pd-y, 96px) 0; }
.pd-sec--tall { --pd-y: 128px; }
.pd-sec--tint { background: var(--pd-tint); border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); }
.pd-sec--dark { background: linear-gradient(168deg, #041349 0%, #02102f 100%); }
.pd-sec--dark .pd-d2, .pd-sec--dark .pd-d3, .pd-sec--dark .pd-sec--dark .pd-lead, .pd-sec--dark .pd-body { color: rgba(226, 236, 247, 0.8); }
.pd-sec--dark .pd-lbl { color: var(--hp-ice); }
/* The nav is sticky, so an anchor jump has to clear it. */
.pd-sec[id] { scroll-margin-top: calc(var(--nv-offset, 80px) + 12px); }

/* Act breaks. Three on the page, not one per section. */
.pd-act { display: flex; align-items: center; gap: 20px; margin: 0 0 34px; }
.pd-act span { white-space: nowrap; }
.pd-act::after { content: ""; flex: 1; height: 1px; background: var(--pd-rule); }

.pd-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 64px; align-items: end; }

/* ==================================================== 01 . hero ======== */
/* The nav sets background:transparent while it is over the hero, so the hero
   has to run 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: 56px; }
.pd-hero__sentinel { position: absolute; left: 0; top: 0; width: 100%; height: 2px; pointer-events: none; }
.pd-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* The approach. An illustration of closing distance, generated from Bigmate's
   own photograph of the machine, then duotoned into brand blue so it reads as
   treated brand material rather than as documentary footage. The bar below is
   its timeline: the playhead is driven by the video's own currentTime. */
.pd-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.1) brightness(.92) contrast(1.04);
  opacity: .55; }
.pd-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(2, 16, 47, 0.95) 0%, rgba(2, 16, 47, 0.82) 40%,
                rgba(2, 16, 47, 0.34) 76%, rgba(2, 16, 47, 0.5) 100%),
    linear-gradient(180deg, rgba(2, 16, 47, 0.62) 0%, rgba(2, 16, 47, 0) 26%, rgba(2, 16, 47, 0.78) 100%),
    radial-gradient(70% 60% at 18% 8%, rgba(7, 110, 232, 0.24) 0%, transparent 64%); }
.pd-hero__grid { position: absolute; inset: 0; opacity: .4;
  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 52%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 52%); }

.pd-hero__in { position: relative; z-index: 1; padding-top: calc(var(--nv-offset, 80px) + 64px); }
.pd-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 0 44px; align-items: center; }
.pd-hero__eyebrow { margin: 0; color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700;
  letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pd-hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ======================================================================
   THE RADAR. A reconstruction of the machine's own plan view, in the page's
   palette: filled concentric bands rather than outlines, the house and boom
   in the middle, an object tag that closes and then leaves. The band the
   object is standing in beats; the others rest.

   One clock drives the radar, the distance readout and the bar playhead, from
   a single distance profile in solutions-2026.js, so nothing can drift.
   It is an illustration of the configured zones, not a capture.
   ====================================================================== */
.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, .56) 0%, rgba(2, 16, 47, .34) 54%, rgba(2, 16, 47, 0) 76%); }
.pd-radar svg { position: relative; width: 100%; height: auto; display: block; overflow: visible; }

.pd-z { stroke-width: 1.25; transition: none; }
.pd-z--track { fill: rgba(143, 230, 245, 0.07); stroke: rgba(143, 230, 245, 0.46); }
.pd-z--slow  { fill: rgba(200, 137, 47, 0.10); stroke: rgba(200, 137, 47, 0.46); }
.pd-z--stop  { fill: rgba(195, 49, 70, 0.12);  stroke: rgba(195, 49, 70, 0.55); }
/* The band the object is standing in beats, the way the real display tints its
   critical zone. Animating the fill colour rather than fill-opacity, which
   cannot exceed 1 and so cannot brighten a already-opaque fill. */
@keyframes pd-beat-slow {
  0%, 100% { fill: rgba(200, 137, 47, 0.10); }
  42%      { fill: rgba(200, 137, 47, 0.32); }
}
@keyframes pd-beat-stop {
  0%, 100% { fill: rgba(195, 49, 70, 0.14); }
  38%      { fill: rgba(195, 49, 70, 0.42); }
}
.pd-z--slow.is-live { animation: pd-beat-slow 1.5s ease-in-out infinite;
  stroke: rgba(200, 137, 47, 0.95); }
.pd-z--stop.is-live { animation: pd-beat-stop 1s ease-in-out infinite;
  stroke: rgba(195, 49, 70, 1); }

/* The machine. A plan view of a real dragline rather than a diagram, graded
   back so it sits inside the display instead of shouting over it. It carries
   no CSS animation on purpose: the script turns it at the speed reference, so
   the boom slowing and then stopping is the same number the meter shows. */
.pd-mach { filter: saturate(.5) contrast(1.14) brightness(1.04)
          drop-shadow(0 10px 26px rgba(2, 16, 47, .75)); }

/* The track the system held on them. Each dot keeps the colour of the zone it
   was recorded in, so the two crossings are written along the path and you can
   see where the response changed without reading anything. */
/* the dark rim is what keeps the track readable where it runs over the
   machine, which is exactly where it matters most */
.pd-trail__d { fill: var(--hp-ice); stroke: rgba(2, 16, 47, .55); stroke-width: .9; }
.pd-trail__d.is-slow { fill: #e0a144; }
.pd-trail__d.is-stop { fill: #e8546e; }

.pd-obj__dot { fill: var(--hp-ice); }
.pd-obj.is-slow .pd-obj__dot { fill: #e0a144; }
.pd-obj.is-stop .pd-obj__dot { fill: #e8546e; }
.pd-obj__halo { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.pd-obj__tag { fill: rgba(4, 19, 73, 0.86); stroke: rgba(143, 230, 245, 0.4); stroke-width: 1; }
.pd-obj.is-slow .pd-obj__tag { stroke: rgba(224, 161, 68, 0.85); }
.pd-obj.is-stop .pd-obj__tag { stroke: rgba(232, 84, 110, 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: .12em; font-family: inherit; text-anchor: middle; }

/* THE READOUT. The quiet line is the alert as the cab shows it ("Person
   Detected On Right Hand Side At 5.49m"); the loud line is what the machine
   did about it, which is the part worth reading, so it carries the size and
   the colour. Sentence case throughout on purpose: three stacked blocks of
   tracked capitals read as a pile of labels rather than as a display, and the
   page already spends its capitals on section labels.

   State lives in two custom properties rather than in six colour rules, so the
   pip and the line can never disagree about which zone we are in. */
/* The seam between the instrument and the readout carries the state, rather
   than a pip in front of the verdict. A pip pushed the loudest line in the
   block off the left edge every other line was sharing, and the rule was
   already there doing nothing: now it turns amber as the machine slows and
   red as it stops, which ties the two halves together as it does it.
   Margin, not padding, on the right, so the rule stops where the speed
   reference meter above it stops instead of running 22px past everything. */
.pd-status { --pd-state: var(--hp-ice); --pd-state-line: rgba(143, 230, 245, 0.16);
  margin: 14px 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--pd-state-line); }
.pd-status.is-slow { --pd-state: #e0a144; --pd-state-line: rgba(224, 161, 68, 0.5); }
.pd-status.is-stop { --pd-state: #e8546e; --pd-state-line: rgba(232, 84, 110, 0.62); }

.pd-status__alert { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: rgba(226, 236, 247, 0.58); }
/* No transition on the state colour. An alert changing zone is a step, not a
   ramp, and a fade here reads as the display hesitating; the bars below still
   ramp, because there the colour is a value moving rather than a state
   flipping. It also removes a real fragility: a transitioned property whose
   value comes through a custom property never lands where frames are throttled. */
.pd-status__act { margin: 7px 0 0; font-size: 15.5px; font-weight: 700;
  letter-spacing: -0.011em; line-height: 1.3; color: var(--pd-state); }

/* THE HERO COPY. It is the whole of the left hand column now, so it is set at
   a reading size rather than a caption size and given room, and the two beats
   are separated by space rather than by a rule or a panel.

   The lead does the work the headline cannot: the headline says the machine
   stops, the lead says HOW, which is proportionally, so the stop is a
   controlled one and not an emergency. The second line is the one that decides
   whether a crew leaves the system switched on, and it is the only body copy
   on the page set in full white, which is all the emphasis it needs. */
.pd-hero__lead { margin: 32px 0 0; max-width: 45ch; font-size: 19px; line-height: 1.6;
  font-weight: 400; letter-spacing: -0.004em; color: rgba(255, 255, 255, 0.74); }
.pd-hero__kicker { margin: 26px 0 0; max-width: 38ch; font-size: 17.5px; line-height: 1.5;
  font-weight: 600; letter-spacing: -0.008em; color: #fff; }

/* One contrast, carried by two words. The stop the system makes against the
   stop somebody else has to make. Weight and colour together, because at 19px
   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; }

/* The footnote is a footnote. It was two lines of tracked capitals, which made
   the least important thing on the display the widest and heaviest block on it. */
.pd-radar__cap { margin: 16px 0 0; padding-right: 22px; max-width: 43ch;
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  color: rgba(226, 236, 247, 0.33); }

/* ======================================================================
   THE SCOPE. Plan view on the left, then two vertical gauges: the distance
   envelope and the speed reference PAS writes to the drive. Vertical because
   the two are read together, one driving the other, and a falling bar beside a
   falling bar says that in a way two horizontal ones do not.

   50 m at the top, the machine at the bottom, so approach reads as descent.
   Band heights are the envelope: 50 to 25 m is half of it, 25 to 10 m is 30%,
   10 m to the machine is 20%.
   ====================================================================== */
/* One ground under the whole display, so the readout sits on the same surface
   as the instrument above it instead of floating on the photograph. It bleeds
   past the column and fades out at the top rather than boxing it in: a bordered
   card here reads as a widget dropped on the hero, and it would have cost the
   plan view forty pixels of width in padding. */
.pd-display { position: relative; z-index: 1; }
.pd-display::before { content: ""; position: absolute; z-index: -1;
  inset: -26px -20px -20px -22px; border-radius: 26px; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2, 16, 47, 0) 0%, rgba(2, 16, 47, 0.28) 17%,
    rgba(2, 16, 47, 0.5) 56%, rgba(2, 16, 47, 0.56) 100%); }

.pd-scope { display: flex; align-items: center; gap: 16px; }
.pd-radar { position: relative; margin: 0; flex: 1 1 auto; min-width: 0; }
/* flex, not grid: two items sharing a grid column silently wrap to a second
   row and take the rest of the cluster with them */
.pd-gauges { flex: 0 0 auto; display: flex; align-items: stretch; height: 300px;
  margin: 22px 0 24px; padding-right: 22px; }
.pd-vlabels { position: relative; width: 108px; }
.pd-vmarks { position: relative; width: 38px; }
.pd-vbar { position: relative; width: 14px; border-radius: 3px; display: flex; flex-direction: column;
  overflow: visible; }
.pd-vbar > span { display: block; }
.pd-vband--track { height: 70%; background: rgba(143, 230, 245, 0.34); border-radius: 3px 3px 0 0; }
.pd-vband--slow  { height: 20%; background: linear-gradient(180deg, #a8762d 0%, #c8892f 100%); }
.pd-vband--stop  { height: 10%; background: linear-gradient(180deg, #b3324a 0%, #c33146 100%);
  border-radius: 0 0 3px 3px; }
/* the machine's face, at zero */
.pd-vbar::after { content: ""; position: absolute; left: -7px; right: -7px; bottom: -1px; height: 3px;
  background: #fff; }
/* top is set from the live distance by solutions-2026.js */
.pd-vhead { position: absolute; left: -6px; right: -6px; top: 0; height: 2px; background: #fff;
  box-shadow: 0 0 0 3px rgba(2, 16, 47, 0.55); z-index: 2; }
.pd-vhead[hidden] { display: none; }

.pd-vmark { position: absolute; right: 12px; transform: translateY(-50%); font-size: 12px; font-weight: 700;
  color: rgba(255, 255, 255, 0.74); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-vmark::after { content: ""; position: absolute; right: -12px; top: 50%; width: 7px; height: 1px;
  background: rgba(255, 255, 255, 0.3); }

.pd-vlabel { position: absolute; right: 0; transform: translateY(-50%); text-align: right; margin: 0;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; color: #fff; line-height: 1.3; }
.pd-vlabel small { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: var(--hp-label-track); text-transform: uppercase; color: rgba(226, 236, 247, 0.5); }

/* the speed reference, falling beside the distance that causes it */
.pd-vslew { position: relative; width: 14px; margin-left: 18px; border-radius: 3px;
  background: rgba(143, 230, 245, 0.14); }
.pd-vslew i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 3px;
  background: var(--hp-ice); transition: background .3s ease; }
.pd-scope.is-slow .pd-vslew i { background: #e0a144; }
.pd-scope.is-stop .pd-vslew i { background: #e8546e; }
.pd-vslew__k { position: absolute; top: 0; bottom: 0; left: 100%; margin-left: 7px;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  display: flex; align-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: var(--hp-label-track); text-transform: uppercase;
  color: rgba(226, 236, 247, 0.42); }
.pd-vslew__pct { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==================================================== 02 . credentials = */
.pd-creds { --pd-y: 56px; }
.pd-creds__g { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 56px; align-items: center; }
.pd-logos { display: flex; align-items: center; justify-content: space-between; gap: 18px 34px; flex-wrap: wrap; }
/* Multiply on white drops the JPEG backgrounds and keeps every dark mark,
   whatever the source artwork does. */
.pd-logos img { flex: 1 1 0; min-width: 64px; height: 32px; object-fit: contain;
  filter: grayscale(1) brightness(.5) contrast(1.15); mix-blend-mode: multiply; opacity: .85; }
.pd-cf { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px; padding-top: 26px;
  border-top: 1px solid var(--pd-rule); }
.pd-cf div { padding-right: 30px; }
.pd-cf div + div { padding-left: 30px; border-left: 1px solid var(--hp-line); }
.pd-cf b { display: block; font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track);
  text-transform: uppercase; color: var(--hp-blue-deep); }
.pd-cf span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--hp-ink); font-weight: 500; }

/* -------------------------------------------------------- full bleed x3 */
.pd-bleed-l { display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 1fr); gap: 0 72px; align-items: center;
  padding-right: max(12px, calc((100% - var(--hp-shell)) / 2 + 12px)); }
.pd-bleed-l figure { position: relative; margin: 0; height: 540px; border-radius: 0 var(--hp-radius) var(--hp-radius) 0;
  overflow: hidden; box-shadow: 0 26px 60px rgba(4, 19, 73, 0.2); }
.pd-bleed-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 54%); gap: 0 72px; align-items: center;
  padding-left: max(12px, calc((100% - var(--hp-shell)) / 2 + 12px)); }
.pd-bleed-r figure { position: relative; margin: 0; height: 520px; border-radius: var(--hp-radius) 0 0 var(--hp-radius);
  overflow: hidden; box-shadow: 0 26px 60px rgba(4, 19, 73, 0.2); }
.pd-bleed-l figure img, .pd-bleed-r figure img { width: 100%; height: 100%; object-fit: cover; }
/* The caption quotes what is in the frame rather than describing it. */
.pd-quote { position: absolute; left: 26px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 17px; border-radius: var(--hp-radius-pill, 100px); background: rgba(4, 19, 73, 0.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 12.5px; font-weight: 600; }
.pd-quote i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a6e; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255, 90, 110, 0.26); }

/* ==================================================== 03 . the problem = */
.pd-thread { max-width: 22ch; }
.pd-points { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 52px; border-top: 1px solid var(--pd-rule); }
.pd-points div { padding: 24px 28px 0 0; }
.pd-points div + div { padding-left: 28px; border-left: 1px solid var(--hp-line); }
.pd-points h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--hp-ink); }
.pd-points p { margin: 8px 0 0; font-size: 14px; line-height: 1.58; color: var(--hp-body); }

/* ==================================================== 04 . what it sees  */
.pd-see { margin-top: 24px; }
.pd-see__i { padding: 20px 0; border-top: 1px solid var(--pd-rule); }
.pd-see__i:first-child { border-top: 0; padding-top: 0; }
.pd-see__i h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--hp-ink); }
.pd-see__i p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--hp-body); }
.pd-classes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.pd-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 100px;
  background: var(--hp-chip-bg); border: 1px solid var(--hp-chip-line); font-size: 12.5px; font-weight: 600;
  color: var(--hp-blue-deep); box-sizing: border-box; }

/* ==================================================== 05 . the descent = */
.pd-lad { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin-top: 8px; }
/* Colour is risk and weight is control: the rail thickens and darkens as the
   response takes hold. Never both signals on one mark. */
.pd-lseg { grid-column: 1; position: relative; }
.pd-lseg::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: var(--pd-w, 4px);
  transform: translateX(-50%); background: var(--pd-c, #b6bfcb); }
.pd-lseg i { position: absolute; left: 34px; top: 26px; transform: translate(-50%, -50%); width: 13px; height: 13px;
  border-radius: 50%; background: var(--pd-c, #b6bfcb); box-shadow: 0 0 0 5px #fff; }
.pd-rung { grid-column: 2; display: grid; grid-template-columns: 206px minmax(0, 1fr) 292px; gap: 30px;
  align-items: center; padding: 26px 0 30px; border-top: 1px solid var(--hp-line); }
.pd-rung:first-of-type { border-top: 0; }
.pd-rung__d { margin: 0; font-size: 56px; font-weight: 700; letter-spacing: -2.3px; line-height: 1; color: var(--hp-ink); }
.pd-rung__d small { font-size: 20px; font-weight: 600; letter-spacing: -.4px; margin-left: 8px; }
.pd-rung__z { margin: 9px 0 0; font-size: 12.5px; color: var(--hp-muted); }
.pd-rung h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.45px; color: var(--hp-ink); }
.pd-rung__b { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--hp-body); }
.pd-state { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 100px;
  margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; box-sizing: border-box; }
.pd-state--none { background: #eef2f7; border: 1px solid var(--pd-rule); color: #6f7a89; }
.pd-state--warn { background: var(--pd-warn-bg); border: 1px solid var(--pd-warn-line); color: var(--pd-warn-tx); }
.pd-state--crit { background: var(--pd-crit-bg); border: 1px solid var(--pd-crit-line); color: var(--pd-crit-tx); }
.pd-plate { border-radius: var(--pd-r-sm); overflow: hidden; border: 1px solid var(--pd-rule); background: #14181f;
  height: 190px; display: flex; align-items: center; justify-content: center; }
.pd-plate img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.pd-plate--none { background: transparent; border: 1px dashed var(--pd-rule); color: #98a3b2; font-size: 13px;
  line-height: 1.5; text-align: center; padding: 0 22px; box-sizing: border-box; }
.pd-verdict { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--pd-rule);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 72px; align-items: center; }

/* THE WEDGE. What the ladder above buys the person on the ground, as a shape
   rather than a moment. Light mode, so the risk red is the page's crit token
   and the controlled line is the brand blue; the band between them is filled
   in that same blue because it is relief, not danger. Drawn by
   solutions-2026.js from the same two curves the hero display reads. */
.pd-wedge { margin: 52px 0 0; padding-top: 34px; border-top: 1px solid var(--pd-rule); }
.pd-wedge__scroll { margin-top: 34px; }
.pd-wedge__c { display: block; width: 100%; height: auto; overflow: visible; }
/* The caption runs above the chart, not under it: below, it left a third of a
   line of type against two thirds of nothing, and the section reads better
   ending on the figure than on a paragraph. */
.pd-wedge__cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 0 64px; align-items: start; }
.pd-wedge__t { font-size: 14px; line-height: 1.65; color: var(--hp-body); }

.pd-wg-band { fill: rgba(10, 95, 196, 0.13); }
.pd-wg-off { fill: none; stroke: var(--pd-crit); stroke-width: 2.5; stroke-linejoin: round; }
.pd-wg-on  { fill: none; stroke: var(--hp-blue-deep); stroke-width: 2.5; stroke-linejoin: round; }
.pd-wg-zone { stroke: #c2cede; stroke-width: 1; stroke-dasharray: 3 5; }
.pd-wg-base { stroke: var(--pd-rule); stroke-width: 1; }
.pd-wg-y { fill: var(--hp-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-anchor: end; font-family: inherit; }
.pd-wg-t { fill: var(--hp-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  font-family: inherit; }
.pd-wg-lab { font-size: 13px; font-weight: 700; font-family: inherit; }
.pd-wg-lab--off { fill: var(--pd-crit); }
.pd-wg-lab--on { fill: var(--hp-blue-deep); }
.pd-wg-gap { fill: var(--hp-muted); font-size: 12px; font-weight: 700; font-family: inherit;
  text-anchor: middle; }

/* ==================================================== 06 . the ramp ==== */
.pd-ramp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 58%); gap: 0 64px; align-items: center; }
.pd-ramp figure { position: relative; margin: 0; border-radius: var(--hp-radius); overflow: hidden;
  border: 1px solid var(--pd-rule); background: #fff; box-shadow: var(--hp-sh-sm); }
.pd-ramp figure img { width: 100%; }
.pd-quote--warn i { background: var(--pd-warn); box-shadow: 0 0 0 4px rgba(181, 118, 28, 0.26); }
.pd-ts { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; padding: 15px 0;
  border-top: 1px solid var(--pd-rule); }
.pd-ts b { font-size: 15px; font-weight: 700; color: var(--hp-ink); font-variant-numeric: tabular-nums; }
.pd-ts span { font-size: 14px; line-height: 1.55; color: var(--hp-body); }

/* ==================================================== 07 . in the cab == */
.pd-cab { --pd-y: 112px; }
/* The one full-viewport moment. The display is the biggest and best capture on
   the page and the only image that earns a bleed. */
.pd-cabfig { position: relative; margin: 40px 0 0; border-top: 1px solid rgba(143, 230, 245, 0.22);
  border-bottom: 1px solid rgba(143, 230, 245, 0.22); }
.pd-cabfig img { width: 100%; display: block; }
.pd-mk { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%;
  background: var(--hp-ice); color: var(--hp-navy); font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(4, 19, 73, 0.5); }
.pd-cablist { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; }
.pd-cablist div { padding-right: 28px; }
.pd-cablist div + div { padding-left: 28px; border-left: 1px solid rgba(143, 230, 245, 0.16); }
.pd-cablist b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--hp-ice); color: var(--hp-navy); font-size: 11px; font-weight: 700; }
.pd-cablist h3 { margin: 12px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.35px; color: #fff; }
.pd-cablist p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.58; color: rgba(226, 236, 247, 0.7); }

/* ============================================ 08 . fitment and answers = */
.pd-ctl4 { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-top: 1px solid var(--pd-rule); }
.pd-ctl4 div { padding: 26px 28px 0 0; }
.pd-ctl4 div + div { padding-left: 28px; border-left: 1px solid var(--hp-line); }
.pd-ctl4 b { font-size: var(--hp-label); font-weight: 700; letter-spacing: var(--hp-label-track); color: var(--hp-blue-deep); }
.pd-ctl4 h3 { margin: 11px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--hp-ink); }
.pd-ctl4 p { margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: var(--hp-body); }
.pd-qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 72px; margin-top: 56px; }
.pd-q { padding: 24px 0; border-top: 1px solid var(--pd-rule); }
.pd-q h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--hp-ink); }
.pd-q p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--hp-body); }
.pd-q p b { color: var(--hp-ink); font-weight: 600; }

/* ============================================ 09 . proof and the close = */
/* The close is now a panel inside the CTA (.pd-cta__proof, at the end of the
   file); the separate .pd-close section and its .pd-pcard are gone. */
.pd-link { font-size: 15px; font-weight: 600; color: var(--hp-blue-deep); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .pd-d1 { font-size: 54px; letter-spacing: -1.9px; }
  .pd-d2 { font-size: 40px; letter-spacing: -1.2px; }
  .pd-hero__head { grid-template-columns: minmax(0, 1fr); gap: 40px 0; align-items: start; }
  .pd-radar { max-width: 440px; }
  .pd-bleed-l, .pd-bleed-r { gap: 0 44px; }
  .pd-bleed-l figure, .pd-bleed-r figure { height: 440px; }
  .pd-rung { grid-template-columns: 168px minmax(0, 1fr) 240px; gap: 24px; }
  .pd-rung__d { font-size: 44px; letter-spacing: -1.6px; }
  .pd-ramp { grid-template-columns: minmax(0, 1fr); gap: 34px 0; }
}

@media (max-width: 940px) {
  .pd-sec, .pd-sec--tall { --pd-y: 72px; }
  .pd-d1 { font-size: 42px; letter-spacing: -1.4px; }
  .pd-d2 { font-size: 32px; letter-spacing: -1px; max-width: none; }
  .pd-d3 { font-size: 24px; letter-spacing: -.6px; }
  .pd-head { grid-template-columns: minmax(0, 1fr); gap: 20px 0; }

  /* A horizontal metre scale is unreadable at this width, so each band becomes
     a row: its range, then what happens in it, keeping its colour as a rule. */
  .pd-radar { max-width: 420px; }
  .pd-radar__cap { position: static; margin-top: 10px; }

  .pd-creds__g { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .pd-cf, .pd-points, .pd-ctl4, .pd-cablist { grid-template-columns: 1fr 1fr; }
  .pd-cf div, .pd-points div, .pd-ctl4 div, .pd-cablist div { padding: 20px 20px 20px 0; }
  .pd-cf div + div, .pd-points div + div,
  .pd-ctl4 div + div, .pd-cablist div + div { padding-left: 20px; }
  .pd-cf div:nth-child(3), .pd-points div:nth-child(3),
  .pd-ctl4 div:nth-child(3), .pd-cablist div:nth-child(3) { border-left: 0; padding-left: 0; }
  .pd-bleed-l, .pd-bleed-r { grid-template-columns: minmax(0, 1fr); gap: 30px 0; padding: 0; }
  .pd-bleed-l > div, .pd-bleed-r > div { padding: 0 max(20px, calc((100% - var(--hp-shell)) / 2)); }
  .pd-bleed-l figure, .pd-bleed-r figure { height: 320px; border-radius: 0; }
  /* the rail is a section device, not a mobile one */
  .pd-lad { grid-template-columns: minmax(0, 1fr); }
  .pd-lseg { display: none; }
  .pd-rung { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .pd-rung__d { font-size: 38px; }
  .pd-plate { height: 160px; }
  .pd-verdict { grid-template-columns: minmax(0, 1fr); gap: 16px 0; }
  .pd-wedge { margin-top: 36px; padding-top: 26px; }
  .pd-wedge__cap { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
  /* Below this the chart would render about 130px tall, which is too short for
     the curves to separate and far too short for its own labels. It keeps its
     drawing and scrolls inside the figure instead. */
  .pd-wedge__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; }
  .pd-wedge__c { min-width: 900px; }
  .pd-wedge__t { font-size: 13px; }
  .pd-cablist { margin-top: 24px; }
  .pd-mk { display: none; }
  .pd-qa { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 34px; }
}

@media (max-width: 640px) {
  .pd-d1 { font-size: 34px; letter-spacing: -1.1px; }
  .pd-d2 { font-size: 27px; letter-spacing: -.8px; }
  .pd-hero__acts .hp-btn-primary, .pd-hero__acts .hp-btn-ghost { width: 100%; justify-content: center; }
  /* the longest act label runs to 339px, which leaves its rule no room at 390 */
  .pd-act { flex-wrap: wrap; gap: 10px 16px; }
  .pd-act span { white-space: normal; }
  .pd-cf, .pd-points, .pd-ctl4, .pd-cablist { grid-template-columns: minmax(0, 1fr); }
  .pd-cf div, .pd-points div, .pd-ctl4 div, .pd-cablist div { padding: 18px 0; border-left: 0 !important; }
  .pd-cf div + div, .pd-points div + div,
  .pd-ctl4 div + div, .pd-cablist div + div { padding-left: 0; border-top: 1px solid var(--hp-line); }
  .pd-cablist div + div { border-top-color: rgba(143, 230, 245, 0.16); }
  .pd-scope { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pd-radar { max-width: 340px; width: 100%; }
  .pd-gauges { margin-top: 34px; }
  .pd-logos img { flex: 0 0 auto; height: 26px; }
  .pd-ts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pd-plate { height: 130px; }
}

@media (max-width: 640px) {
  .pd-hero__lead { font-size: 17px; }
  .pd-hero__kicker { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ======================================================================
   THREE ACTS (Sep 2026)
   The restructure leans on home-2026.css rather than repeating it: the act
   openers are .hp-chip, the section heads are .hp-section__head--row, the
   photo panels are .hp-case--lead and the two dark feature cards are
   .hp-how__act. What follows is only the glue those need on this page.
   ====================================================================== */

/* --- section heads on the dark ground -------------------------------- */
/* .hp-section__title is ink, which is invisible on navy. */
.pd-sec--dark .hp-section__title { color: #fff; }
.pd-sec--dark .hp-section__aside p { color: rgba(226, 236, 247, 0.72); }

/* --- the photo panel plus two notes, used twice ---------------------- */
.pd-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; margin-top: 50px; }
.pd-shot { min-height: 440px; }
.pd-shot__b { margin: 12px 0 0; max-width: 52ch; color: rgba(255, 255, 255, 0.84);
  font-size: 15.5px; line-height: 1.6; }
.pd-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 26px; }

.pd-note { display: flex; flex-direction: column; justify-content: center;
  padding: 28px 30px; border-radius: var(--hp-radius); background: var(--hp-surface);
  border: 1px solid var(--hp-line); }
.pd-note--dark { background: var(--hp-deep); border-color: transparent; box-shadow: var(--hp-sh-lg); }
.pd-note__k { margin: 0; font-size: var(--hp-label); font-weight: 600;
  letter-spacing: var(--hp-label-track); text-transform: uppercase; color: var(--hp-muted); }
.pd-note--dark .pd-note__k { color: var(--hp-ice); }
.pd-note__t { margin: 12px 0 0; font-size: 22px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.45px; color: var(--hp-ink); }
.pd-note--dark .pd-note__t { color: #fff; }
.pd-note__b { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--hp-body); }
.pd-note--dark .pd-note__b { color: rgba(255, 255, 255, 0.72); }
.pd-note__k + .pd-note__t { margin-top: 12px; }

/* the graduated response, as line weight rather than a filled track */
.pd-weights { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pd-weights i { display: block; border-radius: 3px; }
.pd-weights i:nth-child(1) { width: 68px; height: 3px; background: #b6bfcb; }
.pd-weights i:nth-child(2) { width: 44px; height: 6px; background: var(--pd-warn); }
.pd-weights i:nth-child(3) { width: 26px; height: 12px; background: var(--pd-crit); }

.pd-split + .pd-thread { margin-top: 48px; max-width: 30ch; }

/* --- the sensing pyramid, inverted ----------------------------------- */
/* home-2026.css lifts .hp-how__act to row one and pins the two pillars to
   row two. Here the pillars come first and the act block sits under them, so
   the placement is handed back to document order and the connector that used
   to point up at the act block is dropped. */
.pd-core .hp-how__pillar { grid-column: auto; grid-row: auto; }
.pd-core .hp-how__act { grid-column: 1 / -1; grid-row: auto; padding: 34px 38px; }
.pd-core .hp-how__pillar::before { content: none; }
.pd-core .hp-how__act-copy { padding: 0 18px 0 0; }
.pd-classes { margin-top: 34px; }

/* --- the three records ----------------------------------------------- */
/* Line weight carries control and colour carries risk, the same rule the
   old ladder held to, now on the top edge of each card. */
.pd-band { display: flex; align-items: center; gap: 24px; margin: 44px 0 0;
  padding: 22px 30px; border-radius: var(--hp-radius); background: var(--hp-surface);
  border: 1px solid var(--hp-line); }
.pd-band__w { flex-shrink: 0; width: 74px; height: 3px; border-radius: 2px; background: #b6bfcb; }
.pd-band b { flex-shrink: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.4px; color: var(--hp-ink); }
.pd-band > span:last-child { font-size: 15.5px; line-height: 1.55; color: var(--hp-body); }

.pd-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 26px; }
.pd-rec { border-radius: var(--hp-radius); overflow: hidden; background: #fff;
  border: 1px solid var(--hp-line); box-shadow: var(--hp-sh-md); }
.pd-rec--w1 { border-top: 6px solid var(--pd-warn); }
.pd-rec--w2 { border-top: 9px solid var(--pd-warn); }
.pd-rec--w3 { border-top: 12px solid var(--pd-crit); }
.pd-rec img { display: block; width: 100%; }
/* generated plates: the homepage's .hp-how__tag, so an illustration always
   says so */
.pd-rec__fig { position: relative; margin: 0; }
.pd-rec__fig img { aspect-ratio: 11 / 7; height: auto; object-fit: cover; }
.pd-rec__tag { position: absolute; left: 10px; bottom: 10px; 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; letter-spacing: 0.02em; }
.pd-rec__b { padding: 26px 28px 30px; }
.pd-rec__d { margin: 0; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -1.8px; color: var(--hp-ink); }
.pd-rec__d small { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; margin-left: 7px; }
.pd-rec__z { margin: 9px 0 0; font-size: 13px; font-weight: 700; }
.pd-rec__z--warn { color: var(--pd-warn); }
.pd-rec__z--crit { color: var(--pd-crit); }
.pd-rec h3 { margin: 18px 0 0; font-size: 21px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.45px; color: var(--hp-ink); }
.pd-rec__t { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--hp-body); }
.pd-rec .pd-state { margin-top: 18px; }

/* --- the historian trace, in the shared dark card -------------------- */
.pd-trace { margin-top: 46px; }
/* .hp-how__media is 16/9 for the homepage stills; the trace is 1023x625 and
   must not be cropped to fit it. */
.pd-trace__fig { aspect-ratio: auto; background: #000; }
.pd-trace__fig img { height: auto; }
.pd-ts { grid-template-columns: minmax(0, 1fr); }
.pd-ts b { display: inline-block; min-width: 116px; color: #fff; }

/* --- the cab callouts, beside the markers rather than under them ----- */
.pd-cabnotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 60px; margin: 40px 0 0; padding: 0; list-style: none; }
.pd-cabnotes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.pd-cabnotes b { font-size: 28px; font-weight: 300; line-height: 1; color: var(--hp-blue-bright); }
.pd-cabnotes h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: #fff; }
.pd-cabnotes p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(226, 236, 247, 0.72); }

/* --- the close ------------------------------------------------------- */
.pd-creds4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--hp-line); }
.pd-creds4 b { display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--hp-blue-deep); }
.pd-creds4 span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5;
  font-weight: 500; color: var(--hp-ink); }

/* --- narrow ---------------------------------------------------------- */
@media (max-width: 940px) {
  .pd-split, .pd-stack, .pd-recs, .pd-cabnotes, .pd-creds4 { grid-template-columns: minmax(0, 1fr); }
  .pd-stack { grid-template-rows: auto; }
  .pd-shot { min-height: 360px; }
  .pd-core .hp-how__act { padding: 24px 22px; }
  .pd-band { flex-wrap: wrap; gap: 12px 18px; padding: 20px 22px; }
  .pd-band__w { width: 48px; }
}

/* --- the hero's own logo wall ---------------------------------------- */
/* Lifted from .hp-hero__logos on the homepage, including the filter, so the
   hero closes on an object instead of handing off to an orphaned white strip.
   The old standalone credentials section is gone with it. */
.pd-hero__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 44px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pd-hero__logos-label { margin: 0; flex: 0 0 auto; color: rgba(255, 255, 255, 0.55);
  font-size: var(--hp-label); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.pd-hero__logos-row { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; flex: 1 1 auto; gap: 18px 30px; }
/* Equal cells, not equal heights, and a knockout that survives all three kinds
   of source artwork: invert makes every ground black and every mark light,
   lighten then drops the black against the navy. */
.pd-hero__logos-row img { flex: 1 1 0; min-width: 66px; height: 34px;
  object-fit: contain; object-position: center;
  filter: grayscale(1) invert(1); mix-blend-mode: lighten; }

/* --- the hinge between act one and act two --------------------------- */
/* The page's turn from the problem to the machine. The ground steps across
   the sentence rather than in a gap beside it, which is the only honest way
   to make a 2% difference between two near-whites read as a boundary. */
.pd-sec--flush { padding-bottom: 0; }
.pd-hinge { padding: 84px 0 96px;
  background: linear-gradient(180deg, #fff 0%, var(--hp-surface) 100%); }
.pd-hinge__t { margin: 0; max-width: 26ch; color: var(--hp-ink);
  font-size: 38px; font-weight: 700; line-height: 1.18; letter-spacing: -1.1px;
  text-wrap: balance; }
/* the hinge has already given the air and the ground change */
.pd-hinge + .pd-sec--tint { border-top: 0; padding-top: 0; }

@media (max-width: 940px) {
  .pd-hero__logos { gap: 16px 0; margin-top: 30px; padding-top: 20px; }
  .pd-hero__logos-row { justify-content: flex-start; gap: 16px 22px; }
  .pd-hero__logos-row img { flex: 0 0 auto; height: 26px; }
  .pd-hinge { padding: 54px 0 62px; }
  .pd-hinge__t { font-size: 27px; letter-spacing: -0.7px; }
}

/* --- the bridge from the hero into act two --------------------------- */
/* The on-foot photograph is lifted 140px up into the hero, so the two meet on
   an object. It used to open act one; act one is gone and the photograph now
   opens act two, landing on its tint. The hero carries 150px more at its foot
   for the card to land in, which leaves 66px of navy between the logo wall and
   the card's top edge. Same device as .hp-voice on the homepage (margin-top
   -92px into the section above, which carries extra bottom padding for it),
   and one of the page's two; the other is the records sinking into the cab.
   The tint's top rule would run across the card's landing, so it goes. With
   no top padding or border left, the card's -140px margin would collapse
   through the section and drag its tint up over the hero, hiding the
   overhang; flow-root keeps the section's top edge at the hero's foot.
   The hero is its own stacking context at z-index 0, so z-index 2 here is
   enough to paint over it. */
.pd-hero--lifted { padding-bottom: 206px; }
.pd-sec--lifted { display: flow-root; padding-top: 0; border-top: 0; }
.pd-lift { z-index: 2; min-height: 380px; margin: -140px 0 64px; padding: 42px 44px;
  box-shadow: 0 30px 70px rgba(4, 19, 73, 0.30); }
/* lighter at the top than the homepage case cards, so the part of the photo
   sitting on the navy reads as photograph and not as more navy */
.pd-lift .hp-case__scrim { background: linear-gradient(180deg,
  rgba(2, 12, 38, 0.10) 0%, rgba(2, 12, 38, 0.55) 50%, rgba(2, 12, 38, 0.92) 100%); }
.pd-lift .hp-case__img { object-position: center 58%; }
.pd-lift .hp-case__meta { margin-bottom: 10px; }
/* a paragraph, not a heading: it sits above the section's h2 and outranks it
   visually, which is the same call the homepage makes for its customer quote */
.pd-lift .hp-case__title { max-width: 28ch; font-size: 32px; line-height: 1.18; letter-spacing: -0.8px; }

/* the two controls, side by side now the photograph has gone to the bridge */
.pd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 50px; }
.pd-pair .pd-note { padding: 32px 34px; }

@media (max-width: 940px) {
  .pd-hero--lifted { padding-bottom: 130px; }
  .pd-lift { min-height: 300px; margin: -90px 0 44px; padding: 28px 24px; }
  .pd-lift .hp-case__title { font-size: 23px; letter-spacing: -0.4px; }
  .pd-pair { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 36px; }
  .pd-pair .pd-note { padding: 26px 24px; }
}

/* --- act two opening on the answer ----------------------------------- */

/* The homepage's how-it-works block the right way up: dark on top, evidence
   underneath, the two joined by the same dashed connector the homepage runs
   between its pillars and its act block. */
.pd-answer { margin-top: 22px; padding: 40px 44px 42px; border-radius: var(--hp-radius);
  background: var(--hp-deep); box-shadow: 0 30px 70px rgba(4, 19, 73, 0.30); }
.pd-answer__t { margin: 0; max-width: 24ch; color: #fff; font-size: 36px; font-weight: 700;
  line-height: 1.15; letter-spacing: -1px; }
/* the on-dark gradient: same family as .pd-on-dark, shifted up so every stop
   carries on #02102f */
.pd-answer__t em { font-style: normal; padding-bottom: 2px;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 34%,
    var(--hp-blue-bright) 68%, var(--hp-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.pd-answer__verbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px;
  margin: 28px 0 0; padding: 28px 0 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pd-answer__verbs li { display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; align-items: baseline; }
.pd-answer__n { margin: 0; color: var(--hp-ice); font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pd-answer__verbs h3 { margin: 0; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.pd-answer__verbs li > p:last-child { grid-column: 1 / -1; margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.6; }

/* Three dashed drops, each landing on the centre of the card under the verb
   it leaves. The block's content box and the evidence row share the same
   44px inset and 36px gap, so the column centres line up by construction. */
.pd-drops { position: relative; height: 56px; margin: 0 44px; }
.pd-drops span { position: absolute; top: 0; width: 1px; height: 100%;
  background: repeating-linear-gradient(180deg, #9fb1c6 0 6px, transparent 6px 13px); }
.pd-drops span:nth-child(1) { left: calc((100% - 72px) / 6); }
.pd-drops span:nth-child(2) { left: 50%; }
.pd-drops span:nth-child(3) { left: calc(100% - (100% - 72px) / 6); }

.pd-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px;
  margin: 0 44px; align-items: stretch; }
.pd-ev { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--hp-sh-sm); }
.pd-ev__media { aspect-ratio: 16 / 9; background: var(--hp-deep); }
.pd-ev__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-ev figcaption, .pd-ev__h { margin: 0; padding: 15px 18px 17px; color: var(--hp-ink);
  font-size: 14.5px; font-weight: 600; }
.pd-ev b { margin-right: 10px; color: var(--hp-blue); font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; }
.pd-ev--list { padding: 22px 22px 20px; }
.pd-ev--list .pd-ev__h { padding: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.pd-ev--list ul { display: grid; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none; }
.pd-ev--list li { position: relative; padding-left: 22px; color: var(--hp-body); font-size: 14px; line-height: 1.45; }
.pd-ev--list li::before { content: ""; position: absolute; top: 9px; left: 0; width: 12px; height: 2px;
  border-radius: 2px; background: var(--hp-blue); }

@media (max-width: 940px) {
  .pd-answer { padding: 28px 24px 30px; }
  .pd-answer__t { font-size: 27px; letter-spacing: -0.6px; }
  .pd-answer__verbs { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; padding-top: 22px; }
  /* stacked, the drops would point at nothing: the numbers on the cards carry
     the pairing instead */
  .pd-drops { display: none; }
  .pd-evidence { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 22px 0 0; }
}

/* --- the 03 line carried into the rule ------------------------------- */
/* Two halves meeting at the section boundary. The first hangs off the
   evidence grid (the checks card clips its own overflow, so it cannot carry
   it), the second opens the rule section. Both boxes have the same 44px inset
   and use the same column formula, so the two halves share an x. */
.pd-evidence { position: relative; }
.pd-evidence::after { content: ""; position: absolute; top: 100%;
  left: calc(100% - (100% - 72px) / 6); width: 1px; height: var(--pd-y, 96px);
  background: repeating-linear-gradient(180deg, #9fb1c6 0 6px, transparent 6px 13px); }

.pd-sec--relay { padding-top: 0; }
.pd-relay { position: relative; height: 106px; margin: 0 44px 34px; }
.pd-relay__line { position: absolute; top: 0; left: calc(100% - (100% - 72px) / 6);
  width: 1px; height: 85px;
  background: repeating-linear-gradient(180deg, #9fb1c6 0 6px, transparent 6px 13px); }
.pd-relay__node { position: absolute; top: 85px; left: calc(100% - (100% - 72px) / 6 - 7px);
  width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--hp-blue); background: #fff; }
.pd-relay__label { position: absolute; top: 80px; left: calc(100% - (100% - 72px) / 6 + 20px);
  margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
  color: var(--hp-ink); font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.pd-relay__label b { color: var(--hp-blue); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }

/* --- one scale, three events ----------------------------------------- */
/* This site's bands are the axis, in the page's own rule: line weight for how
   hard the machine intervenes, colour for risk, no filled bars. Positions are
   percentages of 50 m to 0, so (50 - d) / 50: 25 m at 50%, 10 m at 80%, and
   the records at 55.6%, 77.14% and 89.02%. */
.pd-scale { margin: 44px 0 0; padding: 30px 34px 26px; border-radius: var(--hp-radius);
  background: var(--hp-surface); border: 1px solid var(--hp-line); }
.pd-scale__plot { position: relative; height: 186px; }
.pd-scale__key { position: absolute; left: 0; top: 12px; margin: 0;
  color: var(--hp-muted); font-size: 12.5px; line-height: 1.45; }
.pd-scale__key b { display: block; color: var(--hp-ink); font-size: 13px; font-weight: 700; }
/* the thresholds, stopping short of the labels above and the ticks below */
.pd-scale__guide { position: absolute; top: 70px; width: 1px; height: 64px;
  background: repeating-linear-gradient(180deg, #c5cfdc 0 5px, transparent 5px 10px); }
.pd-scale__seg { position: absolute; border-radius: 3px; }
.pd-scale__seg--track { left: 0; width: 50%; top: 116.5px; height: 3px; background: #b6bfcb; }
.pd-scale__seg--slow  { left: 50%; width: 30%; top: 115px; height: 6px; background: var(--pd-warn); }
.pd-scale__seg--stop  { left: 80%; width: 20%; top: 112px; height: 12px; background: var(--pd-crit); }
/* each record: label, stem and marker from one element; the marker takes the
   outcome colour from currentColor */
.pd-scale__ev { position: absolute; top: 10px; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
.pd-scale__ev b { display: block; margin-bottom: 4px; color: var(--hp-ink); font-size: 17px; letter-spacing: -0.3px; }
.pd-scale__ev--warn { color: var(--pd-warn); }
.pd-scale__ev--crit { color: var(--pd-crit); }
.pd-scale__ev::before { content: ""; position: absolute; left: 0; top: 52px; width: 1px; height: 48px; background: #c9d6e4; }
.pd-scale__ev::after { content: ""; position: absolute; left: -8px; top: 100px; width: 16px; height: 16px;
  box-sizing: border-box; border-radius: 50%; border: 3px solid #fff; background: currentColor;
  box-shadow: 0 0 0 1px currentColor; }
.pd-scale__tick { position: absolute; top: 140px; transform: translateX(-50%); color: var(--hp-muted);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-scale__tick[style*="left: 0"] { transform: none; }
.pd-scale__tick--end { transform: translateX(-100%); }
.pd-scale__band { position: absolute; top: 162px; text-align: center; color: var(--hp-muted);
  font-size: 12.5px; font-weight: 600; }
.pd-scale + .pd-recs { margin-top: 26px; }
/* the two stops sit 12% apart; at phone width "Controlled stop" twice runs
   together, so the narrow layout says "Stop". The figure's aria-label and the
   cards below keep the full wording. */
.pd-scale__o--short { display: none; }

@media (max-width: 940px) {
  /* stacked, the line would point at nothing: the label stays as a kicker */
  .pd-evidence::after, .pd-relay__line, .pd-relay__node { display: none; }
  .pd-sec--relay { padding-top: 64px; }
  .pd-relay { height: auto; margin: 0 0 18px; }
  .pd-relay__label { position: static; }
  /* the drawing keeps its proportions and scrolls inside its panel rather
     than crushing its labels together */
  .pd-scale { overflow-x: auto; padding: 24px 22px 20px; }
  .pd-scale__plot { min-width: 760px; }
  /* Opened at its left end, a phone shows an empty grey line and all three
     records sit off to the right. An overflow box with rtl direction starts
     scrolled to its right end instead, so the records are the first thing on
     screen and 50 m is a swipe away. The plot itself stays ltr. */
  .pd-scale { direction: rtl; }
  .pd-scale__plot { direction: ltr; }
  .pd-scale__o { display: none; }
  .pd-scale__o--short { display: inline; }
}

/* --- the records sink into the cab ----------------------------------- */
/* The cab's navy rises behind the lower third of the three records, so the
   evidence sits on the boundary between the rule and the operator's screen.
   The homepage's closing-card move (.hp-ways__card, margin-bottom -70px over
   the CTA), done with three cards: the records carry the z-index and the
   negative margin, the cab carries the extra padding. This is the page's
   second overhang after the hero photograph, and the last one: the close does
   not get one. Over navy the cards need a darker shadow than the blue-tinted
   one they carry on white. */
.pd-sec--sink { padding-bottom: 0; }
.pd-sec--sink .pd-recs { position: relative; z-index: 2; margin-bottom: -200px; }
.pd-sec--sink .pd-rec { box-shadow: 0 24px 60px rgba(2, 12, 38, 0.35), 0 2px 6px rgba(4, 19, 73, 0.08); }
.pd-cab--risen { padding-top: 280px; }

@media (max-width: 940px) {
  /* stacked, only the last record reaches the boundary */
  .pd-sec--sink .pd-recs { margin-bottom: -120px; }
  .pd-cab--risen { padding-top: 184px; }
}

/* --- the close, inside the CTA --------------------------------------- */
/* The proof panel sits beside the ask, so the page goes from the operator's
   screen to the record to the button with no section in between. The fade
   starts on #02102f, the colour at the foot of the cab's gradient, so the join
   between the two dark sections has no edge and the dragline comes up out of
   the navy. The stat carries the on-dark gradient (.pd-d1 em.pd-on-dark),
   because the theme gradient opens on navy and would vanish here. */
.pd-cta__fade { position: absolute; left: 0; right: 0; top: 0; height: 260px;
  background: linear-gradient(180deg, #02102f 0%, rgba(2, 16, 47, 0.86) 34%, rgba(2, 16, 47, 0) 100%); }
.pd-cta--proof .hp-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) 480px;
  gap: 48px 60px; align-items: center; padding-top: 168px; }
.pd-cta__proof { position: relative; padding: 34px 36px 32px; border-radius: var(--hp-radius);
  background: rgba(2, 12, 38, 0.62); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(2, 8, 26, 0.35); }
.pd-cta__proof .pd-lbl { margin-bottom: 14px; color: var(--hp-ice); }
.pd-cta__stat { margin: 0; font-size: 72px; font-weight: 700; line-height: 0.93;
  letter-spacing: -3.4px; font-variant-numeric: tabular-nums;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 34%,
    var(--hp-blue-bright) 68%, var(--hp-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.pd-cta__proof .hp-proof__stat-label { margin-top: 14px; color: #fff; }
.pd-cta__proof .hp-proof__stat-sub { color: rgba(226, 236, 247, 0.66); }
.pd-cta__proof .pd-num { color: #fff; font-weight: 700; }
.pd-cta__proof .pd-creds4 { border-top-color: rgba(255, 255, 255, 0.14); }
.pd-cta__proof .pd-creds4 b { color: var(--hp-ice); }
.pd-cta__proof .pd-creds4 span { color: #fff; }
.pd-cta__link { margin: 22px 0 0; }
.pd-cta__proof .pd-link { color: var(--hp-ice); }

@media (max-width: 1099px) {
  /* the panel drops under the ask; the CTA's own padding at this width is 96px */
  .pd-cta--proof .hp-cta__inner { grid-template-columns: minmax(0, 1fr); padding-top: 120px; }
  .pd-cta__proof { max-width: 560px; }
}

@media (max-width: 700px) {
  .pd-cta__fade { height: 180px; }
  .pd-cta--proof .hp-cta__inner { gap: 40px 0; padding-top: 104px; }
  .pd-cta__proof { padding: 26px 24px 26px; }
  .pd-cta__stat { font-size: 54px; letter-spacing: -2.4px; }
}