/* =========================================================================
   WAYPOINT — "INSTRUMENT"
   -------------------------------------------------------------------------
   ART DIRECTION

   Waypoint's product is knowing what is actually true about an environment.
   So the page behaves like an instrument rather than a brochure: measured
   rules, monospaced annotation that reads as telemetry, cold architectural
   plates treated to one duotone so no image looks borrowed, and exactly one
   large statement per section set in a Didone.

   The register is an annual report, not a SaaS landing page. That is a
   deliberate bet: the buyer is a managing partner or a CFO, and the feeling
   being sold is that a competent institution is holding the rope.

   TYPE: ONE FAMILY, THREE REGISTERS

     A Didone display face was built and removed. It looked expensive and it
     did not match the homepage, and a set of pages that disagree about their
     own typography is worse than a set that is quietly consistent. Switzer
     carries all three registers instead, which is harder and is the right
     answer for this site.

     Display    Switzer 700, very large, tracked to -.034em. Tracking is what
                does the work: a grotesque set tight at 78px reads as
                deliberate, and the same face at default tracking reads as a
                default. One per section.

     Functional Switzer 400-600. Navigation, body, buttons, labels. It never
                tries to be expressive.

     Annotation IBM Plex Mono. Figure numbers, captions, states, eyebrows. The
                instrument's own handwriting, and the only place a second
                family appears at all.

   WHAT CHANGED FROM THE FIRST ATTEMPT, AND WHY

   The first pass built a component system and called it a design. Four pages
   made of the same three blocks in a different order reads as a template,
   because it is one. Templates feel cheap no matter how good the copy is.

   Fixed by adding the two things that were actually missing: a real editorial
   grid that content can break out of, and plates. Every page now also gets one
   structural idea it does not share with the others, so the set cannot read as
   rinse and repeat.
   ========================================================================= */

@font-face {
  font-family: 'Switzer';
  src: url('switzer.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: block;
}

/* Plex is now shipped rather than hoped for. See FONT-LICENSES.txt: the mono
   register stopped being annotation when the Trust Center became a console,
   and a readout that changes width with the reader's operating system is not
   an instrument. `swap`, not `block`: the display face is worth a blocking
   load and the annotation face is not. */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* --- ground -----------------------------------------------------------
     Waypoint's navy, pushed one step deeper for the true ground so that the
     navy itself can act as a raised surface against it. Two darks that are
     close enough to read as one material and far enough apart to build
     depth without a single shadow. */
  --void:   #070C15;
  --ink:    #0B1220;
  --ink-2:  #111A2B;
  --ink-3:  #18243A;
  --line-d: #1B2842;
  --line-d2:#2A3B58;

  /* --- paper ------------------------------------------------------------
     Warm neutrals, not white. A light section should read as paper stock,
     not as an unstyled UI panel. That one degree of warmth against the cold
     navy is most of the perceived production value. */
  --paper:   #F4F2ED;
  --paper-2: #EAE6DE;
  --paper-3: #FDFCFA;
  --line-l:  #D8D2C7;
  --line-l2: #E6E1D8;

  /* --- type -------------------------------------------------------------
     All of these clear 4.5:1 on their intended ground. --on-l3 is the one
     to watch: it is annotation-only and never sets running text. */
  --on-d:   #EEF2F7;
  --on-d2:  #9AA9BD;
  --on-d3:  #7A8AA0;
  --on-l:   #0B1220;
  --on-l2:  #4B5666;
  --on-l3:  #6E7889;

  /* --- accent -----------------------------------------------------------
     One accent, used almost never, which is what makes it land. Green here
     means a thing is true: enforced, current, verified. It is never
     decoration and it never sets a heading. */
  --em:     #10B981;
  --mint:   #34D399;
  --sky:    #0EA5E9;   /* the homepage's current-page underline */
  --em-d:   #04724D;
  --amber:  #B45309;
  --amber-l:#FBBF24;

  --sans:    'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* One family, as on the homepage. The display register is built from scale,
     weight and tracking rather than from a second typeface. Switzer is variable
     across 100-900, which is what makes that possible: a statement at 78px in
     the same weight as a 16px paragraph would be a wall, so display steps UP in
     size and DOWN in optical weight relative to how bold it looks small. */
  --display: 'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:    'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* --- measure ----------------------------------------------------------
     A 12-column editorial grid with a real gutter. The page is built on it,
     and the interesting moments are the ones that break it. */
  --gut:  clamp(20px, 4.2vw, 76px);
  --max:  1480px;
  --col-gap: clamp(16px, 1.6vw, 30px);
  --hdr:  64px;   /* matches the homepage header exactly; see the header block */
  --r:    2px;

  /* The settle. Decelerates hard and late, so a plate arrives with weight
     instead of easing politely into place. */
  --settle: cubic-bezier(.16, .84, .28, 1);
}

/* ------------------------------------------------------------- reset ---- */

*, *::before, *::after { box-sizing: border-box; }
/* `clip`, matching the homepage, and not `hidden`.
 *
 * Every page with a full-bleed plate overflows the document by a few pixels,
 * because the plate is 100vw and 100vw includes the scrollbar gutter. body
 * already carried overflow-x:hidden, which hid the symptom on body but left
 * the documentElement reporting an overflow, and the homepage had the html
 * rule while the shared stylesheet did not. One page in the set behaving
 * differently from the other five is how a layout bug survives five reviews.
 *
 * clip rather than hidden matters: overflow:hidden on one axis computes the
 * other axis to auto and makes the element a scroll container, which takes
 * the scrolling away from the window. That is a real failure mode on this
 * site and it is not worth re-introducing to tidy up three pixels. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body.wpx {
  margin: 0; background: var(--void); color: var(--on-d);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-top: var(--hdr); overflow-x: hidden;
}
body.wpx img, body.wpx svg { max-width: 100%; display: block; }
body.wpx [id] { scroll-margin-top: calc(var(--hdr) + 24px); }
body.wpx :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* .wpx-skip moved to assets/header.css; the header emits it. */

/* -------------------------------------------------------------- grid ---- */

.wpx-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* The editorial grid. Children place themselves on it by class, which is what
   lets a caption hang in the margin beside a body column instead of sitting
   obediently above it. */
.wpx-g {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
/* grid-column-END, not the grid-column shorthand.
 *
 * `grid-column: span 7` expands to start:span 7 / end:auto. Adding
 * `grid-column-start: 6` then overrides the start and leaves the end at auto,
 * which is a single track: the element silently collapses to one column wide.
 * That is what turned a lede into a column of single words. Setting only the
 * end lets span and start be composed the way the class names imply. */
.c1{grid-column-end:span 1}   .c2{grid-column-end:span 2}   .c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}   .c5{grid-column-end:span 5}   .c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}   .c8{grid-column-end:span 8}   .c9{grid-column-end:span 9}
.c10{grid-column-end:span 10} .c11{grid-column-end:span 11} .c12{grid-column-end:span 12}
.s2{grid-column-start:2}  .s3{grid-column-start:3}  .s4{grid-column-start:4}
.s5{grid-column-start:5}  .s6{grid-column-start:6}  .s7{grid-column-start:7}
.s8{grid-column-start:8}

@media (max-width: 1000px) {
  .wpx-g > * { grid-column-start: 1 !important; grid-column-end: -1 !important; }
}

.wpx-sec { padding: clamp(72px, 10vw, 168px) 0; position: relative; }
.wpx-sec--tight { padding: clamp(44px, 6vw, 92px) 0; }
.wpx-sec--d  { background: var(--void);    color: var(--on-d); }
.wpx-sec--d2 { background: var(--ink);     color: var(--on-d); }
.wpx-sec--d3 { background: var(--ink-2);   color: var(--on-d); }
.wpx-sec--l  { background: var(--paper);   color: var(--on-l); }
.wpx-sec--l2 { background: var(--paper-2); color: var(--on-l); }

/* --------------------------------------------------------- typography --- */

/* The display face. One of these per section, no more. */
.wpx-display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 1.015;
  /* -.034em, not the -.02em a grotesque takes at body size. Optical tracking
     has to tighten as size goes up or the letters drift apart and the line
     stops reading as one object. This single value is most of the difference
     between "a big heading" and "a statement". */
  letter-spacing: -.034em;
  margin: 0 0 24px;
  max-width: 15ch;
}
.wpx-display--sm { font-size: clamp(28px, 3.5vw, 50px); letter-spacing: -.028em; max-width: 20ch; }
/* Where the source copy sets a phrase apart, it drops in weight rather than
   changing family. Lighter at large size reads as more considered, not less. */
.wpx-display em { font-style: normal; font-weight: 300; }

/* The functional heading. Grotesque, because it is a label for a block of
   information rather than a statement. */
.wpx-h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.14; letter-spacing: -.021em; margin: 0 0 14px; max-width: 24ch;
}
.wpx-h3 {
  font-size: clamp(16.5px, 1.35vw, 19px); font-weight: 600;
  line-height: 1.28; letter-spacing: -.011em; margin: 0 0 7px;
}

.wpx-lede {
  font-size: clamp(16px, 1.42vw, 19.5px); line-height: 1.56;
  color: var(--on-d2); margin: 0 0 26px; max-width: 58ch;
}
.wpx-sec--l .wpx-lede, .wpx-sec--l2 .wpx-lede { color: var(--on-l2); }

.wpx-body { font-size: 15.5px; line-height: 1.62; color: var(--on-d2); margin: 0; max-width: 62ch; }
/* ADDED 1 OCTOBER 2026. .wpx-body carries no margin so a single paragraph sits
   tight under its heading, which is right. But two of them in a row then ran
   together into one block with no paragraph break at all: on the Partners page
   the second paragraph of section 02 began on the line after the first ended,
   and read as a run-on. The gap belongs between siblings, not on every
   paragraph, so it is set here and a lone paragraph is unaffected. */
.wpx-body + .wpx-body, .wpx-lede + .wpx-body { margin-top: 1.05em; }
.wpx-sec--l .wpx-body, .wpx-sec--l2 .wpx-body { color: var(--on-l2); }

/* --- annotation. The instrument's handwriting. ------------------------- */

.wpx-note {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .17em;
  text-transform: uppercase; font-weight: 500; color: var(--on-d3);
}
.wpx-sec--l .wpx-note, .wpx-sec--l2 .wpx-note { color: var(--on-l3); }

/* The eyebrow is a measurement mark, not a badge. A rule, a figure number,
   a label, in that order, the way a plate is captioned in a report. */
.wpx-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .19em;
  text-transform: uppercase; font-weight: 500; color: var(--mint);
  margin: 0 0 20px; display: flex; align-items: center; gap: 13px;
}
.wpx-sec--l .wpx-eyebrow, .wpx-sec--l2 .wpx-eyebrow { color: var(--em-d); }
.wpx-eyebrow::before { content: ''; width: 34px; height: 1px; background: currentColor; flex: none; }

/* ======================================================= THE PLATES ===== */
/*
   The thing the first pass was missing entirely.

   A plate is a photograph or a drawn field presented as a figure: numbered,
   captioned in the margin, and settled onto the page rather than dropped.

   UNIFORM TREATMENT IS THE WHOLE TRICK. Stock photography looks like stock
   photography because every image on the page came from a different camera,
   a different day and a different colour grade. Forcing all of them through
   one duotone makes them look commissioned, because a set that consistent
   could only have been made on purpose. The treatment is: desaturate, raise
   contrast, cool the shadows to the navy, and let a little of the ground
   through the highlights.
*/

.wpx-plate { position: relative; margin: 0; }

.wpx-plate__frame {
  position: relative; overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: var(--plate-ar, 16 / 9);
}
.wpx-plate__frame > img,
.wpx-plate__frame > svg,
.wpx-plate__frame > canvas {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* The grade. Applied to the media, so a drawn field and a photograph end up
   in the same colour world without either being authored for the other. */
.wpx-plate--graded .wpx-plate__frame > img {
  filter: grayscale(1) contrast(1.16) brightness(.82);
}
.wpx-plate--graded .wpx-plate__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,12,21,.10), rgba(7,12,21,.62)),
              radial-gradient(120% 90% at 50% 0%, rgba(52,211,153,.07), transparent 60%);
  mix-blend-mode: multiply;
}
.wpx-plate--graded .wpx-plate__frame::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #0B1220; mix-blend-mode: color; opacity: .55;
}

/* Full-bleed: escapes the wrapper to the window edges. This is the move that
   most separates an editorial page from a page of boxes.

   Its caption has to be pulled back onto the text measure by hand. A bleed
   plate is the one element that leaves the wrapper, so it is also the one whose
   caption would otherwise start hard against the window edge, which reads as a
   layout accident rather than a margin note. */
.wpx-plate--bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.wpx-plate--bleed .wpx-plate__cap {
  max-width: var(--max); margin-left: auto; margin-right: auto;
  padding-left: var(--gut); padding-right: var(--gut); padding-top: 14px;
  box-sizing: border-box;
}
.wpx-plate--bleed .wpx-plate__cap { border-top: 0; margin-top: 0; }

/* The caption rail. Sits under the plate, hung on the same grid, in mono,
   with the figure number in the margin. */
.wpx-plate__cap {
  display: grid; grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px; align-items: start; padding-top: 14px;
  border-top: 1px solid var(--line-d); margin-top: 14px;
}
.wpx-sec--l .wpx-plate__cap, .wpx-sec--l2 .wpx-plate__cap { border-top-color: var(--line-l); }
.wpx-plate__fig {
  font-family: var(--mono); font-size: 10px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--mint); font-weight: 500;
}
.wpx-sec--l .wpx-plate__fig, .wpx-sec--l2 .wpx-plate__fig { color: var(--em-d); }
.wpx-plate__txt {
  font-size: 13px; line-height: 1.5; color: var(--on-d3); max-width: 54ch; margin: 0;
}
.wpx-sec--l .wpx-plate__txt, .wpx-sec--l2 .wpx-plate__txt { color: var(--on-l3); }
.wpx-plate__credit { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; opacity: .62; }

/* A plate the headline sits on top of. */
.wpx-plate--under { position: absolute; inset: 0; z-index: 0; }
.wpx-plate--under .wpx-plate__frame { height: 100%; aspect-ratio: auto; }
.wpx-over { position: relative; z-index: 2; }

/* ========================================================= THE SETTLE === */
/*
   "Settle in": a plate arrives slightly too large and slightly too high, then
   comes to rest. Nothing slides in from the side, nothing fades up from
   nowhere. It is the motion of something being placed on a surface.

   Three details that make it read as weight rather than as an effect:
   the scale change is tiny (1.045, not 1.2); the transform decelerates much
   later than the opacity, so the piece is fully visible while it is still
   moving; and the caption rule draws itself afterwards rather than with it.

   Everything is opacity and transform only, so it stays on the compositor.
*/

/* ==========================================================================
 * THE OPT-IN GATE. READ THIS BEFORE CHANGING ANY SELECTOR BELOW.
 * ==========================================================================
 *
 * Every rule that hides something is scoped to `html.wpx-anim`, and only the
 * settle script adds that class, and it adds it only after it has checked
 * that it can actually finish the job: IntersectionObserver exists, and the
 * reader has not asked for reduced motion.
 *
 * This inversion exists because the previous arrangement took the live site
 * down. Content defaulted to opacity 0 and depended on JavaScript to reveal
 * it. There was a `.no-js` escape hatch, but it only covered the case where
 * the script never ran at all. It did not cover the case that actually
 * happened in production, which was the script running, removing `no-js`,
 * and then the observer never firing. Every rebuilt page on wpta.io rendered
 * as a dark empty rectangle in front of the client.
 *
 * The rule now is simple and it is not negotiable: the page is complete with
 * no JavaScript, no observer, and no animation. Motion is added to a page
 * that already works. It is never the thing that makes a page work.
 * ------------------------------------------------------------------------ */

.wpx-anim .settle {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(1.045);
  transition:
    opacity 620ms var(--settle) var(--settle-delay, 0ms),
    transform 1180ms var(--settle) var(--settle-delay, 0ms);
  will-change: opacity, transform;
}
.wpx-anim .settle.is-set { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

/* The frame overshoots inside its own overflow, so the image itself settles
   within a fixed crop and the page never reflows while it moves. */
.wpx-anim .settle .wpx-plate__frame > img,
.wpx-anim .settle .wpx-plate__frame > svg {
  transform: scale(1.07);
  transition: transform 1500ms var(--settle) var(--settle-delay, 0ms);
}
.wpx-anim .settle.is-set .wpx-plate__frame > img,
.wpx-anim .settle.is-set .wpx-plate__frame > svg { transform: scale(1); }

/* The caption rule draws in after the plate has landed. */
.wpx-anim .settle .wpx-plate__cap { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--settle) calc(var(--settle-delay, 0ms) + 380ms); }
.wpx-anim .settle.is-set .wpx-plate__cap { clip-path: inset(0 0 0 0); }

/* Text can settle too, more quietly, and staggered. */
.wpx-anim .settle-t { opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity 560ms var(--settle) var(--settle-delay, 0ms),
              transform 760ms var(--settle) var(--settle-delay, 0ms); }
.wpx-anim .settle-t.is-set { opacity: 1; transform: none; }

/* Motion is a preference, not a decision we get to make for someone. With it
   reduced, everything is simply present: no transition, no transform, no
   clip. The page must be complete without a single frame of animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .settle, .settle-t,
  .settle .wpx-plate__frame > img, .settle .wpx-plate__frame > svg {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .settle .wpx-plate__cap { clip-path: none !important; transition: none !important; }
}

/* The .no-js hatch is gone because it is no longer load-bearing, and a hatch
   that is not load-bearing is a thing people trust by mistake. With the gate
   above, a page with no JavaScript never gets .wpx-anim, so nothing is ever
   hidden and there is nothing to escape from. The class is still written on
   <html> and still removed by the script; it just no longer decides whether
   anyone can read the page. */

/* ------------------------------------------------------------ buttons --- */

/* .wpx-btn moved to assets/header.css, which the header's CTA needs and which
 * every page using the header already loads. Kept there rather than duplicated
 * here for the same reason as the bar itself. */

.wpx-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.wpx-tlink {
  display: inline-flex; align-items: center; gap: 8px; color: var(--mint);
  text-decoration: none; font-weight: 600; font-size: 14px;
}
.wpx-sec--l .wpx-tlink, .wpx-sec--l2 .wpx-tlink { color: var(--em-d); }
.wpx-tlink span { transition: transform .22s var(--settle); }
.wpx-tlink:hover span { transform: translateX(4px); }

/* ------------------------------------------------------- the register --- */
/*
   The inventory list, rebuilt. Hanging numerals in the margin, the way a
   schedule is set in a report. This is what replaced the identical card grid
   that appeared on every page of the first attempt.
*/

.wpx-reg { border-top: 1px solid var(--line-d); margin: 0; padding: 0; list-style: none; }
.wpx-sec--l .wpx-reg, .wpx-sec--l2 .wpx-reg { border-top-color: var(--line-l); }

.wpx-reg li {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 40px); align-items: baseline;
  padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--line-d);
  transition: background .3s ease;
}
.wpx-sec--l .wpx-reg li, .wpx-sec--l2 .wpx-reg li { border-bottom-color: var(--line-l); }
.wpx-reg__n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  color: var(--on-d3); font-weight: 500; padding-top: 4px;
}
.wpx-sec--l .wpx-reg__n, .wpx-sec--l2 .wpx-reg__n { color: var(--on-l3); }
.wpx-reg__t { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.014em; margin: 0 0 6px; }
.wpx-reg__s { font-size: 14.5px; line-height: 1.55; color: var(--on-d2); margin: 0; max-width: 68ch; }
.wpx-sec--l .wpx-reg__s, .wpx-sec--l2 .wpx-reg__s { color: var(--on-l2); }

@media (max-width: 620px) {
  .wpx-reg li { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .wpx-reg__n { padding-top: 0; }
}

.wpx-state {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 500; white-space: nowrap;
}
.wpx-state::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: currentColor; flex: none; }
.wpx-state--ok { color: var(--em); }
.wpx-state--watch { color: var(--on-d3); }
.wpx-sec--l .wpx-state--ok, .wpx-sec--l2 .wpx-state--ok { color: var(--em-d); }
.wpx-sec--l .wpx-state--watch, .wpx-sec--l2 .wpx-state--watch { color: var(--on-l3); }

/* -------------------------------------------------------------- cards --- */

.wpx-card {
  border: 1px solid var(--line-d); border-radius: var(--r);
  background: var(--ink); padding: clamp(22px, 2vw, 32px);
  display: flex; flex-direction: column; gap: 9px;
}
.wpx-sec--l .wpx-card, .wpx-sec--l2 .wpx-card { border-color: var(--line-l); background: var(--paper-3); }
.wpx-card p { margin: 0; font-size: 14.5px; line-height: 1.58; color: var(--on-d2); }
.wpx-sec--l .wpx-card p, .wpx-sec--l2 .wpx-card p { color: var(--on-l2); }
a.wpx-card { color: inherit; text-decoration: none; transition: border-color .18s ease; }
a.wpx-card:hover { border-color: var(--line-d2); }
.wpx-sec--l a.wpx-card:hover, .wpx-sec--l2 a.wpx-card:hover { border-color: var(--on-l3); }

/* ------------------------------------------------------------ pullout --- */

.wpx-pull { border-left: 1px solid var(--mint); padding: 6px 0 6px 26px; margin: 0; max-width: 40ch; }
.wpx-sec--l .wpx-pull, .wpx-sec--l2 .wpx-pull { border-left-color: var(--em-d); }
.wpx-pull p {
  font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.34; letter-spacing: -.02em; margin: 0;
}

/* --------------------------------------------------------------- misc --- */

.wpx-stats { display: flex; flex-wrap: wrap; gap: clamp(26px, 4.4vw, 72px); margin-top: 38px; }
.wpx-stat__n { font-family: var(--display); font-weight: 700; font-size: clamp(27px, 2.8vw, 40px); line-height: 1; letter-spacing: -.03em; }
.wpx-stat__l { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--on-d2); margin-top: 11px; display: block; }
.wpx-sec--l .wpx-stat__l, .wpx-sec--l2 .wpx-stat__l { color: var(--on-l2); }

.wpx-ticks, .wpx-bullets { list-style: none; margin: 20px 0 0; padding: 0; }
.wpx-ticks li, .wpx-bullets li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.52; color: var(--on-d2);
}
.wpx-sec--l .wpx-ticks li, .wpx-sec--l2 .wpx-ticks li,
.wpx-sec--l .wpx-bullets li, .wpx-sec--l2 .wpx-bullets li { color: var(--on-l2); }
.wpx-ticks li::before {
  content: ''; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px;
  border-left: 1.5px solid var(--mint); border-bottom: 1.5px solid var(--mint); transform: rotate(-45deg);
}
.wpx-sec--l .wpx-ticks li::before, .wpx-sec--l2 .wpx-ticks li::before { border-color: var(--em-d); }
.wpx-bullets li::before {
  content: ''; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px;
  border-radius: 1px; background: var(--on-d3);
}
.wpx-sec--l .wpx-bullets li::before, .wpx-sec--l2 .wpx-bullets li::before { background: var(--on-l3); }

/* A hairline that runs the full measure, used to separate movements. */
.wpx-rule { height: 1px; background: var(--line-d); border: 0; margin: 0; }
.wpx-sec--l .wpx-rule, .wpx-sec--l2 .wpx-rule { background: var(--line-l); }

/* ======================================================= header/footer === */
/* THE HEADER MOVED TO assets/header.css.
 *
 * It is loaded by every page that calls qntl_wpx_header(), which now includes
 * the homepage. It lives in its own file precisely so the homepage can have it
 * without also taking this sheet's global element rules, which collide with the
 * homepage's own. Do not reintroduce header rules here: a second copy is how
 * the two bars drifted apart in the first place. */

.wpx-ft { background: var(--void); border-top: 1px solid var(--line-d); padding: clamp(56px, 7vw, 96px) 0 34px; }
.wpx-ft__top { display: grid; gap: clamp(30px, 4vw, 60px); grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) { .wpx-ft__top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .wpx-ft__top { grid-template-columns: minmax(0,1fr); } }
.wpx-ft__mark img { height: 19px; width: auto; margin-bottom: 20px; }
.wpx-ft__blurb { font-size: 14px; line-height: 1.62; color: var(--on-d2); margin: 0; max-width: 42ch; }
.wpx-ft h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--on-d3); font-weight: 500; margin: 0 0 16px; }
.wpx-ft ul { list-style: none; margin: 0; padding: 0; }
.wpx-ft li { margin-bottom: 11px; }
.wpx-ft li a { color: var(--on-d2); text-decoration: none; font-size: 14px; transition: color .16s ease; }
.wpx-ft li a:hover { color: var(--on-d); }
.wpx-ft__bar {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line-d);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--on-d3);
}

/* ---- the service table ----------------------------------------------------
   Three columns: what it is called, what the client actually receives, how it
   bills. Hairlines only. A priced service described in a filled box reads as a
   pricing card, and this page deliberately does not publish partner prices. */
.wpx-svc { width: 100%; border-collapse: collapse; margin-top: clamp(26px, 3vw, 44px); }
.wpx-svc th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 500; text-align: left; padding: 0 24px 12px 0; border-bottom: 1px solid var(--line-l);
  color: var(--on-l3); vertical-align: bottom;
}
.wpx-svc td { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.wpx-svc td:last-child, .wpx-svc th:last-child { padding-right: 0; }
.wpx-svc .wpx-svc__n { font-size: 17px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; }
.wpx-svc .wpx-svc__d { font-size: 15px; line-height: 1.6; color: var(--on-l2); }
.wpx-svc .wpx-svc__b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--on-l3);
  white-space: nowrap; text-align: right;
}
.wpx-sec--d .wpx-svc th, .wpx-sec--d2 .wpx-svc th, .wpx-sec--d3 .wpx-svc th { color: var(--on-d3); border-bottom-color: var(--line-d); }
.wpx-sec--d .wpx-svc td, .wpx-sec--d2 .wpx-svc td, .wpx-sec--d3 .wpx-svc td { border-bottom-color: var(--line-d); }
.wpx-sec--d .wpx-svc__d, .wpx-sec--d2 .wpx-svc__d, .wpx-sec--d3 .wpx-svc__d { color: var(--on-d2); }
.wpx-sec--d .wpx-svc__b, .wpx-sec--d2 .wpx-svc__b, .wpx-sec--d3 .wpx-svc__b { color: var(--on-d3); }
@media (max-width: 760px) {
  .wpx-svc, .wpx-svc tbody, .wpx-svc tr, .wpx-svc td { display: block; width: 100%; }
  .wpx-svc thead { display: none; }
  .wpx-svc tr { border-bottom: 1px solid var(--line-l); padding: 20px 0; }
  .wpx-svc td { border-bottom: 0; padding: 0 0 7px; }
  .wpx-svc .wpx-svc__b { text-align: left; padding-top: 4px; }
}

/* ---- definition list ------------------------------------------------------
   A bold lead-in followed by the sentence that qualifies it. Used wherever a
   claim needs its own limit attached, which on this site is most of them. */
.wpx-defs { list-style: none; margin: clamp(24px, 3vw, 38px) 0 0; padding: 0; border-top: 1px solid var(--line-l); }
.wpx-defs li {
  padding: 17px 0 17px 22px; border-bottom: 1px solid var(--line-l); position: relative;
  font-size: 16px; line-height: 1.6; color: var(--on-l2); max-width: 74ch;
}
.wpx-defs li::before {
  content: ''; position: absolute; left: 0; top: 26px;
  width: 6px; height: 6px; border-radius: 1px; background: var(--em-d);
}
.wpx-defs b, .wpx-defs strong { color: var(--on-l); font-weight: 600; }
.wpx-sec--d .wpx-defs, .wpx-sec--d2 .wpx-defs, .wpx-sec--d3 .wpx-defs { border-top-color: var(--line-d); }
.wpx-sec--d .wpx-defs li, .wpx-sec--d2 .wpx-defs li, .wpx-sec--d3 .wpx-defs li { border-bottom-color: var(--line-d); color: var(--on-d2); }
.wpx-sec--d .wpx-defs li::before, .wpx-sec--d2 .wpx-defs li::before, .wpx-sec--d3 .wpx-defs li::before { background: var(--mint); }
.wpx-sec--d .wpx-defs b, .wpx-sec--d2 .wpx-defs b, .wpx-sec--d3 .wpx-defs b { color: var(--on-d); }

/* ---- the qualifier --------------------------------------------------------
   The sentence that limits a claim: the condition on "two weeks", the note on
   where the margin goes. These must be READ, which rules out .wpx-note, whose
   uppercase mono is built for three-word labels and turns a two-line sentence
   into shouting. Quiet, sentence case, marked as subordinate by a hairline
   rather than by typography. */
.wpx-qual {
  margin: 20px 0 0; padding-left: 16px; border-left: 1px solid var(--line-l);
  font-size: 14.5px; line-height: 1.6; color: var(--on-l3); max-width: 64ch;
}
.wpx-sec--d .wpx-qual, .wpx-sec--d2 .wpx-qual, .wpx-sec--d3 .wpx-qual {
  border-left-color: var(--line-d); color: var(--on-d3);
}

/* ---- questions ------------------------------------------------------------
   Open, not an accordion. A question worth answering is worth reading without
   a click, and a partner scanning for the one that worries them should be able
   to find it with the page open. */
.wpx-qa { margin-top: clamp(26px, 3vw, 44px); border-top: 1px solid var(--line-l); }
.wpx-qa__i { padding: clamp(22px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line-l); }
.wpx-qa__q { margin: 0 0 9px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.015em; color: var(--on-l); }
.wpx-qa__a { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--on-l2); max-width: 76ch; }
.wpx-sec--d .wpx-qa, .wpx-sec--d2 .wpx-qa { border-top-color: var(--line-d); }
.wpx-sec--d .wpx-qa__i, .wpx-sec--d2 .wpx-qa__i { border-bottom-color: var(--line-d); }
.wpx-sec--d .wpx-qa__q, .wpx-sec--d2 .wpx-qa__q { color: var(--on-d); }
.wpx-sec--d .wpx-qa__a, .wpx-sec--d2 .wpx-qa__a { color: var(--on-d2); }

/* ============================================== PER-PAGE STRUCTURES ====== */
/*
   One structural idea per page, so the set reads as a document with chapters
   rather than one template run four times. Each of these is used on exactly
   one page and is named for the page that owns it.

     WaypointX        the register     hanging numerals, no boxes
     Partners         the ledger       oversized numerals, half-bleed plate
     Fractional CISO  the margin       a label pinned while its content scrolls
     Fractional CTO   the refusal      one statement, enormous air
*/

/* --- PARTNERS: the ledger --------------------------------------------- */
/*
   Channel economics set the way a term sheet is set. The numeral is large
   enough to be a design element rather than a bullet, because on this page the
   count IS the argument: three ways the revenue arrives.
*/
.wpx-ledger { border-top: 1px solid var(--line-d); }
.wpx-sec--l .wpx-ledger, .wpx-sec--l2 .wpx-ledger { border-top-color: var(--line-l); }
.wpx-ledger__row {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px); align-items: start;
  padding: clamp(28px, 3.4vw, 52px) 0; border-bottom: 1px solid var(--line-d);
}
.wpx-sec--l .wpx-ledger__row, .wpx-sec--l2 .wpx-ledger__row { border-bottom-color: var(--line-l); }
.wpx-ledger__n {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(42px, 5vw, 78px); line-height: .84; letter-spacing: -.045em;
  color: var(--on-d3); opacity: .5;
}
.wpx-sec--l .wpx-ledger__n, .wpx-sec--l2 .wpx-ledger__n { color: var(--on-l3); opacity: .38; }
.wpx-ledger__t { font-size: clamp(19px, 1.9vw, 25px); font-weight: 700; letter-spacing: -.022em; margin: 0 0 10px; }
@media (max-width: 760px) { .wpx-ledger__row { grid-template-columns: minmax(0,1fr); gap: 10px; } }

/* A plate that bleeds off one edge only. Asymmetric by construction: it says
   the page continues past the window, which a centred image never says. */
/* FIXED 1 OCTOBER 2026. The old rule was `margin-right: calc(50% - 50vw)`,
   copied from .wpx-plate--bleed above. That works only where the plate IS the
   wrap's own child, so its 50% is the page's centre. These two are used inside
   a GRID COLUMN, where 50% is the centre of that column, and the rule overshot
   by every column to the plate's left: on the Partners hero it pushed the plate
   619px past the window at 1777, which made it 1157px wide instead of 538, blew
   the hero out to 1259px tall, and cut 396px off its own caption. It never
   showed up as a scrollbar because html has overflow-x: clip.

   What actually has to be covered is the wrap's own right inset, which is its
   gutter plus whatever auto margin it has once the viewport passes --max. The
   plate must be the grid's outermost column on that side for this to hold. */
.wpx-plate--bleed-r { margin-right: calc(-1 * (var(--gut) + max(0px, (100vw - var(--max)) / 2))); }
.wpx-plate--bleed-l { margin-left:  calc(-1 * (var(--gut) + max(0px, (100vw - var(--max)) / 2))); }

/* The picture leaves the grid; its caption does not. Same reasoning as the
   full-bleed plate's caption rule: a caption starting hard against the window
   edge reads as an accident. */
.wpx-plate--bleed-r .wpx-plate__cap { margin-right: calc(var(--gut) + max(0px, (100vw - var(--max)) / 2)); }
.wpx-plate--bleed-l .wpx-plate__cap { margin-left:  calc(var(--gut) + max(0px, (100vw - var(--max)) / 2)); }

/* ---- a matched pair of columns --------------------------------------------
   Two columns whose headings are different lengths and whose lists must still
   start on the same line. Without this the shorter heading lets its list ride
   up, and every hairline across the pair is offset from its neighbour by the
   height of one line of display type, which is the most legible kind of
   misalignment there is.

   Subgrid does it with no measurement: the pair owns the two rows, each column
   adopts them. Where subgrid is missing the columns simply stack their own
   content as before, which is the behaviour this replaces, so nothing breaks. */
.wpx-pair { grid-template-rows: auto 1fr; }
.wpx-pair__col { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
@supports not (grid-template-rows: subgrid) {
  .wpx-pair__col { display: block; }
}
@media (max-width: 860px) {
  .wpx-pair__col { display: block; }
}

/* --- FRACTIONAL CISO: the margin -------------------------------------- */
/*
   The longest page in the set, and the one whose reader is furthest from
   deciding. So its label stays pinned in the margin while the content scrolls
   past it: you always know which part of the argument you are in. It is the
   behaviour of a well-set dossier, and it costs one property.
*/
.wpx-margin { position: sticky; top: calc(var(--hdr) + 54px); align-self: start; }
@media (max-width: 1000px) { .wpx-margin { position: static; } }

/* The timeline as a measured rail. Stages hang off a single vertical line with
   their own tick, which is what a schedule looks like when it is drawn rather
   than boxed. */
.wpx-rail { position: relative; margin: 0; padding: 0 0 0 clamp(22px, 2.6vw, 42px); list-style: none; }
.wpx-rail::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-d); }
.wpx-sec--l .wpx-rail::before, .wpx-sec--l2 .wpx-rail::before { background: var(--line-l); }
.wpx-rail li { position: relative; padding: 0 0 clamp(28px, 3vw, 46px); }
.wpx-rail li:last-child { padding-bottom: 0; }
.wpx-rail li::before {
  content: ''; position: absolute; left: calc(-1 * clamp(22px, 2.6vw, 42px)); top: 9px;
  width: 9px; height: 1px; background: var(--mint);
}
.wpx-sec--l .wpx-rail li::before, .wpx-sec--l2 .wpx-rail li::before { background: var(--em-d); }
.wpx-rail__when {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mint); font-weight: 500; display: block; margin-bottom: 9px;
}
.wpx-sec--l .wpx-rail__when, .wpx-sec--l2 .wpx-rail__when { color: var(--em-d); }
.wpx-rail__t { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.014em; margin: 0 0 7px; }
.wpx-rail__s { font-size: 14.5px; line-height: 1.55; color: var(--on-d2); margin: 0; max-width: 62ch; }
.wpx-sec--l .wpx-rail__s, .wpx-sec--l2 .wpx-rail__s { color: var(--on-l2); }

/* --- FRACTIONAL CTO: the refusal -------------------------------------- */
/*
   The shortest page, and the one with the best passage in the whole set:
   three things Waypoint will not do. On a page about clarity, the strongest
   design decision is to give that passage a whole screen and nothing else.
   Restraint here is the argument, not an absence of one.
*/
.wpx-refusal { padding: clamp(96px, 15vw, 230px) 0; }
/* No max-width on the list. `ch` resolves against the element's OWN font-size,
   and the list inherits 16px while its items are set at 70px, so a measure
   declared here would be roughly a quarter of the intended width and every line
   would wrap. The measure belongs on the item, where the display size applies. */
.wpx-refusal__list { list-style: none; margin: 0; padding: 0; }
.wpx-refusal__list li {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 5vw, 70px); line-height: 1.06; letter-spacing: -.034em;
  padding: clamp(14px, 1.6vw, 24px) 0; border-bottom: 1px solid var(--line-d);
  max-width: 24ch;
}
.wpx-refusal__list li:first-child { border-top: 1px solid var(--line-d); }
.wpx-sec--l .wpx-refusal__list li, .wpx-sec--l2 .wpx-refusal__list li { border-color: var(--line-l); }

/* =========================================================================
   TRUST CENTER — "THE CONSOLE"
   -------------------------------------------------------------------------
   WHAT CHANGED AND WHY

   The first build of this page was an essay. Three registers, held against
   not-held against inherited, set at one weight, no cards anywhere. The
   argument was right and the page was quiet, and quiet was the wrong answer
   to the brief: a firm selling continuous verification should not describe
   continuous verification in a magazine spread. It should run one on the
   page and let the reader watch.

   So the top third of this page is now an instrument. It reports a real
   reading from a real feed, states when that reading was taken, states how
   old it is to the second, states when the next one is due, and publishes
   the freshness rule it holds itself to with its own current position marked
   on the scale. Nothing on it is invented. Every figure traces to the
   posture object WaypointX publishes, and when there is no reading the whole
   apparatus says so instead of drawing an empty dial.

   THE ONE PIECE OF THEATER THAT WAS BUILT AND THROWN AWAY

   The score counted up from zero on page load. It looked expensive. It also
   meant that for nine hundred milliseconds the most prominent number on
   Waypoint's trust page was false, and on this page of all pages that is not
   a trade worth making. The gauge fill animates instead, because a bar that
   is still growing is obviously still growing, while a numeral reading 43 is
   just a numeral reading 43. The motion that survived is motion that cannot
   misreport: fills, sweeps, a pulse along the data path, and clocks that
   tick because time is in fact passing.

   MOTION INVENTORY, so the next person can find all of it
     .wpx-live      dot, 2.4s pulse            — liveness
     .wpx-gauge     fill, 1.1s settle on set   — the reading
     .wpx-chain     pulse travelling the rule  — the data path
     .wpx-sweep     14s scanline over a plate  — the instrument, running
   All four are off under prefers-reduced-motion, at the end of this block.
   ========================================================================= */

/* Tabular numerals wherever a figure has to hold its column. Plex is
   monospaced so its digits already are, but Switzer's are not, and the
   readout mixes the two. */
.wpx-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ------------------------------------------------------- the surface ---- */

.wpx-con { background: var(--void); position: relative; overflow: hidden;
  padding: 0 0 clamp(52px, 6vw, 96px); }

/* Graph paper, at the threshold of visibility, masked so it never reaches an
   edge and reads as a printed ground rather than a CSS pattern. */
.wpx-con::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(154,169,189,.085) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg,  rgba(154,169,189,.085) 0 1px, transparent 1px 74px);
  -webkit-mask-image: radial-gradient(135% 105% at 50% 0%, #000 26%, transparent 84%);
          mask-image: radial-gradient(135% 105% at 50% 0%, #000 26%, transparent 84%);
}
.wpx-con > * { position: relative; z-index: 1; }

/* ---------------------------------------------------- the status rail ---- */

.wpx-rail {
  border-bottom: 1px solid var(--line-d);
  background: rgba(7,12,21,.7);
}
.wpx-rail__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px clamp(14px, 2vw, 26px);
  padding: 11px 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase;
}
.wpx-rail__i { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wpx-rail__k { color: var(--on-d3); }
.wpx-rail__v { color: var(--on-d2); font-weight: 500;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* Hairline dividers, not slash glyphs.
 *
 * The first version separated the readings with a '/' from a ::before and a
 * negative margin to pull it into the flex gap. It produced an orphan slash
 * in front of the right-aligned liveness item and sat a hair off centre in
 * the gap at every breakpoint, because the negative margin and the flex gap
 * were two different clamps being asked to agree. A border is one rule and
 * it cannot drift. */
.wpx-rail__i + .wpx-rail__i:not(.wpx-rail__end) {
  border-left: 1px solid var(--line-d2);
  padding-left: clamp(14px, 2vw, 26px);
}
.wpx-rail__end { margin-left: auto; }
@media (max-width: 760px) {
  .wpx-rail__end { margin-left: 0; }
  /* Three wrapped lines of telemetry above the headline is a lot of furniture
     on a phone. The schema identifier is the item a visitor needs least and
     the clocks are the item they need most, so the identifier goes and the
     rail comes back to two lines. It is still in the page source and still in
     the admin screen for anyone checking the feed. */
  .wpx-rail__i--feed { display: none; }
  .wpx-rail__i--feed + .wpx-rail__i { border-left: 0; padding-left: 0; }
}

/* The liveness dot. Green means a reading arrived inside the window, amber
   means one arrived and is old, grey means none arrived. It is the only
   green on the page that is not attached to a figure. */
.wpx-live { display: inline-flex; align-items: center; gap: 9px; color: var(--mint); }
.wpx-live__d {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  position: relative; flex: none;
}
.wpx-live__d::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .45;
  animation: wpx-ping 2.4s var(--settle) infinite;
}
@keyframes wpx-ping {
  0%   { transform: scale(.6); opacity: .55; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
.wpx-live--stale { color: var(--amber-l); }
.wpx-live--off   { color: var(--on-d3); }
.wpx-live--off .wpx-live__d::after { animation: none; opacity: .3; }

/* ------------------------------------------------------- the readout ---- */

.wpx-rdg {
  border: 1px solid var(--line-d); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(17,26,43,.92), rgba(11,18,32,.6));
  padding: clamp(20px, 2.3vw, 30px); position: relative;
}
/* Corner ticks. Two of the four, because four is a frame and two is a
   registration mark. */
.wpx-rdg::before, .wpx-rdg::after {
  content: ''; position: absolute; width: 11px; height: 11px; pointer-events: none;
  border-color: var(--line-d2); border-style: solid;
}
.wpx-rdg::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.wpx-rdg::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.wpx-rdg__hd {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--on-d3); margin: 0 0 clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--line-d); padding-bottom: 12px;
}
.wpx-rdg__n {
  margin: 0; font-weight: 600; color: var(--on-d);
  font-size: clamp(74px, 9.2vw, 136px); line-height: .82; letter-spacing: -.052em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.wpx-rdg__n span { font-size: .28em; letter-spacing: -.01em; color: var(--on-d3);
  font-weight: 400; margin-left: .1em; vertical-align: baseline; }
.wpx-rdg__pts {
  margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-d2);
  font-variant-numeric: tabular-nums;
}

/* The gauge. Two fills: what the score was thirty days ago, and what it is
   now. The delta is therefore drawn rather than asserted, which is the only
   honest way to put a trend on a page. */
.wpx-gauge { margin-top: clamp(20px, 2.4vw, 30px); }
.wpx-gauge__track {
  position: relative; height: 13px; border: 1px solid var(--line-d);
  background:
    repeating-linear-gradient(90deg, var(--line-d) 0 1px, transparent 1px 10%),
    rgba(255,255,255,.028);
  overflow: hidden;
}
.wpx-gauge__was, .wpx-gauge__now {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--w, 0%);
  transition: width 1100ms var(--settle) var(--settle-delay, 0ms);
}
/* LAYER ORDER MATTERS AND IT WAS WRONG THE FIRST TIME.
 *
 * The first version drew the thirty-day-ago fill first and the current fill
 * over the top of it. The current fill is the wider of the two, so it covered
 * the other one completely and the gauge rendered as a single bar. The page
 * claimed in its own caption to be drawing the delta and was drawing nothing
 * of the kind, which I only caught by looking at the render.
 *
 * So `now` is the base, in the dark green, and `was` is painted over it in a
 * lighter one. What is left visible between them is the gain. The markup
 * order is now load-bearing: `now` is emitted first. */
.wpx-gauge__now { background: var(--em); }
.wpx-gauge__was { background: var(--em-d); }
.wpx-anim .settle-t .wpx-gauge__was, .wpx-anim .settle-t .wpx-gauge__now { width: 0; }
.wpx-anim .settle-t.is-set .wpx-gauge__was, .wpx-anim .settle-t.is-set .wpx-gauge__now { width: var(--w, 0%); }
.no-js .wpx-gauge__was, .no-js .wpx-gauge__now { width: var(--w, 0%) !important; }

/* The thirty-day mark, standing on the track and labelled below it. */
.wpx-gauge__mark {
  position: absolute; top: -4px; bottom: -4px; width: 1px;
  background: var(--mint); left: var(--w, 0%); z-index: 2;
}
.wpx-gauge__scale {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-d3);
  font-variant-numeric: tabular-nums;
}
.wpx-gauge__key {
  margin: 13px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-d3);
}
.wpx-gauge__key b { color: var(--mint); font-weight: 500; }

.wpx-rdg__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px; margin: clamp(20px, 2.4vw, 28px) 0 0;
  border-top: 1px solid var(--line-d); padding-top: 16px;
}
.wpx-rdg__meta dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--on-d3); margin: 0 0 5px;
}
.wpx-rdg__meta dd {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--on-d);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.wpx-rdg__meta dd em { font-style: normal; color: var(--mint); }

/* The no-reading state. It gets the same frame, because the frame is the
   promise; what is missing is the figure. */
.wpx-rdg__off {
  margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 600;
  letter-spacing: -.028em; color: var(--on-d2); line-height: 1.1;
}

/* ---------------------------------------------------------- the chain ---- */

.wpx-chain { position: relative; padding-top: 26px; margin: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2.4vw,40px); }
.wpx-chain::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line-d);
}
/* The pulse. It travels the rule in the direction the data travels, which is
   left to right, Microsoft to publisher to page. */
.wpx-chain::after {
  content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 84px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  animation: wpx-run 5.2s linear infinite;
}
@keyframes wpx-run {
  0%   { transform: translateX(-84px); opacity: 0; }
  8%   { opacity: .9; }
  72%  { opacity: .9; }
  80%, 100% { transform: translateX(calc(100vw)); opacity: 0; }
}
.wpx-chain__st { position: relative; padding-top: 22px; }
.wpx-chain__st::before {
  content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
  background: var(--void); border: 1px solid var(--line-d2); transform: rotate(45deg);
}
.wpx-chain__n { font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  color: var(--mint); display: block; margin-bottom: 8px; }
.wpx-chain__t { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -.014em;
  color: var(--on-d); }
.wpx-chain__ts { margin: 0 0 9px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-d2);
  font-variant-numeric: tabular-nums; }
.wpx-chain__d { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--on-d3); max-width: 34ch; }

@media (max-width: 860px) {
  .wpx-chain { grid-template-columns: minmax(0,1fr); padding-top: 0; padding-left: 20px; gap: 26px; }
  .wpx-chain::before { top: 6px; bottom: 6px; left: 3px; right: auto; width: 1px; height: auto; }
  .wpx-chain::after { display: none; }
  .wpx-chain__st { padding-top: 0; }
  .wpx-chain__st::before { top: 5px; left: -20px; }
}

/* ------------------------------------------------- the freshness rule ---- */

/* The page publishes the rule it is judged by and marks its own position on
   it. Nothing else on this site does anything like this, and it is the
   single most convincing element on the page for exactly that reason: it is
   an invitation to catch us out. */
.wpx-fresh { margin: 0; }
.wpx-fresh__bar { position: relative; height: 34px; display: flex; border: 1px solid var(--line-d); }

/* The marker's coordinate space.
 *
 * The bar has three zones but the scale only runs across two of them: 0 to 7
 * days is live plus stale, and the third zone is the open-ended past-7-days
 * state, which has no position on a scale because it is where readings stop
 * being published. So the marker is positioned inside this overlay, which
 * spans exactly the measurable range, rather than against the bar's full
 * width. Putting --at against the whole bar would have quietly shifted every
 * reading left by the width of a zone that means "off the scale". */
.wpx-fresh__scale { position: absolute; top: 0; bottom: 0; left: 0; right: 116px; pointer-events: none; }
.wpx-fresh__z {
  /* Centred, not left-aligned. Left-aligned put the word LIVE at x=12px and
     the current-age marker lands at x=18px on a three-hour-old reading, so
     the marker was drawn straight through the L. Centring moves every label
     to the middle of its own zone, which is where a scale's labels belong
     anyway. */
  position: relative; display: flex; align-items: center; justify-content: center; padding: 0 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; overflow: hidden; white-space: nowrap;
}
.wpx-fresh__z + .wpx-fresh__z { border-left: 1px solid var(--line-d); }
.wpx-fresh__z--live { flex: 0 0 42.86%; background: rgba(16,185,129,.15); color: var(--mint); }
.wpx-fresh__z--stale { flex: 1 1 auto; background: rgba(251,191,36,.12); color: var(--amber-l); }
.wpx-fresh__z--gone { flex: 0 0 116px; background: rgba(154,169,189,.06); color: var(--on-d3); }
.wpx-fresh__now {
  position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--on-d);
  left: var(--at, 0%); z-index: 2; box-shadow: 0 0 0 3px rgba(7,12,21,.85);
}
/* Anchored to the right of the marker, not centred on it.
   Centring is correct in the middle of the scale and clips off the left edge
   of the page for any reading younger than about four hours, which is every
   reading on a healthy day. Running the label rightwards from the marker
   cannot clip at the left, and at the right there is a whole zone of slack. */
.wpx-fresh__lb {
  position: absolute; left: var(--at, 0%); top: -26px; margin-left: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-d); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.wpx-fresh__ax {
  display: flex; margin-top: 9px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-d3);
}
.wpx-fresh__ax span:nth-child(1) { flex: 0 0 42.86%; }
.wpx-fresh__ax span:nth-child(2) { flex: 1 1 auto; }

/* -------------------------------------------------- the coverage matrix -- */

/* This grid replaces six rows that all said PASS.
 *
 * They said PASS while the feed reported Identity at 48 percent, which is why
 * the per-category breakdown has been switched off in the admin since it was
 * built: publishing both at once would have printed a contradiction. The
 * contradiction was never in the data. It was in the word. A control being
 * ENFORCED is a statement about configuration; a category scoring 48 is a
 * measurement of coverage. They are different claims and the page was
 * collapsing them into one green tick.
 *
 * So there are two columns now, and they are allowed to disagree. */
/* NO COLUMN GAP. The cells carry their own right padding instead.
 *
 * With a grid gap, each cell draws its own bottom border and the gaps show up
 * as breaks in what should read as one continuous rule across the table. On a
 * page whose entire aesthetic is ruled instrument panels, a row divider with
 * three holes in it is the detail that makes the whole thing look unfinished.
 *
 * The column widths are deliberately lopsided: the domain names are two or
 * three words and the configuration strings are a dozen, so splitting the
 * middle evenly left a canyon between a short name and a long sentence. */
.wpx-mx { display: grid; grid-template-columns: 34px minmax(0,.62fr) minmax(0,1.38fr) 180px; gap: 0; }
.wpx-mx__h { display: contents; }
.wpx-mx__h > * {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--on-d3); padding: 0 clamp(12px, 1.8vw, 34px) 11px 0;
  border-bottom: 1px solid var(--line-d2);
}
.wpx-mx__h > *:last-child, .wpx-mx__r > *:last-child { padding-right: 0; }
.wpx-mx__r { display: contents; }
/* Stretch, not align-self:center.
 *
 * Centring each cell to its own content made every cell only as tall as its
 * own text, so the four bottom borders in a row sat at four different heights
 * and the divider came out as a broken stagger. The cells stretch to the row
 * and centre their contents internally instead, which puts all four borders
 * on one line. */
.wpx-mx__r > * {
  display: flex; align-items: center;
  padding: 17px clamp(12px, 1.8vw, 34px) 17px 0;
  border-bottom: 1px solid var(--line-d);
}
.wpx-mx__m { flex-direction: column; justify-content: center; align-items: flex-end; }
.wpx-mx__n { font-family: var(--mono); font-size: 10.5px; color: var(--on-d3);
  font-variant-numeric: tabular-nums; }
.wpx-mx__t { font-size: 16px; font-weight: 600; letter-spacing: -.014em; color: var(--on-d); }
.wpx-mx__c { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-d3); }
.wpx-mx__c b { color: var(--on-d2); font-weight: 500; }

.wpx-mx__v { align-self: flex-end; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--on-d); font-variant-numeric: tabular-nums; display: block; margin-bottom: 7px; }
.wpx-mx__v--hi { color: var(--mint); }
.wpx-mx__v--lo { color: var(--amber-l); }
.wpx-mx__v--none { color: var(--on-d3); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 0; }
/* 4px and a track you can actually see. At 3px and 7 percent alpha these
   rendered as a smudge and the reader could not compare 48 against 89, which
   is the only reason the bars are here. */
.wpx-mx__b { display: block; align-self: stretch; height: 4px; background: rgba(255,255,255,.11); position: relative; }
.wpx-mx__b i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--on-d2);
  transition: width 900ms var(--settle) var(--settle-delay, 0ms); }
.wpx-mx__b--hi i { background: var(--em); }
.wpx-mx__b--lo i { background: var(--amber-l); }
.wpx-anim .settle-t .wpx-mx__b i { width: 0; }
.wpx-anim .settle-t.is-set .wpx-mx__b i { width: var(--w, 0%); }
.no-js .wpx-mx__b i { width: var(--w, 0%) !important; }

@media (max-width: 880px) {
  .wpx-mx { grid-template-columns: 26px minmax(0,1fr) 128px; }
  .wpx-mx__h > *:nth-child(3), .wpx-mx__r > *:nth-child(3) { display: none; }
}
@media (max-width: 520px) {
  .wpx-mx { grid-template-columns: minmax(0,1fr) 112px; }
  .wpx-mx__h > *:nth-child(1), .wpx-mx__r > *:nth-child(1) { display: none; }
}

/* ------------------------------------------------------------- sweep ---- */

/* A scanline over a plate. The instrument, visibly running. */
.wpx-sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.wpx-sweep::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 210px; left: -210px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.13) 45%, rgba(52,211,153,.2) 50%, transparent);
  animation: wpx-sweep 14s linear infinite;
}
@keyframes wpx-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 210px)); }
}

/* ===================================================== THE REGISTERS ===== */

/* Held, not held, inherited. This survived the rebuild unchanged in argument
   and retuned in register: the state column is mono now so it sits with the
   console rather than against it. */

.wpx-reg2 { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-l); }
.wpx-sec--d .wpx-reg2, .wpx-sec--d2 .wpx-reg2 { border-top-color: var(--line-d); }

.wpx-reg2__row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px;
  gap: 8px clamp(18px, 2.6vw, 48px); align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line-l);
}
.wpx-sec--d .wpx-reg2__row, .wpx-sec--d2 .wpx-reg2__row { border-bottom-color: var(--line-d); }

.wpx-reg2__state {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--em-d); font-weight: 500; display: flex; align-items: center; gap: 9px; padding-top: 4px;
}
.wpx-reg2__state::before { content: ''; width: 5px; height: 5px; background: currentColor; flex: none; }
.wpx-sec--d .wpx-reg2__state, .wpx-sec--d2 .wpx-reg2__state { color: var(--mint); }

.wpx-reg2__t { margin: 0 0 7px; font-size: 19px; font-weight: 600; letter-spacing: -.018em; color: var(--on-l); }
.wpx-sec--d .wpx-reg2__t, .wpx-sec--d2 .wpx-reg2__t { color: var(--on-d); }

.wpx-reg2__src {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; color: var(--on-l3);
  text-decoration: none; padding-top: 5px; display: inline-block; border-bottom: 1px solid transparent;
}
.wpx-reg2__src:hover { color: var(--on-l); border-bottom-color: currentColor; }
.wpx-sec--d .wpx-reg2__src, .wpx-sec--d2 .wpx-reg2__src { color: var(--on-d2); }
.wpx-sec--d .wpx-reg2__src:hover, .wpx-sec--d2 .wpx-reg2__src:hover { color: var(--on-d); }

/* The absences. Same grid, same type size, same rules. The only difference is
   that the state marker is hollow, because there is nothing to fill it with. */
.wpx-reg2__row--none .wpx-reg2__state { color: var(--on-l3); }
.wpx-sec--d .wpx-reg2__row--none .wpx-reg2__state,
.wpx-sec--d2 .wpx-reg2__row--none .wpx-reg2__state { color: var(--on-d3); }
.wpx-reg2__row--none .wpx-reg2__state::before {
  background: transparent; box-shadow: inset 0 0 0 1px currentColor;
}
.wpx-reg2__src--none { color: var(--on-l3); }
.wpx-sec--d .wpx-reg2__src--none, .wpx-sec--d2 .wpx-reg2__src--none { color: var(--on-d3); }

@media (max-width: 900px) {
  .wpx-reg2__row { grid-template-columns: minmax(0, 1fr); }
  .wpx-reg2__state { padding-top: 0; }
}

/* ---------------------------------------------------------- inherited ---- */

.wpx-inherit {
  list-style: none; margin: 0; padding: 0 0 0 clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--line-l);
}
.wpx-sec--d .wpx-inherit, .wpx-sec--d2 .wpx-inherit { border-left-color: var(--line-d2); }
.wpx-inherit li { padding: 15px 0; border-bottom: 1px solid var(--line-l2);
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.wpx-sec--d .wpx-inherit li, .wpx-sec--d2 .wpx-inherit li { border-bottom-color: var(--line-d); }
.wpx-inherit__t { font-size: 17px; font-weight: 600; letter-spacing: -.014em; color: var(--on-l); }
.wpx-sec--d .wpx-inherit__t, .wpx-sec--d2 .wpx-inherit__t { color: var(--on-d); }
.wpx-inherit__s { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-l3); margin-left: auto; }
.wpx-sec--d .wpx-inherit__s, .wpx-sec--d2 .wpx-inherit__s { color: var(--on-d3); }
.wpx-inherit__by {
  border-bottom: 0 !important; font-family: var(--mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--on-l3); padding-top: 18px !important;
}
.wpx-sec--d .wpx-inherit__by, .wpx-sec--d2 .wpx-inherit__by { color: var(--on-d3); }

/* ------------------------------------------------------ the back half ---- */

.wpx-defs { margin: 0; border-top: 1px solid var(--line-d); }
.wpx-sec--l .wpx-defs, .wpx-sec--l2 .wpx-defs { border-top-color: var(--line-l); }
.wpx-defs > div {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 10px clamp(18px, 2.6vw, 48px);
  padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line-d);
}
.wpx-sec--l .wpx-defs > div, .wpx-sec--l2 .wpx-defs > div { border-bottom-color: var(--line-l); }
.wpx-defs dt { font-size: 17px; font-weight: 600; letter-spacing: -.016em; color: var(--on-d); }
.wpx-sec--l .wpx-defs dt, .wpx-sec--l2 .wpx-defs dt { color: var(--on-l); }
.wpx-defs dd { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--on-d2); max-width: 62ch; }
.wpx-sec--l .wpx-defs dd, .wpx-sec--l2 .wpx-defs dd { color: var(--on-l2); }
@media (max-width: 760px) { .wpx-defs > div { grid-template-columns: minmax(0, 1fr); } }

.wpx-table { width: 100%; border-collapse: collapse; text-align: left; }
.wpx-table th, .wpx-table td {
  padding: 15px 18px 15px 0; border-bottom: 1px solid var(--line-l); vertical-align: top;
}
.wpx-sec--d .wpx-table th, .wpx-sec--d .wpx-table td,
.wpx-sec--d2 .wpx-table th, .wpx-sec--d2 .wpx-table td { border-bottom-color: var(--line-d); }
.wpx-table thead th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--on-l3); font-weight: 500; border-bottom-color: var(--line-l);
}
.wpx-sec--d .wpx-table thead th, .wpx-sec--d2 .wpx-table thead th {
  color: var(--on-d3); border-bottom-color: var(--line-d2);
}
.wpx-table tbody th { font-size: 16px; font-weight: 600; letter-spacing: -.012em; }
.wpx-table td { font-size: 14.5px; color: var(--on-l2); }
.wpx-sec--d .wpx-table td, .wpx-sec--d2 .wpx-table td { color: var(--on-d2); }
@media (max-width: 680px) {
  .wpx-table thead { position: absolute; left: -9999px; }
  .wpx-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--line-l); }
  .wpx-sec--d .wpx-table tr, .wpx-sec--d2 .wpx-table tr { border-bottom-color: var(--line-d); }
  .wpx-table th, .wpx-table td { display: block; border: 0; padding: 2px 0; }
}

.wpx-shelf { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.wpx-sec--l .wpx-shelf, .wpx-sec--l2 .wpx-shelf { border-top-color: var(--line-l); }
.wpx-shelf li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap: 6px clamp(16px, 2.4vw, 40px); align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--line-d);
}
.wpx-sec--l .wpx-shelf li, .wpx-sec--l2 .wpx-shelf li { border-bottom-color: var(--line-l); }
.wpx-shelf__t { font-size: 16.5px; font-weight: 600; letter-spacing: -.014em; color: var(--on-d);
  text-decoration: none; }
.wpx-sec--l .wpx-shelf__t, .wpx-sec--l2 .wpx-shelf__t { color: var(--on-l); }
a.wpx-shelf__t { border-bottom: 1px solid var(--line-d2); }
a.wpx-shelf__t:hover { border-bottom-color: currentColor; }
.wpx-shelf__s { font-size: 14px; color: var(--on-d2); }
.wpx-sec--l .wpx-shelf__s, .wpx-sec--l2 .wpx-shelf__s { color: var(--on-l2); }
.wpx-shelf__f {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-d2); text-align: right;
}
.wpx-sec--l .wpx-shelf__f, .wpx-sec--l2 .wpx-shelf__f { color: var(--on-l3); }
.wpx-shelf__f--ask { color: var(--on-d3); }
@media (max-width: 760px) {
  .wpx-shelf li { grid-template-columns: minmax(0, 1fr) 118px; }
  .wpx-shelf__s { grid-column: 1 / -1; }
}

/* ------------------------------------------------------ reduced motion ---- */

/* Everything that moves on this page is listed here, switched off together.
   A console that keeps ticking at a reader who asked it to stop is not
   respectful, it is just a console. */
@media (prefers-reduced-motion: reduce) {
  .wpx-live__d::after,
  .wpx-chain::after,
  .wpx-sweep::before { animation: none !important; }
  .wpx-chain::after { opacity: 0; }
  .wpx-gauge__was, .wpx-gauge__now, .wpx-mx__b i { transition: none !important; }
  .wpx-anim .settle-t .wpx-gauge__was, .wpx-anim .settle-t .wpx-gauge__now { width: var(--w, 0%); }
  .wpx-anim .settle-t .wpx-mx__b i { width: var(--w, 0%); }
}