/* ═══════════════════════════════════════════════════════════════════════════
   RISKORA — BLACKBOX, the dark scene layer.

   WHY A SECOND SYSTEM. css/debrief.css is the light reading surface: a cool
   canvas for the parts of the site a visitor reads slowly. This file is the
   opposite register, and exists for the parts a visitor looks at before they
   read anything. It is scoped under .bx and defines its own --bx-* tokens,
   so the two can sit in one document without either overriding the other.

   WHAT THE SCENES SHARE. One ground, #07090D, which the WebGL canvas clears
   to as well, so the surface has no visible edge against the page. One type
   pairing already loaded by production, Chakra Petch for display and
   JetBrains Mono for field labels. Two label sizes, as in the debrief, not
   seven. Red is reserved: it marks loss and it marks the primary action,
   and it appears nowhere else.

   CONTRAST. Every foreground here was measured against #07090D:
     --bx-ink    #eef1f5  on ground  17.9:1
     --bx-ink-2  #a7b0bc  on ground   8.0:1
     --bx-ink-3  #8d95a1  on ground   5.9:1   smallest text, with headroom
     --bx-red    #ff5e57  on ground   6.3:1   text, loss
     white on #D50000             5.5:1   the action button
   The surface's own data red is lifted separately inside the shader, for the
   same reason the debrief panel needed its own: brand #D50000 on a near
   black ground is a 3.0:1 mark, which is the floor, not a margin.

   --bx-ink-3 was #79828f, which measures 4.6:1 against the ground: a tenth
   of a point above the AA floor and therefore fine on a flat page and wrong
   on this one. Any lift from the geometry behind it took it under, which it
   did in seven places across the eight scenes. The value now carries enough
   headroom to survive a lit surface passing behind it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The dark surfaces and the first two text tones are the founder's
   specified palette, adopted exactly:
     #07090D  #0D1117  #141A22      #F5F6F8  #A7B0BD
   The third text tone in that palette, #667180, measures 4.02:1 on
   #07090D and so fails AA for normal text. The same brief asks for
   excellent contrast, and where a palette value and a contrast floor
   disagree the floor wins, because one of them is a legal accessibility
   obligation and the other is a shade of grey. #7d8793 is the nearest
   tone to it that passes, at 5.46:1. Recorded here so it is not read as
   a transcription error. */
.bx{
  --bx-ground:#07090D;
  --bx-ground-2:#0D1117;
  --bx-line:#141A22;
  --bx-line-2:#2a313c;

  --bx-ink:#F5F6F8;
  --bx-ink-2:#A7B0BD;
  --bx-ink-3:#7d8793;

  /* The candle pane. Bullish and bearish, not brand colours: a chart
     that coloured both directions red would be unreadable as a chart.
     Measured on #07090D: 6.79:1 and 6.63:1, both clear of the 3:1 that
     WCAG 1.4.11 asks of a graphic. */
  --bx-up:#2ea98a;
  --bx-down:#ff5e57;

  --bx-red:#ff5e57;
  /* The brand red, used as the action. An earlier revision replaced it
     with #b3001b on the basis that white text measured 3.83:1 on it. That
     measurement was wrong: it came from a sampler reading the anti aliased
     edge of the button rather than its face. White on #D50000 is 5.49:1,
     which passes AA for normal text, so the brand colour stays. */
  --bx-red-deep:#D50000;

  /* ── THE SCALE ──────────────────────────────────────────────────────
     Measured before it was written: the page was using THIRTY TWO
     distinct type sizes, most of them accidents of picking a convenient
     rem value in the moment. 0.86rem, 0.875rem, 0.9rem, 0.95rem and
     1rem all appeared, which is four sizes doing one job and no eye can
     tell them apart, only feel that nothing quite lines up.

     Nine steps. Every rule in this file takes one of them. A new size is
     a decision to be argued for, not a number to be typed. */
  --bx-t-display:clamp(2.2rem, 4.6vw, 3.7rem);  /* h1, and the two big h2 */
  --bx-t-head:   clamp(1.9rem, 3.5vw, 3.0rem);  /* scene headings        */
  --bx-t-fig:    2.6rem;                        /* the large figures     */
  --bx-t-fig-sm: 1.9rem;                        /* the smaller figures   */
  --bx-t-sub:    1.35rem;                       /* h3                    */
  --bx-t-lede:   1.0625rem;                     /* the opening paragraph */
  --bx-t-body:   1rem;                          /* reading               */
  --bx-t-small:  0.9375rem;                     /* secondary reading     */
  --bx-meta:     13px;                          /* captions, notes       */
  --bx-label:    11px;                          /* uppercase labels      */

  /* ── THE SPACING STEP ───────────────────────────────────────────────
     Also measured: sibling gaps were landing on 18, 22, 26, 30, 34 and
     40, two of which appeared exactly once. Five steps now, and the
     one-offs are gone. */
  --bx-s1:8px; --bx-s2:14px; --bx-s3:22px; --bx-s4:34px; --bx-s5:52px;

  /* Two wide measures, named, because three were in use and two of them
     differed by 4px: the spine sat at 1184 and the pricing block at
     1180, so scrolling between them the page's widest edge twitched. */
  --bx-wide-read:62rem;    /* a wide column that is still being read */
  --bx-wide-grid:1180px;   /* a full width grid, shared with pricing */

  /* ── THE FRAME ──────────────────────────────────────────────────────
     Measured at 1440: the header's wordmark began at 72px, the scenes
     at 104 and the footer at 130. Three left edges on one page, none of
     them wrong on their own, which is exactly why the page felt
     unresolved rather than broken. At 1920 it was worse: the footer
     centred itself at 370 while the scenes stayed pinned at 104.

     One frame now. 1180px wide, centred, with the gutter never falling
     below 48px. Header, every scene and the footer all take it, so the
     page has a single left edge at every width. */
  --bx-frame:1180px;

  background:var(--bx-ground);
  color:var(--bx-ink);
  font-family:'Chakra Petch','Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.bx{ margin:0; }

/* ── the light theme ──────────────────────────────────────────────────────
   The site's theme toggle is existing, working functionality and its
   default is light, so the scene layer has to hold up on a pale ground.
   This is not an inversion of the dark palette: the values are the ones
   css/debrief.css already measured against a cool light canvas, and the
   renderer reads --bx-ground from the element so the WebGL material and
   its fog follow the same switch without this file telling it how.

   Measured against #f5f6f8:
     --bx-ink    #14171c   16.1:1
     --bx-ink-2  #4a515b    7.4:1
     --bx-ink-3  #616873    5.1:1
     --bx-red    #b3001b    7.0:1   text and action */
html.light .bx,
html.light.bx{
  --bx-ground:#f5f6f8;
  --bx-ground-2:#eceef2;
  --bx-line:#dde1e7;
  --bx-line-2:#c6ccd5;

  --bx-ink:#14171c;
  --bx-ink-2:#4a515b;
  --bx-ink-3:#616873;

  --bx-up:#11705c;
  --bx-down:#b3001b;

  --bx-red:#b3001b;
  --bx-red-deep:#b3001b;
}
/* The washes are written as literal rgba of the dark ground, because a
   gradient cannot interpolate a custom property to transparent in every
   engine. They are restated here rather than made clever. */
html.light .bx-vignette{
  background:
    linear-gradient(90deg, #f5f6f8 0%, rgba(245,246,248,0.92) 22%,
      rgba(245,246,248,0.18) 42%, rgba(245,246,248,0.18) 58%,
      rgba(245,246,248,0.92) 78%, #f5f6f8 100%),
    linear-gradient(180deg, rgba(245,246,248,0.72) 0%, rgba(245,246,248,0) 24%,
      rgba(245,246,248,0) 76%, rgba(245,246,248,0.80) 100%);
}
html.light .bx-col--centre::before{
  background:radial-gradient(ellipse at center,
    rgba(245,246,248,0.94) 0%, rgba(245,246,248,0.88) 42%,
    rgba(245,246,248,0.55) 68%, rgba(245,246,248,0) 100%);
}
@media (min-width:1181px){
  /* The light ground holds further across than the dark one. A red
     surface on a pale page lifts the background more than the same
     surface on a dark page lowers it, and at 46% the hero's lede measured
     3.90:1 against the bleed. */
  html.light .bx-col::after, html.light .bx-col--wide::after{
    background:linear-gradient(90deg,
      #f5f6f8 0%, #f5f6f8 62%, rgba(245,246,248,0) 100%);
  }
  html.light .bx-col--right::after{
    background:linear-gradient(270deg,
      #f5f6f8 0%, #f5f6f8 62%, rgba(245,246,248,0) 100%);
  }
}
@media (max-width:1180px){
  html.light .bx-col::after{
    background:linear-gradient(180deg,
      #f5f6f8 0%, #f5f6f8 calc(100% - 80px), rgba(245,246,248,0) 100%);
  }
  html.light .bx-vignette{
    background:linear-gradient(180deg,
      rgba(245,246,248,0.92) 0%, rgba(245,246,248,0.30) 18%,
      rgba(245,246,248,0.04) 46%, rgba(245,246,248,0.04) 84%,
      rgba(245,246,248,0.30) 100%);
  }
}
html.light .hv__stage, html.light .bx-hero__canvas{ background:transparent; }

/* ── scene 01 ─────────────────────────────────────────────────────────────
   One grid, two cells, the canvas spanning both. The type sits in column
   one and the surface resolves in column two, which is why the camera in
   riskora-surface.js is aimed left of centre: the geometry clears the
   reading column rather than being masked out of it. */
.bx-hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  padding:96px 48px 120px;
  box-sizing:border-box;
  overflow:hidden;
  isolation:isolate;
}
/* THE WASH THAT WAS HERE IS GONE, and this is the substantive decision in
   this file. A full width canvas with a dark gradient laid over the reading
   column did pass contrast, at the cost of reducing the surface to a faint
   smudge: the accessibility fix destroyed the thing being made accessible.

   The canvas is instead given its own territory. It starts at 38% and runs
   to the right edge, so no part of it is ever under the type, nothing has
   to be dimmed, and the surface renders at full strength. Its left edge is
   masked rather than cut, so it dissolves into the ground instead of
   presenting a seam, and the composition still reads as one scene. */
.bx-hero__canvas{
  /* width is explicit, not auto. A canvas is a replaced element, so with
     width:auto the browser sizes it from its own intrinsic ratio, which is
     the width and height attributes that size() rewrites every frame. Left
     and right insets are ignored in that case and the element grows: at
     1440 it measured 1800px wide, which made the camera think it was
     looking through a 2.0 aspect band. */
  position:absolute; top:0; bottom:0; left:38%; width:62%; height:100%;
  display:block; z-index:0;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,0.35) 11%, #000 30%);
  mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,0.35) 11%, #000 30%);
}
.bx-hero__intro, .bx-hero__read{
  position:relative; z-index:2;
  grid-column:1; justify-self:start;
  max-width:36.5rem;
  padding-right:28px;
}
.bx-hero__intro{ align-self:end; padding-bottom:34px; }
.bx-hero__read{ align-self:start; }

.bx-eyebrow{
  margin:0 0 20px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx-h1{
  margin:0 0 20px;
  /* Capped so that "Beyond the charts." and "The trader behind them."
     each hold one line in the hero's measure. At 4.1rem the first of
     them wrapped and the headline came out in three ragged lines, which
     is not the headline. */
  font-size:var(--bx-t-display);
  font-weight:700; line-height:1.03; letter-spacing:-0.035em;
  text-wrap:balance;
  color:var(--bx-ink);
}
.bx-lede{
  margin:0 0 34px; max-width:30rem;
  font-size:var(--bx-t-lede); line-height:1.65;
  color:var(--bx-ink-2);
}

/* ── the one finding ──────────────────────────────────────────────────────
   Numbers carry the hierarchy. The label is small because the figure is
   large, not because small labels look technical. */
.bx-finding{
  margin:0 0 34px; padding:20px 0 4px;
  border-top:1px solid var(--bx-line-2);
}
.bx-finding__k{
  margin:0 0 14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx-finding__v{
  margin:0 0 10px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:var(--bx-meta); color:var(--bx-ink-2);
}
.bx-finding__v strong{
  font-size:var(--bx-t-fig); font-weight:700; line-height:1;
  letter-spacing:-0.03em; color:var(--bx-ink);
  font-variant-numeric:tabular-nums;
}
.bx-finding__v span{ flex:1 1 14rem; min-width:0; }
.bx-finding__v--loss strong{ color:var(--bx-red); }

.bx-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; }
.bx-btn{
  /* 52px tall. It was 49, which is neither the 44 a touch target
     needs nor the 54 the preserved pricing buttons stand at, so the
     page had three control heights within five pixels of each other. */
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 28px; border-radius:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none;
  background:var(--bx-red-deep); color:#fff;
  border:1px solid var(--bx-red-deep);
  transition:background .2s ease, border-color .2s ease;
}
.bx-btn:hover{ background:#ef2020; border-color:#ef2020; }
/* Not transparent. The reading pass sweeps the surface behind this control,
   so a transparent ghost button measured 2.11:1 at one moment in the loop
   and passed at another. A control's legibility cannot be a function of
   where the animation happens to be. */
.bx-btn--ghost{
  background:var(--bx-ground-2); color:var(--bx-ink-2);
  border-color:var(--bx-line-2);
}
.bx-btn--ghost:hover{ background:var(--bx-ground-2); color:var(--bx-ink); }
.bx-btn:focus-visible, .bx-hero a:focus-visible{
  outline:2px solid var(--bx-ink); outline-offset:3px;
}
.bx-note{
  /* capped at 30rem. At 34rem a 13px note ran to 84 characters a line,
     which is a paragraph's measure set at a caption's size. */
  max-width:30rem;
  margin:0; font-size:var(--bx-meta); color:var(--bx-ink-3);
}
.bx-hero__fallback{
  position:relative; z-index:2; grid-column:2;
  font-size:var(--bx-meta); color:var(--bx-ink-3); max-width:22rem;
}

/* ── the legend, which doubles as the surface's axis key ───────────────── */
/* In the flow, inside the reading column. Pinned to the bottom of the
   scene it sat outside the column's own ground and measured 1.01:1 against
   the lit surface at 320. An axis key belongs with the thing it keys. */
.bx-legend{
  margin:34px 0 0; display:flex; flex-wrap:wrap; gap:10px 40px;
  padding-top:16px; border-top:1px solid var(--bx-line);
}
.bx-legend div{ display:flex; align-items:baseline; gap:8px; }
.bx-legend dt{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx-legend dd{ margin:0; font-size:var(--bx-meta); color:var(--bx-ink-2); }

/* ── narrow ───────────────────────────────────────────────────────────────
   Not the desktop composition stacked. On a phone a surface pinned beside
   the type is a 230px sliver, and the first build of this breakpoint lost
   the 3D entirely: the page became a headline, a statistic and a button,
   which is the document this rebuild exists to replace.

   So the phone gets its own composition. The surface stops being a
   neighbour and becomes a full bleed band between the headline and the
   reading, at the one size a 375px frame can actually carry it. The order
   is deliberate: the claim, the evidence, then the figures that name what
   the evidence shows.

   The breakpoint is 1180, not 900. Between the two the canvas column is
   narrow enough to be portrait, and a camera composed for a near square
   panel crops the terrain to its right flank there. Rather than invent a
   third framing for a 250px band of window widths, the band composition
   takes over earlier. riskora-surface.js picks its camera from the shape
   of the canvas it is handed, so it follows without being told. */
@media (max-width:1180px){
  .bx-hero{
    display:flex; flex-direction:column; justify-content:center;
    align-items:stretch;
    grid-template-columns:none;
    padding:84px 20px 40px;
    min-height:100svh;
  }
  /* align-self on these two is set for the grid, where it places them
     vertically inside their cell. In a flex column the same property means
     the horizontal axis, so inherited unchanged it pinned the headline to
     the right edge and the reading to the left. Both are reset here. */
  .bx-hero__intro, .bx-hero__read{
    max-width:none; padding-right:0; grid-column:auto; align-self:stretch;
  }
  .bx-hero__intro{ order:1; padding-bottom:0; }
  .bx-hero__canvas{
    order:2; position:static; inset:auto;
    width:calc(100% + 40px); margin:20px -20px 2px;
    height:min(27svh, 230px);
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image:linear-gradient(180deg,
      transparent 0%, #000 16%, #000 84%, transparent 100%);
  }
  .bx-hero__read{ order:3; }
  .bx-hero__fallback{ order:2; grid-column:auto; }
  .bx-legend{ order:4; margin-top:26px; gap:10px 28px; }
}
@media (max-width:420px){
  .bx-hero{ padding:76px 16px 36px; }
  .bx-hero__canvas{ width:calc(100% + 32px); margin:16px -16px 2px; height:min(25svh, 200px); }
  .bx-finding__v strong{ font-size:var(--bx-t-fig); }
  .bx-cta .bx-btn{ flex:1 1 100%; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .bx-btn{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SCENE LAYER

   One canvas fixed behind the document, eight ordinary sections in front of
   it. The sections do not each own a renderer; they own a position in the
   timeline, and the camera walks between them.

   THE CONTRAST PROBLEM, AND HOW IT IS SOLVED HERE. A full bleed canvas puts
   moving geometry behind every word on the page. The hero solved this by
   giving the canvas its own territory, which works when there is one scene.
   Across eight it would mean eight masks. Instead each scene's text sits in
   a column on one side, the camera keyframes aim the subject at the other
   side, and one fixed vignette holds the outer thirds near the ground
   colour. Every node is then measured against what actually painted, at
   five widths and six phases of the loop, rather than assumed.
   ═══════════════════════════════════════════════════════════════════════════ */

.bx--scenes{ margin:0; }
.bx--scenes main{ position:relative; z-index:2; }

.bx-stage{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
}
/* The vignette is not decoration. It is the reading surface: it holds the
   outer thirds near the ground colour so a column of type can sit there
   while the subject stays bright in the middle. */
.bx-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    /* Asymmetric on purpose. The left band is the reading surface and
       stays strong. The right was crushed just as hard, which cost the
       scene its only bright quarter and left the hero half empty; it is
       opened up and pushed later. Scene 03 sets its type on the right,
       so this was not free: the contrast run over all nine scenes at
       five widths in both themes is what licenses it. */
    linear-gradient(90deg, var(--bx-ground) 0%, rgba(7,9,13,0.92) 22%,
      rgba(7,9,13,0.18) 42%, rgba(7,9,13,0.14) 62%,
      rgba(7,9,13,0.58) 86%, rgba(7,9,13,0.86) 100%),
    linear-gradient(180deg, rgba(7,9,13,0.72) 0%, rgba(7,9,13,0) 24%,
      rgba(7,9,13,0) 76%, rgba(7,9,13,0.80) 100%);
}

.bx-skip{
  position:absolute; left:-9999px; top:0; z-index:9;
  background:var(--bx-ground-2); color:var(--bx-ink);
  padding:12px 18px; border:1px solid var(--bx-line-2); border-radius:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:var(--bx-label);
}
.bx-skip:focus{ left:24px; top:24px; }

/* ── a scene ──────────────────────────────────────────────────────────── */
.bx-scene{
  position:relative;
  /* The reading wash below bleeds -16% past its column, which at 1181px
     and up pushed the document 12px wider than the viewport and gave
     every desktop width a horizontal scrollbar. Pre-existing: the
     committed page measures scrollWidth 1452 in a 1440 viewport.

     clip, not hidden. `overflow-x: hidden` would force the other axis to
     `auto` and make each scene its own scroll container, which breaks
     anything sticky inside it; `clip` does not create a scroll container
     at all. Where it is unsupported the declaration is simply dropped
     and the 12px comes back, which is the harmless end of the failure. */
  overflow-x:clip;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-content:center;
  padding:110px 48px;
  box-sizing:border-box;
}
.bx-col{ grid-column:1; max-width:34rem; }
.bx-col--right{ grid-column:2; justify-self:end; }
.bx-col--wide{ grid-column:1 / -1; max-width:var(--bx-wide-read); }
.bx-col--centre{
  grid-column:1 / -1; max-width:40rem; justify-self:center; text-align:center;
  position:relative; padding:40px 32px;
}
/* A centred column sits exactly where the camera has put the subject, so
   the side vignette protects nothing here. This is the same idea applied
   locally: an elliptical hold around the type, fading out well before any
   edge, so it reads as focus rather than as a panel laid on the scene. */
.bx-col--centre::before{
  content:''; position:absolute; inset:-10% -14%;
  background:radial-gradient(ellipse at center,
    rgba(7,9,13,0.94) 0%, rgba(7,9,13,0.88) 42%,
    rgba(7,9,13,0.55) 68%, rgba(7,9,13,0) 100%);
  z-index:-1; pointer-events:none;
}
.bx-scene--hero{ padding-top:96px; padding-bottom:120px; }
/* The hero's reading column needs more than half the frame. The scene
   grid is two equal tracks, so inside the 1180 frame each is 590, which
   is narrower than the 41rem the headline needs and broke "The trader
   behind them." across two lines. The track is widened rather than the
   max-width raised, because the max-width is the thing holding the
   measure and the track was the actual constraint. */
.bx-scene--hero{ grid-template-columns:minmax(0,1.22fr) minmax(0,0.78fr); }
/* The hero's measure is wider than a reading column because the headline
   has to carry two long lines without breaking. The lede keeps its own
   30rem, so the body text is still set to a comfortable width. */
.bx-scene--hero .bx-col{ max-width:41rem; }
.bx-scene--centre{ min-height:86svh; }

/* On the two column layout the reading sits in the vignette's dark band,
   but the band fades toward the middle and a scene can put its subject
   close to the column: at 1440 three nodes in scene 02 measured under 4.5
   against the crest. The column carries a ground of its own that fades
   inward, so the protection follows the text rather than a fixed fraction
   of the viewport. It bleeds well past the type on every side, so there is
   no edge near a word and nothing reads as a panel. */
@media (min-width:1181px){
  .bx-col, .bx-col--right, .bx-col--wide{ position:relative; }
  .bx-col::after, .bx-col--wide::after{
    content:''; position:absolute; inset:-120px -16% -120px -60px; z-index:-1;
    /* A helper, not the mechanism. Reaching a third of the viewport past
       the column it swallowed the scene; the camera keyframes move the
       subject out of the way and this only softens what is left. */
    background:linear-gradient(90deg,
      var(--bx-ground) 0%, var(--bx-ground) 46%, rgba(7,9,13,0) 100%);
    pointer-events:none;
  }
  .bx-col--right::after{
    inset:-120px -60px -120px -16%;
    background:linear-gradient(270deg,
      var(--bx-ground) 0%, var(--bx-ground) 46%, rgba(7,9,13,0) 100%);
  }
  /* the centred scenes already hold their own ellipse */
  .bx-col--centre::after{ display:none; }
}

.bx-num{
  margin:0 0 18px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600; letter-spacing:0.26em;
  color:var(--bx-ink-3);
}
.bx-h2{
  margin:0 0 20px;
  font-size:var(--bx-t-head);
  font-weight:700; line-height:1.08; letter-spacing:-0.03em;
  text-wrap:balance; color:var(--bx-ink);
}
.bx-h2--lg{ font-size:var(--bx-t-display); }
.bx-body{
  margin:0 0 24px; max-width:34rem;
  font-size:var(--bx-t-body); line-height:1.68; color:var(--bx-ink-2);
}
.bx-body b{ color:var(--bx-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.bx-col--centre .bx-body, .bx-col--centre .bx-lede{ margin-left:auto; margin-right:auto; }

/* ── a short evidence list: the figure leads ──────────────────────────── */
.bx-facts{ list-style:none; margin:0 0 22px; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 38px; }
.bx-facts li{ display:flex; align-items:baseline; gap:10px; }
.bx-facts b{
  font-size:var(--bx-t-fig); font-weight:700; line-height:1; letter-spacing:-0.03em;
  color:var(--bx-ink); font-variant-numeric:tabular-nums;
}
.bx-facts span{ font-size:var(--bx-meta); color:var(--bx-ink-2); max-width:12rem; }

/* ── the two halves of the pattern ────────────────────────────────────── */
.bx-split{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin:0 0 26px; border-top:1px solid var(--bx-line-2);
}
.bx-split__side{ padding:18px 20px 18px 0; }
.bx-split__side--loss{ padding-left:24px; border-left:1px solid var(--bx-line-2); }
.bx-split__k{
  margin:0 0 10px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx-split__v{
  margin:0 0 6px; font-size:var(--bx-t-fig); font-weight:700; line-height:1;
  letter-spacing:-0.03em; color:var(--bx-ink); font-variant-numeric:tabular-nums;
}
.bx-split__v em{ font-style:normal; font-size:var(--bx-t-small); font-weight:400; color:var(--bx-ink-2); }
.bx-split__side--loss .bx-split__v{ color:var(--bx-red); }
.bx-split__n{ margin:0; font-size:var(--bx-meta); color:var(--bx-ink-2); }

/* ── the weighted behaviours, as controls ─────────────────────────────────
   Each row is a button. The weight stays the figure that leads, the title
   is the label, and the count sits under it in the smaller of the two
   label sizes. A row whose behaviour did not occur says so in that count
   rather than being hidden or greyed into nothing: absence is a result. */
.bx-weights{ list-style:none; margin:0 0 var(--bx-s4); padding:0;
  border-top:1px solid var(--bx-line); }
.bx-weights li{ border-bottom:1px solid var(--bx-line); }
.bx-weights__btn{
  appearance:none; background:transparent; border:0; width:100%;
  display:grid; grid-template-columns:4.6rem minmax(0,1fr); gap:22px;
  padding:18px 0; align-items:baseline; text-align:left; cursor:pointer;
  color:inherit; font:inherit;
}
.bx-weights__btn:hover .bx-weights__h{ color:var(--bx-red); }
.bx-weights__btn:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:2px; }
.bx-weights__w{
  font-size:var(--bx-t-fig-sm); font-weight:700; line-height:1; letter-spacing:-0.03em;
  color:var(--bx-ink); font-variant-numeric:tabular-nums; text-align:right;
}
.bx-weights__t{ display:block; min-width:0; }
.bx-weights__h{
  display:block; font-size:var(--bx-t-lede); font-weight:600; letter-spacing:-0.01em;
  color:var(--bx-ink);
  transition:color var(--bx-dur-micro) var(--bx-ease);
}
.bx-weights__c{
  display:block; margin-top:5px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.08em; color:var(--bx-ink-3);
}
/* An empty result is stated in the same voice as a full one. Styling it
   as a warning would turn "this did not happen" into a problem. */
.bx-weights__c.is-none{ color:var(--bx-ink-3); font-style:normal; }
.bx-weights__btn.is-on .bx-weights__h{ color:var(--bx-red); }
.bx-weights__btn.is-on .bx-weights__w{ color:var(--bx-red); }
.bx-weights__d{
  padding:0 0 20px 6.8rem;
}
.bx-weights__d p{ margin:0 0 8px; font-size:var(--bx-meta);
  line-height:1.6; color:var(--bx-ink-2); max-width:44rem; }
.bx-weights__found{ color:var(--bx-ink-3) !important; }

/* ── the limits ───────────────────────────────────────────────────────── */
.bx-limits{ border-left:2px solid var(--bx-red-deep); padding:2px 0 2px 20px; }
.bx-limits__k{
  margin:0 0 12px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx-limits ul, .bx-list{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px; }
.bx-limits li, .bx-list li{
  font-size:var(--bx-meta); line-height:1.62; color:var(--bx-ink-2);
  padding-left:18px; position:relative;
}
.bx-limits li::before, .bx-list li::before{
  content:''; position:absolute; left:0; top:0.55em;
  width:6px; height:1px; background:var(--bx-ink-3);
}

/* ── today against planned ────────────────────────────────────────────── */
.bx-two{ display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:8px; }
.bx-two__k{
  margin:0 0 14px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx-two__k--live{ color:var(--bx-ink); }
.bx-two__k--live::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#2fbf6b; margin-right:9px; vertical-align:middle;
}
.bx-list--pending li{ color:var(--bx-ink-3); }

.bx-cta--centre{ justify-content:center; }
.bx-col--centre .bx-note{ text-align:center; }

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .bx-scene{
    grid-template-columns:minmax(0,1fr);
    /* The reading goes to the top and the camera aims the subject into the
       space below it. Centred, the type sat directly on the brightest part
       of the lit surface and four nodes in the hero measured under 3:1. */
    align-content:start;
    padding:92px 20px 40px;
    min-height:100svh;
  }
  .bx-col, .bx-col--right, .bx-col--wide, .bx-col--centre{
    grid-column:1; justify-self:stretch; max-width:none;
  }
  /* The vignette turns vertical with the layout: on a phone the type runs
     full width, so darkening the sides protects nothing. */
  /* Weighted to the top, because that is where the reading now is. The
     lower half stays clear so the surface is seen properly rather than
     through a scrim. */
  .bx-vignette{
    background:linear-gradient(180deg,
      rgba(7,9,13,0.97) 0%, rgba(7,9,13,0.95) 46%,
      rgba(7,9,13,0.58) 62%, rgba(7,9,13,0.06) 80%,
      rgba(7,9,13,0.22) 100%);
  }
  /* The centre scenes already hold their own ground; on a phone that
     ellipse would fight the vertical wash. */
  .bx-col--centre{ padding:16px 0; }
  .bx-col--centre::before{ display:none; }
  /* The reading carries its own ground, anchored to the text rather than
     to the viewport. A fixed vignette has to guess where the type ends,
     and at 320 the hero's legend ran past that guess and sat on the lit
     surface at 2.09:1. This cannot: it is the same height as the content,
     whatever the content turns out to be, and it fades out below the last
     line so the subject below is seen clean. */
  .bx-col{ position:relative; }
  .bx-col::after{
    content:''; position:absolute; inset:-96px -24px -80px; z-index:-1;
    /* Solid for the column's own height and then fading across the 80px
       it extends below it. Expressing the fade as a percentage put its
       start inside the text: at 320 the hero's last legend row sat in it
       and measured 1.09:1. The stop is tied to the overhang instead, so
       it cannot move into the content however tall the content gets. */
    background:linear-gradient(180deg,
      var(--bx-ground) 0%,
      var(--bx-ground) calc(100% - 80px),
      rgba(7,9,13,0) 100%);
    pointer-events:none;
  }
  /* with the column carrying it, the viewport wash only has to soften the
     very top and bottom edges */
  .bx-vignette{
    background:linear-gradient(180deg,
      rgba(7,9,13,0.92) 0%, rgba(7,9,13,0.30) 18%,
      rgba(7,9,13,0.04) 46%, rgba(7,9,13,0.04) 84%,
      rgba(7,9,13,0.30) 100%);
  }
  .bx-two{ grid-template-columns:1fr; gap:28px; }
  .bx-split{ grid-template-columns:1fr; }
  .bx-split__side--loss{ padding-left:0; border-left:0; border-top:1px solid var(--bx-line-2); }
  .bx-weights__btn{ grid-template-columns:3.2rem minmax(0,1fr); gap:16px; }
  .bx-weights__w{ font-size:var(--bx-t-fig-sm); }
  .bx-weights__d{ padding-left:0; }
}
@media (max-width:420px){
  .bx-scene{ padding:80px 16px; }
  .bx-facts{ gap:12px 24px; }
  .bx-facts b{ font-size:var(--bx-t-fig-sm); }
}

/* ── the motion system, CSS side ───────────────────────────────────────────
   The tokens are shared with js/riskora-surface.js in spirit: the camera
   eases the same way these do, so type arriving and the camera settling
   read as one hand. One vocabulary only, a 14px rise and a fade, repeated
   everywhere. Eight scenes each with their own entrance trick is the thing
   this rebuild exists to avoid.

   .rise is added by script, never by this file, so a page whose JavaScript
   fails to load is readable rather than invisible. */
.bx{
  --bx-dur-micro:180ms;
  --bx-dur-el:460ms;
  --bx-dur-scene:900ms;
  --bx-ease:cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rise{
  opacity:0;
  transform:translate3d(0, 14px, 0);
  transition:opacity var(--bx-dur-el) var(--bx-ease),
             transform var(--bx-dur-el) var(--bx-ease);
  will-change:opacity, transform;
}
.rise--in{
  opacity:1;
  transform:none;
}
/* Once it has arrived it is ordinary content again. Leaving will-change on
   a hundred elements keeps a compositor layer alive for each of them. */
.rise--in{ will-change:auto; }

.bx-btn{ transition:background var(--bx-dur-micro) var(--bx-ease),
                     border-color var(--bx-dur-micro) var(--bx-ease); }

@media (prefers-reduced-motion:reduce){
  /* The script does not register anything under reduced motion, so .rise is
     never applied. This is the belt to that braces: if the class arrives by
     any other route the element is still simply visible. */
  .rise, .rise--in{ opacity:1; transform:none; transition:none; }
  .bx-btn{ transition:none; }
}

/* ── the phone composition ─────────────────────────────────────────────────
   On a desktop a scene is a column of reading beside a subject. A phone
   has no beside: the type runs the full width, and anything behind it is
   either unreadable or dimmed into a smudge. Both were measured and both
   were rejected.

   So the phone takes the same two halves and puts them in sequence. Each
   scene is about one and two thirds of a screen: the reading occupies the
   top, and the space below it is left empty so the fixed canvas shows
   through at full strength. Scrolling a scene therefore reads, then looks.
   The camera is unaffected, because the phase is taken from the section's
   centre and the empty half is part of the same section.

   This is why the sections are taller here rather than shorter. It is the
   one place in the stylesheet where the phone gets MORE room than the
   desktop, and it is deliberate. */
@media (max-width:1180px) and (orientation:portrait){
  .bx-scene{ min-height:170svh; }
  .bx-scene--hero{ min-height:185svh; }
  .bx-scene--centre{ min-height:150svh; }
  /* the reading stays in the top screen; the rest is the subject's */
  .bx-col, .bx-col--centre{ max-height:none; }
}

/* ── the footer ───────────────────────────────────────────────────────────
   The footer used to take its layout from the light debrief system, which
   left the page when the scenes arrived. Rather than leave it carrying a
   class whose rules no longer load, it is rebuilt here in the same tokens
   as everything else.

   It also needs its own ground. The scene canvas is fixed to the viewport,
   so without one the terrain shows through the legal text, which is the
   last place on the page that should be hard to read. */
.bx-foot{
  position:relative; z-index:2;
  background:var(--bx-ground);
  border-top:1px solid var(--bx-line);
  padding:64px 48px 44px;
  color:var(--bx-ink-2);
}
.bx-foot .rk3-foot__g{
  display:grid; gap:40px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  max-width:1180px; margin:0 auto 40px;
}
/* THE FOOTER WORDMARK, 2026-10-25, at the founder's instruction.
   It was Chakra Petch 700, which made RISKORA the only word on this
   site set two different ways: Ethnocentric in the header and this in
   the footer of the same page. A logotype set two ways is not a
   logotype. Now the header's face, at the footer's own size. */
.bx-foot .rk3-foot__wm{
  display:inline-block; text-decoration:none;
  font-family:'Ethnocentric Rg','Ethnocentric','Chakra Petch',system-ui,sans-serif;
  font-weight:400;
  /* the wordmark keeps a size of its own; it is a logotype, not type */
  font-size:1.25rem; letter-spacing:0.055em; color:var(--bx-ink);
}
.bx-foot .rk3-foot__wm i{ font-style:normal; color:var(--bx-red); }
.bx-foot p{ margin:0; font-size:var(--bx-t-small); line-height:1.65; color:var(--bx-ink-2); }
.bx-foot h3{
  margin:0 0 14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--bx-ink-3);
}
.bx-foot ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px; }
.bx-foot ul a{
  text-decoration:none; font-size:var(--bx-t-small); color:var(--bx-ink-2);
  transition:color var(--bx-dur-micro) var(--bx-ease);
}
.bx-foot ul a:hover{ color:var(--bx-ink); text-decoration:underline;
  text-underline-offset:3px; }
.bx-foot a:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:3px; }

/* The legal block is the one piece of copy on this page that has to be
   exact, so it is set at a readable size rather than shrunk to look tidy.
   It is 13px, the same as every other secondary reading on the page. */
.bx-foot .rk3-legal{
  max-width:1180px; margin:0 auto; padding-top:26px;
  border-top:1px solid var(--bx-line);
  font-size:var(--bx-meta); line-height:1.8; color:var(--bx-ink-3);
}

@media (max-width:900px){
  .bx-foot{ padding:48px 20px 36px; }
  .bx-foot .rk3-foot__g{ grid-template-columns:1fr; gap:30px; margin-bottom:30px; }
}
@media (prefers-reduced-motion:reduce){
  .bx-foot ul a{ transition:none; }
}

/* ── the preserved pricing block ──────────────────────────────────────────
   Nothing inside #plans is restyled: it is byte identical to the previous
   homepage and the contract test asserts that. This only gives the section
   around it the same ground and rhythm as its neighbours, and removes the
   top padding the old page used to separate it from a section that is no
   longer there. */
.bx-scene--plans{ min-height:auto; padding-top:40px; padding-bottom:40px; }
.bx-scene--plans .bx-col--wide{ max-width:var(--bx-wide-grid); }
.bx-scene--plans #plans{ padding-top:0 !important; border-top:0 !important; }

/* ── the previous background layer ────────────────────────────────────────
   The homepage carried a particle canvas, a pointer glow, a film grain and
   a radial vignette. The scene replaces all four. Two of them, the grain
   and the old vignette, sit at z-index 899 and 900, which is above the
   scene AND above the content: in dark theme the old vignette laid a 60%
   black edge over the terrain. They are hidden rather than deleted because
   other script still references #glow, and the particle loop is not even
   started when this class is present. */
.bx--scenes #risk-network-bg,
.bx--scenes .bg-glow,
.bx--scenes .film-grain,
.bx--scenes .vignette{ display:none !important; }

/* ── 02 · the market pane ─────────────────────────────────────────────────
   The one scene whose subject is in front of the canvas rather than in
   it. The WebGL keyframe for this scene pulls the surface back and dims
   it to a ground, so the chart is read against a field rather than
   against a landscape; see the 'market' entry in js/riskora-surface.js.

   The pane is given its own ground and a hairline, because a chart is an
   instrument and should look like one sitting on the page. That is the
   one place on this layer where a bordered panel is right: everything
   else here deliberately avoids cards. */
.bx-scene--market{
  grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:center;
}
.bx-col--market{ grid-column:1; max-width:22rem; }

.bx-chart{
  grid-column:2; margin:0; min-width:0;
  display:flex; flex-direction:column; gap:12px;
}
.bx-chart__cv{
  display:block; width:100%; height:clamp(300px, 42vh, 460px);
  background:var(--bx-ground-2);
  border:1px solid var(--bx-line-2);
  /* the crosshair is the only pointer affordance in the pane */
  cursor:crosshair;
}
.bx-chart__cap{
  display:grid; gap:6px;
  font-size:var(--bx-label); line-height:1.5; color:var(--bx-ink-3);
  max-width:46rem;
}
.bx-chart__cap b{ color:var(--bx-ink-2); font-weight:600; }
.bx-chart__tbl{
  width:100%; border-collapse:collapse; color:var(--bx-ink-2);
  font-size:var(--bx-meta);
}
.bx-chart__tbl caption{
  text-align:left; padding-bottom:8px; color:var(--bx-ink-3);
  font-size:var(--bx-label);
}
.bx-chart__tbl th, .bx-chart__tbl td{
  text-align:left; padding:6px 10px; border-bottom:1px solid var(--bx-line);
  font-weight:500;
}
.bx-chart__tbl td{ font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--bx-ink); }

/* Below the two column breakpoint the chart leads and the reading
   follows it, because a chart squeezed into half a phone is not a
   chart. The canvas itself aggregates to fifteen minute candles under
   560px rather than drawing seventy five hairlines; that decision is in
   the renderer, not here. */
@media (max-width:900px){
  .bx-scene--market{ grid-template-columns:minmax(0,1fr); }
  .bx-col--market{ grid-column:1; max-width:none; }
  .bx-chart{ grid-column:1; }
  .bx-chart__cv{ height:clamp(240px, 38vh, 340px); }
}

/* ── 09 · the two paths ───────────────────────────────────────────────────
   The close is a fork, not a button. Two columns, each stating who it is
   for, what it does and what it costs the reader to try, because the two
   audiences on this page want completely different reassurances: the
   trader wants to know nothing is uploaded, the academy wants to know
   nobody sees a student's book. Not cards: no fill, no radius, one
   hairline between them. */
.bx-paths{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px, 3vw, 40px);
  /* 54rem, not 46. At 46 each path's description was setting to 27
     characters a line, which is a newspaper column, not a sentence. */
  margin:var(--bx-s4) auto 0; max-width:54rem; text-align:left;
}
/* and the centred column has to let it have that width: at the 40rem a
   centred column is otherwise held to, widening the grid inside it
   changed nothing, because the parent was the constraint. Where :has()
   is missing the column stays at 40rem, which is the layout as it was
   rather than a broken one. */
.bx-col--centre:has(.bx-paths){ max-width:54rem; }
.bx-path{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.bx-path + .bx-path{
  border-left:1px solid var(--bx-line-2);
  padding-left:clamp(24px, 4vw, 56px);
}
.bx-path__k{
  margin:0; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--bx-ink-3);
}
.bx-path__d{
  margin:0; font-size:var(--bx-t-small); line-height:1.6; color:var(--bx-ink-2);
  min-height:3.2em;
}
.bx-path .bx-btn{ margin-top:4px; }
.bx-path__alt{
  font-size:var(--bx-label); color:var(--bx-ink-3);
  text-decoration:underline; text-underline-offset:3px;
}
.bx-path__alt:hover{ color:var(--bx-ink); }

@media (max-width:760px){
  .bx-paths{ grid-template-columns:1fr; gap:28px; }
  .bx-path + .bx-path{
    border-left:0; border-top:1px solid var(--bx-line-2);
    padding-left:0; padding-top:28px;
  }
  .bx-path__d{ min-height:0; }
}

/* ── 01 · the opening, after the founder's reference ──────────────────────
   Three devices taken from it: a numbered chip on the eyebrow, a
   headline split across two voices, and a rail of capabilities under
   the actions. Not taken from it: the broker logo strip, the metric
   counts and the security badge, which are claims rather than design.

   The second sentence carries the brand red. In light theme that is
   #b3001b, measured at 7.0:1 on the page ground, so the emphasis is a
   colour change and never a drop in legibility. */
.bx-h1--two{ display:flex; flex-direction:column; }
.bx-h1--two > span{ display:block; }
.bx-h1__em{ color:var(--bx-red); }

.bx-eyebrow--chip{
  display:flex; align-items:center; gap:12px;
}
.bx-eyebrow--chip b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:20px; padding:0 6px;
  background:var(--bx-red-deep); color:#fff;
  font-weight:700; letter-spacing:0.08em;
  /* the chip is a block of brand colour, not a pill */
  border-radius:0;
}

/* The rail. Four facts, each one thing the product does. It replaces the
   single note that used to sit here, which said two of these four. */
.bx-rail{
  list-style:none; margin:26px 0 0; padding:22px 0 0;
  border-top:1px solid var(--bx-line-2);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 26px;
  font-size:var(--bx-t-small); color:var(--bx-ink-2);
}
.bx-rail li{ display:flex; align-items:center; gap:10px; min-width:0; }
.bx-rail__i{
  flex:0 0 auto; width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--bx-line-2); color:var(--bx-red);
}
.bx-rail__i svg{ width:15px; height:15px; }

@media (max-width:760px){
  .bx-rail{ grid-template-columns:1fr; gap:12px; margin-top:20px; padding-top:18px; }
}

/* ── 08 · the spine ───────────────────────────────────────────────────────
   Four audiences on one rule. The rule is the point: it is the same
   engine behind all four, and a grid of four boxes says the opposite.
   No fill, no radius, no shadow. Each node is a tick on the line, its
   status, its name and what it is.

   The status marker carries the meaning, so it is not colour alone: a
   filled square is available, a hollow square is being validated, a
   dash is planned, and the word is printed next to it either way. */
.bx-scene--spine{ min-height:auto; padding-top:110px; padding-bottom:110px; }
.bx-scene--spine .bx-col--wide{ max-width:var(--bx-wide-grid); }

.bx-spine{
  list-style:none; margin:var(--bx-s4) 0 var(--bx-s3); padding:30px 0 0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0;
  position:relative;
}
/* the engine, drawn once, behind every node */
.bx-spine::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    var(--bx-red-deep) 0%, var(--bx-line-2) 36%, var(--bx-line) 100%);
}
.bx-spine__n{
  position:relative; padding:26px 26px 0 0; min-width:0;
}
.bx-spine__n + .bx-spine__n{ padding-left:26px; border-left:1px solid var(--bx-line); }
/* the tick where the node meets the rule */
.bx-spine__n::before{
  content:''; position:absolute; top:-4px; left:0; width:8px; height:8px;
  border:1px solid var(--bx-ink-3); background:transparent;
}
.bx-spine__n + .bx-spine__n::before{ left:26px; }
.bx-spine__n--live::before{ background:var(--bx-red-deep); border-color:var(--bx-red-deep); }
/* --later, not --plan. The preserved pricing block carries
   `html.light [class*="plan"] { background:#ffffff }`, an attribute
   selector broad enough to catch any class with those four letters in
   it, which painted a white panel behind these two nodes in light
   theme. The pricing block is not ours to change, so the modifier is
   named around it. Anything added to this page later should avoid the
   substring for the same reason. */
.bx-spine__n--later::before{ height:1px; top:0; border:0; background:var(--bx-ink-3); }

.bx-spine__s{
  margin:0 0 10px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--bx-ink-3);
}
.bx-spine__n--live .bx-spine__s{ color:var(--bx-red); }
.bx-spine__t{
  margin:0 0 10px; font-size:var(--bx-t-sub); font-weight:700;
  letter-spacing:-0.02em; color:var(--bx-ink);
}
.bx-spine__d{
  margin:0 0 14px; font-size:var(--bx-t-small); line-height:1.62; color:var(--bx-ink-2);
}
.bx-spine__a{
  display:inline-block; font-size:var(--bx-label); font-weight:600;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--bx-red); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.bx-spine__a:hover{ color:var(--bx-ink); }

@media (max-width:1000px){
  .bx-spine{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:34px; }
  .bx-spine__n:nth-child(3)::before,
  .bx-spine__n:nth-child(4)::before{ display:none; }
  .bx-spine__n:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width:640px){
  .bx-spine{ grid-template-columns:1fr; row-gap:0; padding-top:0; }
  .bx-spine::before{ display:none; }
  .bx-spine__n{ padding:22px 0; border-top:1px solid var(--bx-line); }
  .bx-spine__n + .bx-spine__n{ border-left:0; padding-left:0; }
  .bx-spine__n::before,
  .bx-spine__n + .bx-spine__n::before{ top:22px; left:auto; right:0; display:block; }
}

/* ── the reel ─────────────────────────────────────────────────────────────
   A chapter index for a page that is one continuous argument. Fixed in
   the left margin, which on this layout is empty by construction: the
   scene padding is 48px and the reading starts there, so the reel sits
   in the gutter outside it and never crowds a line.

   Only the current entry shows its label. The rest are a number and a
   tick, so the thing reads as a filmstrip rather than a table of
   contents, and so a reader's eye is not pulled out of the scene by
   nine competing words. */
.bx-reel{
  position:fixed; left:14px; top:50%; transform:translateY(-50%);
  z-index:3; display:flex; flex-direction:column; gap:2px;
  /* the rail must never swallow a click meant for the scene behind it */
  pointer-events:none;
}
/* The page's own stylesheet styles bare <nav>, and this arrived with a
   fill, a hairline, an 8px radius and padding: a card drawn in the
   margin. The light theme sets it through `html.light nav`, which at
   0,1,1 outranks a single class, so the reset is scoped under .bx to
   win on specificity rather than with !important. Reset, not renamed:
   a <nav> is what this is, and the element should not be chosen to
   dodge a selector. */
.bx .bx-reel{
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.bx-reel a{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  padding:5px 6px; text-decoration:none; border-radius:4px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  /* the label step, not a tenth size invented for the rail */
  font-size:var(--bx-label); font-weight:600; letter-spacing:0.14em;
  color:var(--bx-ink-3);
  transition:color var(--bx-dur-micro, .16s) var(--bx-ease, ease);
}
/* the numeral span left the markup with the slide numbering; the rule goes too */
/* the tick. It grows and turns when its scene is the one being read. */
.bx-reel__t{
  display:block; width:12px; height:2px; background:currentColor;
  opacity:0.45;
  transition:width var(--bx-dur-base, .3s) var(--bx-ease, ease),
             opacity var(--bx-dur-base, .3s) var(--bx-ease, ease);
}
/* The label is laid out at all times and revealed by opacity, so nothing
   reflows as the reader scrolls past. */
.bx-reel__l{
  /* min-width:0 matters. A flex child defaults to min-width:auto, so
     max-width:0 does not collapse it and every label stayed at full
     width: the rail measured 302px across and sat on top of the
     reading. */
  min-width:0; max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  text-transform:uppercase;
  transition:max-width var(--bx-dur-base, .3s) var(--bx-ease, ease),
             opacity var(--bx-dur-base, .3s) var(--bx-ease, ease);
}
.bx-reel a:hover{ color:var(--bx-ink); }
.bx-reel a:hover .bx-reel__t{ opacity:1; width:18px; }
.bx-reel a:hover .bx-reel__l{ max-width:14rem; opacity:1; }
/* The current scene is marked, not named. A label pinned open at every
   scroll position is a word sitting over the reading forever; the name
   is one hover or one tab stop away, which is where it belongs. */
.bx-reel a[aria-current="true"]{ color:var(--bx-red); }
.bx-reel a[aria-current="true"] .bx-reel__t{ width:26px; opacity:1; }
.bx-reel a:focus-visible{
  outline:2px solid var(--bx-red); outline-offset:2px; color:var(--bx-ink);
}

/* Under 1180 the gutter it lives in is gone, and a floating index over
   a phone's reading is clutter, not orientation. */
@media (max-width:1179px){ .bx-reel{ display:none; } }

/* Where the rail exists, the scenes give it a margin to live in. At the
   48px padding the page had, a 40px rail in a 14px inset left six
   pixels between the index and the first letter of every headline. */
/* The frame, applied. Below 1180 the existing responsive padding is
   left exactly as it was: it is already comfortable and the frame would
   collapse to nothing there anyway. */
@media (min-width:1180px){
  .bx-scene,
  footer.bx-foot,
  body.bx > header{
    padding-left:max(48px, calc((100% - var(--bx-frame)) / 2));
    padding-right:max(48px, calc((100% - var(--bx-frame)) / 2));
  }
  /* The footer reached the same 1180 a different way, by centring its
     own grid inside its own padding. Two mechanisms for one frame drift
     apart; it takes the frame from its padding now like everything
     else. */
  .bx-foot .rk3-foot__g{ max-width:none; margin-left:0; margin-right:0; }
}

/* THE REEL BELONGS TO THE CONTENT, NOT THE WINDOW. It sits just outside
   the frame's left edge, so on a wide screen it travels inward with the
   text instead of stranding itself against the glass. It appears only
   where the gutter can actually hold it: the rail is 72px wide and the
   frame's gutter reaches 110px at 1400. */
.bx-reel{ left:max(22px, calc((100% - var(--bx-frame)) / 2 - 80px)); }
@media (max-width:1399px){ .bx-reel{ display:none; } }

/* Reduced motion keeps the index and drops the sliding reveal: knowing
   where you are is information, the transition is decoration. */
@media (prefers-reduced-motion: reduce){
  .bx-reel a, .bx-reel__t, .bx-reel__l{ transition:none; }
}


/* ── two uncapped paragraphs in the preserved pricing block ──────────────
   PRESENTATION ONLY, and deliberately narrow in scope. The measure audit
   found .tb-sub setting to 122 characters a line at 847px and .f-sub to
   106 at 736px, both with no max-width at all. Every other long
   paragraph in that block already carries one, so these two are an
   oversight rather than a decision.

   This caps the measure and changes nothing else: no price, no plan id,
   no handler, no field name, no markup. The contract suite pins all of
   those and is run after this. */
.bx-scene--plans .tb-sub,
.bx-scene--plans .f-sub{ max-width:62ch; }


/* In a centred scene the chip was the one thing still ranged left, so
   it hung off the side of an otherwise symmetrical composition with
   nothing to align to. */
.bx-col--centre .bx-eyebrow--chip{ justify-content:center; }


/* ── the footer's legal block ────────────────────────────────────────────
   It was the one piece of running text on the page with no measure at
   all: 1020px of 13px type, about 125 characters a line. Legal copy is
   still copy, and a reader who cannot find the start of the next line
   does not read it.

   The divider moves rather than shrinking with the text. It used to be
   this paragraph's own border-top, so capping the paragraph would have
   cropped the rule to 74 characters wide and left it floating short of
   the frame. It belongs to the grid above, which spans the frame. */
.bx-foot .rk3-foot__g{
  border-bottom:1px solid var(--bx-line);
  padding-bottom:26px;
}
.bx-foot .rk3-legal{
  border-top:0; padding-top:26px;
  max-width:74ch; margin-left:0; margin-right:0;
}


/* The focus ring is part of the design, not a fallback. A focus audit
   found every control reachable and ringed, but two of them were still
   taking the browser's default `auto 1px` while everything else used
   the house `solid 2px`. Same ring everywhere now. */
.bx-spine__a:focus-visible,
.bx-path__alt:focus-visible{
  outline:2px solid var(--bx-ink); outline-offset:3px;
  color:var(--bx-ink); border-radius:2px;
}

/* ═══ THE BOOK ════════════════════════════════════════════════════════════
   The page's one dense surface, and the reason it stops reading as a
   deck. Every other section is a headline, a paragraph and a picture,
   which is the shape of a slide however well it is set. This is the
   artifact itself at working density: sixteen rows of a real ledger,
   monospaced, tabular, edge to edge.

   It is also the only place the brand's claim is literally visible. The
   first seven columns are the broker's export. The eighth is Riskora.
   The rule between them is the product boundary and is drawn as one. */

/* Escape the frame. The band runs the full viewport while its contents
   keep the frame's own gutter, so the ground bleeds and the type does
   not. */
.bx-scene--book{
  min-height:auto;
  padding-top:clamp(64px, 9vh, 120px);
  padding-bottom:clamp(64px, 9vh, 120px);
  display:block;
}
.bx-bleed{
  width:100vw; margin-left:50%; transform:translateX(-50%);
  background:var(--bx-ground-2);
  border-top:1px solid var(--bx-line);
  border-bottom:1px solid var(--bx-line);
  padding:clamp(40px, 6vh, 72px) 0;
}
.lg{
  max-width:var(--bx-frame);
  margin:0 auto;
  padding:0 max(24px, calc((100vw - var(--bx-frame)) / 2 - (100vw - 100%) / 2));
  box-sizing:border-box;
}
@media (min-width:1180px){ .lg{ padding:0; } }

.lg__head{ display:grid; gap:var(--bx-s2); margin-bottom:var(--bx-s5); }
.lg__title{
  margin:0; font-size:var(--bx-t-head); font-weight:700;
  letter-spacing:-0.03em; line-height:1.02; color:var(--bx-ink);
}
.lg__sub{
  margin:0; max-width:46ch;
  font-size:var(--bx-t-body); line-height:1.65; color:var(--bx-ink-2);
}
.lg__meta{
  display:flex; flex-wrap:wrap; gap:0; margin:var(--bx-s2) 0 0;
  border-top:1px solid var(--bx-line-2);
}
.lg__meta > div{
  padding:var(--bx-s2) var(--bx-s4) var(--bx-s1) 0;
  margin-right:var(--bx-s4);
}
.lg__meta dt{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bx-ink-3);
}
.lg__meta dd{
  margin:6px 0 0; font-size:var(--bx-t-fig-sm); font-weight:700;
  line-height:1; color:var(--bx-ink); font-variant-numeric:tabular-nums;
}
.lg__loss{ color:var(--bx-red); }

/* the table. A narrow viewport scrolls it rather than crushing it: a
   ledger with wrapped cells is not a ledger. */
.lg__wrap{ overflow-x:auto; }
.lg__t{
  width:100%; min-width:720px; border-collapse:collapse;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-meta); font-variant-numeric:tabular-nums;
}
.lg__t thead th{
  text-align:left; padding:0 14px 10px 0;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--bx-ink-3);
  border-bottom:1px solid var(--bx-line-2); white-space:nowrap;
}
.lg__t tbody th, .lg__t td{
  padding:11px 14px 11px 0; border-bottom:1px solid var(--bx-line);
  color:var(--bx-ink-2); font-weight:400; text-align:left;
  white-space:nowrap;
}
.lg__n{ width:3.2em; color:var(--bx-ink-3) !important; }
.lg__num{ text-align:right !important; padding-right:22px !important; }
.lg__t tbody .lg__pnl{ color:var(--bx-ink); font-weight:600; }
.lg__r--loss .lg__pnl{ color:var(--bx-red); }

/* THE PRODUCT BOUNDARY. Everything left of this rule is the broker's
   export. Everything right of it is what Riskora added. */
.lg__f{
  border-left:1px solid var(--bx-line-2);
  padding-left:22px !important;
  white-space:normal !important;
  width:30%;
}
.lg__t thead .lg__f{ color:var(--bx-red); }
.lg__f em{
  font-style:normal; display:inline-block; margin:0 6px 2px 0;
  padding:3px 8px; font-size:10px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--bx-red); border:1px solid currentColor;
}
.lg__ok{ color:var(--bx-ink-3); }

/* A flagged row is not shouted at. The ledger has to stay readable as a
   ledger, so the mark is a single hairline in the margin. */
.lg__r--flag th.lg__n{ box-shadow:inset 2px 0 0 var(--bx-red-deep); padding-left:10px; }
.lg__r:hover td, .lg__r:hover th{ background:var(--bx-ground); }

.lg__foot{
  margin:var(--bx-s4) 0 0; max-width:52ch;
  font-size:var(--bx-meta); line-height:1.7; color:var(--bx-ink-3);
}

/* screen reader only, for the table caption */
.bx-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:760px){
  .lg__meta > div{ margin-right:var(--bx-s3); }
  .lg__meta dd{ font-size:var(--bx-t-sub); }
}

/* ── the section marker, after the numbers came off ───────────────────────
   Numbered chips reading 01 to 09 down a page of full height sections is
   a slide deck however carefully it is set, and the numbers were the
   tell. The marker keeps the brand's red and loses the running order: a
   short rule, then the name of the thing. Sections are now named, not
   counted, which is also what a document does and a deck does not. */
.bx-eyebrow--chip{ display:flex; align-items:center; gap:12px; }
.bx-eyebrow--chip::before{
  content:''; flex:0 0 auto;
  width:22px; height:3px; background:var(--bx-red-deep);
}
.bx-eyebrow--chip b{ display:none; }
.bx-col--centre .bx-eyebrow--chip{ justify-content:center; }

/* ── the citation ─────────────────────────────────────────────────────────
   The whole book is printed on this page, so a figure quoted in the
   prose is not an assertion, it is a reference. Every one of them now
   carries the row it came from and links back to it.

   This is the device that makes the page a document rather than a deck.
   A slide states a number; a document shows you where it got it. It is
   also the cheapest possible proof of the company's actual claim, which
   is that findings should be checkable against your own trades.

   Set small, in the mono face, in the margin where the eye can skip it.
   A citation that competes with the figure it supports is a footnote
   that has forgotten what it is for. */
.bx-cite{
  display:inline-block; margin-top:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.08em;
  color:var(--bx-ink-3); text-decoration:none;
  border-bottom:1px dotted currentColor; padding-bottom:1px;
}
.bx-cite::before{ content:'\2197\00a0'; opacity:0.7; }
.bx-cite:hover{ color:var(--bx-red); }
.bx-cite:focus-visible{
  outline:2px solid var(--bx-ink); outline-offset:3px; color:var(--bx-ink);
}

/* On the cited facts list each item becomes one sourced claim: the
   figure and its label on a line, the citation beneath both. They
   stack rather than sitting in a row, because three rows of evidence
   read as evidence and three figures side by side read as a stat bar,
   which is the slide furniture this page is getting rid of.

   A grid, not display:block. Block collapsed the figure and its label
   onto each other with no gap at all; the two belong on one baseline
   and the citation spans beneath them. */
.bx-facts--cited{ display:grid; grid-template-columns:1fr; gap:var(--bx-s3); }
.bx-facts--cited li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:12px; align-items:baseline;
}
.bx-facts--cited .bx-cite{ grid-column:1 / -1; justify-self:start; margin-top:2px; }

/* ── the book as an instrument ────────────────────────────────────────────
   The inspector occupies the slot the totals already had, so swapping
   between them never moves the page. That constraint is the reason this
   feels like an instrument and not a tooltip: the reader's eye can rest
   in one place and the content under it changes. */
.lg__insp{
  display:grid; gap:var(--bx-s2); align-content:start;
  margin:var(--bx-s2) 0 0; padding-top:var(--bx-s2);
  border-top:1px solid var(--bx-line-2);
  /* reserved so the readout never changes height as the pointer moves
     from row to row; a sticky panel that jumps is worse than a gap */
  min-height:118px;
}
.lg__insp__hd{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.lg__insp__n{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-t-sub); font-weight:700; color:var(--bx-ink);
  font-variant-numeric:tabular-nums;
}
.lg__insp__d{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bx-ink-3);
}

/* the session, drawn once, with the position's span on it. A 5 minute
   hold and a 340 minute hold are two different shapes here, which is
   something the words "5" and "340" never quite are. */
.lg__bar{
  position:relative; height:10px; background:var(--bx-ground);
  border:1px solid var(--bx-line-2);
}
.lg__bar__f{
  position:absolute; top:0; bottom:0;
  background:var(--bx-ink-3); min-width:2px;
}
.lg__bar__f.is-loss{ background:var(--bx-red); }

.lg__insp__ft{
  display:flex; flex-wrap:wrap; gap:6px 26px;
  font-size:var(--bx-meta); color:var(--bx-ink-2);
}
.lg__insp__ft b{
  color:var(--bx-ink); font-weight:700;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
.lg__insp__ft .lg__loss b{ color:var(--bx-red); }

.lg__why{
  margin:0; max-width:64ch;
  font-size:var(--bx-meta); line-height:1.65; color:var(--bx-ink-2);
}
.lg__why em{
  font-style:normal; display:inline-block; margin-right:10px;
  padding:2px 8px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--bx-red); border:1px solid currentColor;
}
.lg__why--none{ color:var(--bx-ink-3); }

/* the row under the pointer, in a table that must stay a table */
.lg__r.is-on td, .lg__r.is-on th{ background:var(--bx-ground); }
.lg__r.is-on th.lg__n{ box-shadow:inset 3px 0 0 var(--bx-red-deep); }
.lg__r:focus{ outline:2px solid var(--bx-ink); outline-offset:-2px; }
.lg__r:focus:not(:focus-visible){ outline:none; }

/* ── the filter ───────────────────────────────────────────────────────── */
.lg__filter{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:0 0 var(--bx-s3);
}
.lg__filter__k{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bx-ink-3);
}
.lg__filter button{
  appearance:none; cursor:pointer;
  padding:6px 12px; background:transparent;
  border:1px solid var(--bx-line-2); border-radius:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--bx-ink-2);
  transition:color var(--bx-dur-micro,.16s) var(--bx-ease,ease),
             border-color var(--bx-dur-micro,.16s) var(--bx-ease,ease);
}
.lg__filter button:hover{ color:var(--bx-ink); border-color:var(--bx-ink-3); }
.lg__filter button[aria-pressed="true"]{
  color:#fff; background:var(--bx-red-deep); border-color:var(--bx-red-deep);
}
.lg__filter button:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:2px; }
.lg__filter__c{
  margin-left:auto; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); color:var(--bx-ink-3);
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion: reduce){
  .lg__filter button{ transition:none; }
}
@media (max-width:760px){
  .lg__insp{ min-height:0; }
  .lg__filter__c{ margin-left:0; width:100%; }
}

/* The readout travels with the reader. The site header is fixed and
   about 92px tall, so the slot parks just below it. It carries the
   band's own ground, because a transparent sticky element over a table
   is just rows showing through numbers. */
.lg__readout{
  position:sticky; top:100px; z-index:2;
  background:var(--bx-ground-2);
  padding-bottom:var(--bx-s2);
  margin-bottom:var(--bx-s3);
}
/* Sticky needs a scroll container that is not clipping it, and
   .bx-scene sets overflow-x:clip to stop a decorative wash widening
   the page. clip on one axis makes the other axis clip too, which
   silently kills position:sticky inside. The book band opts out: it
   has nothing bleeding sideways that needed clipping in the first
   place, because .bx-bleed is exactly as wide as the viewport. */
.bx-scene--book{ overflow-x:visible; }

/* On a phone the readout sticks too, and for a stronger reason than
   on desktop: a tap is the only way to drive it there, and a panel you
   cannot see while you tap is not a panel. It parks under the taller
   mobile header and gives up the reserved height, because on a narrow
   screen a fixed empty box costs more than a small reflow. */
@media (max-width:760px){
  .lg__readout{ top:116px; padding-top:10px; }
  .lg__insp{ min-height:0; }
  .lg__meta{ gap:0 18px; }
  .lg__meta > div{ padding-top:10px; margin-right:18px; }
}

/* The idle state is an invitation, not an empty box. A table nobody
   knows is interactive is a table nobody touches, and this one is the
   page's only real control surface. */
.lg__insp__idle{
  margin:0; font-size:var(--bx-meta); color:var(--bx-ink-3);
}
.lg__insp__idle::before{ content:"\2190\00a0"; opacity:0.7; }
/* a pointer cue on the rows themselves, for the same reason */
.lg__t tbody tr{ cursor:default; }
.lg__t tbody tr:hover{ cursor:crosshair; }

/* A pinned row keeps its mark after the pointer leaves, so a tap on a
   phone has somewhere to land and a click on a desktop can be used to
   hold a row while reading the detail above it. */
.lg__r.is-pinned th.lg__n{ box-shadow:inset 3px 0 0 var(--bx-red-deep); }
.lg__r.is-pinned td, .lg__r.is-pinned th{ background:var(--bx-ground); }

/* Rows keep clear of the furniture above them when something scrolls
   them into view. Arrow key navigation and anchor jumps both use
   scrollIntoView, which happily parks a row underneath the fixed site
   header and the sticky readout; measured on a phone, that is about
   250px of chrome a row can hide behind. scroll-margin reserves it. */
.lg__t tbody tr{ scroll-margin-top:260px; scroll-margin-bottom:40px; }
@media (min-width:1180px){
  .lg__t tbody tr{ scroll-margin-top:300px; }
}

/* ── scrub the day ────────────────────────────────────────────────────────
   The surface claims the height is the capital open at that minute.
   This is where a reader gets to test it instead of believing it. */
.sc{
  margin-top:var(--bx-s4); padding-top:var(--bx-s3);
  border-top:1px solid var(--bx-line-2);
  max-width:34rem;
}
.sc__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sc__k{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bx-ink-3);
}
.sc__t{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-t-sub); font-weight:700; color:var(--bx-ink);
  font-variant-numeric:tabular-nums;
}

/* The control is a real <input type=range>: it arrives keyboard
   operable, announces itself, and supports arrows, Home, End and
   Page keys without any of that being rebuilt badly by hand. Only
   its skin is ours. */
.sc__r{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; margin:14px 0 6px;
  height:22px; background:transparent; cursor:ew-resize;
}
.sc__r::-webkit-slider-runnable-track{
  height:4px; background:var(--bx-line-2);
}
.sc__r::-moz-range-track{ height:4px; background:var(--bx-line-2); }
.sc__r::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:4px; height:22px; margin-top:-9px; border:0; border-radius:0;
  background:var(--bx-red-deep);
}
.sc__r::-moz-range-thumb{
  width:4px; height:22px; border:0; border-radius:0;
  background:var(--bx-red-deep);
}
.sc__r:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:4px; }

.sc__scale{
  display:flex; justify-content:space-between;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; color:var(--bx-ink-3); letter-spacing:0.08em;
}

.sc__out{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--bx-s3) var(--bx-s4); margin:var(--bx-s3) 0 0;
}
.sc__out dt{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--bx-ink-3);
}
.sc__out dd{
  margin:5px 0 0; font-size:var(--bx-t-sub); font-weight:700;
  line-height:1.1; color:var(--bx-ink); font-variant-numeric:tabular-nums;
}
.sc__out .sc__loss{ color:var(--bx-red); }
.sc__out .sc__rows{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-meta); font-weight:400; color:var(--bx-ink-2);
}

.sc__peak{
  appearance:none; cursor:pointer; margin-top:var(--bx-s3);
  padding:8px 14px; background:transparent;
  border:1px solid var(--bx-line-2); border-radius:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--bx-ink-2);
}
.sc__peak:hover{ color:var(--bx-red); border-color:var(--bx-red); }
.sc__peak:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:2px; }

@media (max-width:620px){
  .sc__out{ grid-template-columns:1fr; gap:var(--bx-s2); }
}

/* the session chips. Same control vocabulary as the ledger's filter
   chips, because they do the same kind of job: pick a subset and show
   which one is picked. */
.sc__days{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 2px; }
.sc__days button{
  appearance:none; cursor:pointer;
  padding:5px 10px; background:transparent;
  border:1px solid var(--bx-line-2); border-radius:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.08em; color:var(--bx-ink-3);
}
.sc__days button:hover{ color:var(--bx-ink); border-color:var(--bx-ink-3); }
.sc__days button[aria-pressed="true"]{
  color:#fff; background:var(--bx-red-deep); border-color:var(--bx-red-deep);
}
.sc__days button:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:2px; }

/* ── the hero finding, now a control ──────────────────────────────────────
   These were <p>s and are <button>s. The visual stays almost exactly as
   it was, because the figures are the hero's typography and turning
   them into something that looks like a button would wreck the
   composition. What marks them as pressable is the pointer, the hover
   rule, and the hint line underneath that says so in words.

   A button brings a pile of UA styling that has to be undone first. */
.bx-finding__v{
  appearance:none; -webkit-appearance:none;
  width:100%; text-align:left; background:transparent;
  border:0; border-radius:0; padding:6px 10px 6px 0;
  font:inherit; cursor:pointer;
  transition:background var(--bx-dur-micro,.16s) var(--bx-ease,ease);
}
.bx-finding__v:hover{ background:var(--bx-ground-2); }
.bx-finding__v:focus-visible{
  outline:2px solid var(--bx-ink); outline-offset:2px;
}
/* The pressed state is a rule in the margin, the same mark the ledger
   uses for a selected row, so one vocabulary covers both. */
.bx-finding__v[aria-pressed="true"]{
  background:var(--bx-ground-2);
  box-shadow:inset 3px 0 0 var(--bx-red-deep);
  padding-left:13px;
}
.bx-finding__hint{
  margin:6px 0 0; min-height:2.6em;
  font-size:var(--bx-label); line-height:1.5; color:var(--bx-ink-3);
}
/* nothing to press without scripting, so nothing is promised */
.no-js .bx-finding__hint{ display:none; }

@media (prefers-reduced-motion: reduce){
  .bx-finding__v{ transition:none; }
}

/* ── the sixteen marks ────────────────────────────────────────────────────
   One mark per trade in book order, its height the time the position
   was held. Pressing a figure in the hero lights the trades that figure
   averages and dims the rest, which is a reply you cannot miss. The 3D
   scene answers too, but from the hero's camera distance seven lit
   decisions are a few faint pixels. */
.bx-marks{
  display:flex; align-items:flex-end; gap:5px;
  height:48px; margin:16px 0 10px;
}
.bx-marks__m{
  flex:1 1 0; min-width:0; display:block;
  background:var(--bx-ink-3); opacity:0.45;
  transition:opacity var(--bx-dur-base,.3s) var(--bx-ease,ease),
             background var(--bx-dur-base,.3s) var(--bx-ease,ease);
}
.bx-marks__m.is-loss{ background:var(--bx-red); }
.bx-marks__m.is-on{ opacity:1; }
.bx-marks__m.is-off{ opacity:0.12; }

@media (prefers-reduced-motion: reduce){
  .bx-marks__m{ transition:none; }
}

/* ── the flow ─────────────────────────────────────────────────────────────
   What you hand it, what it reads, what you get. Three steps on one
   rule, in the same spine vocabulary the ecosystem scene uses, so the
   page has one way of showing a sequence rather than two.

   This scene was a full viewport carrying a single sentence, which is
   the emptiest shape a page can take and the one that reads most like
   a slide. Air is good between dense sections; air with nothing in it
   is just a gap. */
.bx-flow{
  list-style:none; margin:var(--bx-s5) 0 var(--bx-s4); padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0; position:relative; text-align:left;
}
.bx-flow::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    var(--bx-red-deep) 0%, var(--bx-line-2) 40%, var(--bx-line) 100%);
}
/* the top padding belongs to the step, not the list: with it on the
   list the tick sat 34px below the rule, on top of its own label */
.bx-flow__s{ position:relative; padding:26px 26px 0 0; min-width:0; }
.bx-flow__s + .bx-flow__s{ padding-left:26px; border-left:1px solid var(--bx-line); }
.bx-flow__s::before{
  content:''; position:absolute; top:-4px; left:0; width:8px; height:8px;
  background:var(--bx-red-deep);
}
.bx-flow__s + .bx-flow__s::before{ left:26px; background:var(--bx-ink-3); }
.bx-flow__k{
  margin:0 0 10px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bx-ink-3);
}
.bx-flow__t{
  margin:0 0 10px; font-size:var(--bx-t-sub); font-weight:700;
  letter-spacing:-0.02em; color:var(--bx-ink);
}
.bx-flow__d{
  margin:0 0 10px; font-size:var(--bx-t-small); line-height:1.6;
  color:var(--bx-ink-2);
}
.bx-flow__n{
  margin:0; font-size:var(--bx-label); line-height:1.55; color:var(--bx-ink-3);
}

/* the centred Mirror scene needs room for three columns now */
.bx-col--centre:has(.bx-flow){ max-width:62rem; }

@media (max-width:860px){
  .bx-flow{ grid-template-columns:1fr; gap:0; padding-top:0; }
  .bx-flow::before{ display:none; }
  .bx-flow__s{ padding:22px 0; border-top:1px solid var(--bx-line); }
  .bx-flow__s + .bx-flow__s{ border-left:0; padding-left:0; }
  .bx-flow__s::before,
  .bx-flow__s + .bx-flow__s::before{ top:22px; left:auto; right:0; }
}

/* ── the arrange toggle ───────────────────────────────────────────────────
   Same chip vocabulary as the ledger's filter and the scrubber's
   sessions: a label, then options, the chosen one in brand red. Three
   controls on one page should not be three inventions. */
.bx-toggle{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:var(--bx-s4) 0 0;
}
.bx-toggle__k{
  margin-right:4px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bx-ink-3);
}
.bx-toggle button{
  appearance:none; cursor:pointer;
  padding:7px 14px; background:transparent;
  border:1px solid var(--bx-line-2); border-radius:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--bx-ink-2);
  transition:color var(--bx-dur-micro,.16s) var(--bx-ease,ease),
             border-color var(--bx-dur-micro,.16s) var(--bx-ease,ease);
}
.bx-toggle button:hover{ color:var(--bx-ink); border-color:var(--bx-ink-3); }
.bx-toggle button[aria-pressed="true"]{
  color:#fff; background:var(--bx-red-deep); border-color:var(--bx-red-deep);
}
.bx-toggle button:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .bx-toggle button{ transition:none; }
}

/* ═══ VALUE RHYTHM ════════════════════════════════════════════════════════
   Eleven sections were painted on one ground. Whatever else was on them,
   that alone made the page read as one long document: scrolling produced
   new words on the same field, over and over, with no sense of having
   arrived anywhere.

   Two sections now break it, chosen because they are the two emotional
   turns in the argument rather than because the page needed variety at
   those intervals.

   THE RED WALL is the disposition finding. It is the moment the page
   stops describing and accuses, and it should feel like running into
   something. Full bleed brand red, white type, and the fixed WebGL
   surface covered entirely: the geometry has made its point by then and
   the number is the subject.

   THE PALE BAND is privacy. After a dark page, a sheet of near-white is
   the strongest possible signal for "this part is plain and checkable",
   and it is the one section whose job is to be believed rather than
   felt. It borrows the light theme's own tokens rather than inventing a
   second light palette. */

/* Both cover the fixed canvas, so each carries its own ground edge to
   edge rather than tinting the one behind it. */
.bx-scene--red::before,
.bx-scene--pale::before{
  content:''; position:absolute; inset:0;
  width:100vw; left:50%; transform:translateX(-50%);
  z-index:-1; pointer-events:none;
}
/* MEASURED, because a saturated ground punishes guesses. Against
   #D50000 the only accessible text is white and near white: white is
   5.48:1, and the translucent whites I reached for first were 4.39 and
   2.85, so the body copy and every label on this wall were failing. The
   tints below are the measured floor with headroom, and hierarchy comes
   from size and weight rather than from opacity, which on this ground
   buys contrast loss and almost no distinction. */
.bx-scene--red{
  --bx-ink:#ffffff;        /* 5.48:1 */
  --bx-ink-2:#fdf2f2;      /* 5.00:1 */
  --bx-ink-3:#fbe6e6;      /* 4.59:1 */
  --bx-line:rgba(255,255,255,0.22); --bx-line-2:rgba(255,255,255,0.40);
  --bx-red:#ffffff; color:#ffffff;
}
.bx-scene--red::before{ background:var(--bx-red-deep); }
.bx-scene--red .bx-eyebrow--chip::before{ background:#fff; }

/* The loss side cannot be red on red, and the deep red I tried first
   measured 3.47:1. It is white like the other, marked by a rule rather
   than by a colour, which also survives being printed. */
.bx-scene--red .bx-split__side--loss{
  border-left:2px solid #fff; padding-left:18px;
}
.bx-scene--red .bx-split__side--loss .bx-split__v{ color:#fff; }
.bx-scene--red .bx-split{ border-color:rgba(255,255,255,0.28); }
.bx-scene--red .bx-toggle button[aria-pressed="true"]{
  background:#fff; color:var(--bx-red-deep); border-color:#fff;
}
.bx-scene--red .bx-cite{ color:rgba(255,255,255,0.72); }
.bx-scene--red .bx-cite:hover{ color:#fff; }

.bx-scene--pale{
  --bx-ground:#f5f6f8; --bx-ground-2:#eceef2;
  --bx-line:#dde1e7; --bx-line-2:#c6ccd5;
  --bx-ink:#14171c; --bx-ink-2:#4a515b; --bx-ink-3:#616873;
  --bx-red:#b3001b; --bx-red-deep:#b3001b;
  color:var(--bx-ink);
}
.bx-scene--pale::before{ background:var(--bx-ground); }

/* The reading wash is a dark gradient for a dark page; on these two it
   would paint a smear of the wrong colour over their own ground. */
.bx-scene--red .bx-col::after,
.bx-scene--red .bx-col--wide::after,
.bx-scene--red .bx-col--right::after,
.bx-scene--pale .bx-col::after,
.bx-scene--pale .bx-col--wide::after,
.bx-scene--pale .bx-col--right::after{ display:none; }

/* ── one figure, loud ─────────────────────────────────────────────────────
   The page had a type scale of nine steps and used the top of it
   exactly once, on the h1. Every number after that sat within a step
   of every other number, so nothing on eleven screens was ever loud,
   and a page where nothing is loud reads as flat however carefully it
   is set.

   This is the finding the product exists to produce. It gets the size
   it deserves, on the red wall, where there is nothing else to look
   at. clamp so it fills the measure at any width without ever being
   the thing that makes the page scroll sideways. */
.bx-huge{
  margin:var(--bx-s4) 0 var(--bx-s3);
  display:flex; align-items:baseline; gap:clamp(12px, 2vw, 24px);
  flex-wrap:wrap;
}
.bx-huge__n{
  font-size:clamp(4.5rem, 13vw, 11rem);
  font-weight:700; line-height:0.82; letter-spacing:-0.05em;
  color:var(--bx-ink); font-variant-numeric:tabular-nums;
}
.bx-huge__n i{ font-style:normal; font-size:0.42em; letter-spacing:0; opacity:0.72; }
.bx-huge__c{
  flex:1 1 12rem; min-width:0; max-width:18rem;
  font-size:var(--bx-t-small); line-height:1.5; color:var(--bx-ink-2);
}
@media (max-width:620px){
  .bx-huge__n{ font-size:clamp(3.6rem, 22vw, 6rem); }
  .bx-huge__c{ max-width:none; }
}

/* The red wall uses its whole width. The first build left the right
   half of a full bleed scene completely empty, which is the one thing
   a wall of colour cannot carry. */
.bx-scene--red{ grid-template-columns:minmax(0,1fr); }
.bx-scene--red .bx-col{ grid-column:1; max-width:var(--bx-frame); }
.bx-scene--red .bx-split{ max-width:38rem; }
.bx-scene--red .bx-huge{
  margin-top:var(--bx-s5);
  align-items:flex-end;
  gap:clamp(16px, 3vw, 48px);
}
.bx-scene--red .bx-huge__n{ font-size:clamp(5rem, 17vw, 15rem); }
.bx-scene--red .bx-huge__c{ max-width:22rem; padding-bottom:0.9em; }

/* The pale band is a full sheet, so a single right-hand column leaves
   half of it as blank paper. The reading spans the frame and the two
   boundary columns sit under it. */
.bx-scene--pale{ grid-template-columns:minmax(0,1fr); }
.bx-scene--pale .bx-col{ grid-column:1; justify-self:start; max-width:var(--bx-frame); }
.bx-scene--pale .bx-h2{ max-width:20ch; }
.bx-scene--pale .bx-body{ max-width:52ch; }
.bx-scene--pale .bx-two{ max-width:60rem; gap:48px; }

/* ── the reel over a changing page ────────────────────────────────────────
   The rail is fixed and the page under it is no longer one colour: it
   now passes a full red wall and a sheet of near-white. A label tinted
   for the dark ground is 1.5:1 on the red one, which is unreadable, and
   it only shows on hover so it would have shipped unnoticed.

   The label carries its own chip. It is the one piece of chrome on the
   page that cannot know what is behind it, so it stops trying. */
.bx-reel__l{
  background:#07090D; color:#f5f6f8;
  padding:3px 8px; border-radius:2px;
}
.bx-reel a:hover .bx-reel__l,
.bx-reel a:focus-visible .bx-reel__l{ max-width:14rem; opacity:1; }
/* the ticks and numbers still need to read on both extremes, so they
   take a halo rather than a colour */
.bx-reel__t{
  box-shadow:0 0 0 1px rgba(0,0,0,0.35);
}
.bx-scene--pale ~ * .bx-reel__t{ box-shadow:none; }

/* ═══ THE MASTHEAD ════════════════════════════════════════════════════════
   A report header, not a hero. The difference that matters is the
   ratio: a hero gives a sentence the whole screen and puts the evidence
   somewhere below. This gives the evidence half the width at the top of
   the page and lets the sentence sit beside it.

   It is also the only section on the page that is not a full viewport,
   on purpose. A document opens; it does not present. */
.rp{
  position:relative; z-index:2;
  /* The document label is the first line of the report and it was
     sitting underneath the fixed header, which is about 66px tall here
     and taller once the banner wraps. The top padding clears the
     chrome rather than assuming it is not there. */
  padding:calc(96px + clamp(16px, 3vh, 40px))
          max(48px, calc((100% - var(--bx-frame)) / 2))
          clamp(56px, 8vh, 96px);
  box-sizing:border-box;
}
.rp__label{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:0 0 clamp(28px, 5vh, 52px); padding-bottom:12px;
  border-bottom:1px solid var(--bx-line-2);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--bx-ink-3);
}
.rp__label span:first-child{ color:var(--bx-red); }

.rp__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 72px); align-items:start;
}
.rp__h1{
  margin:0 0 20px;
  font-size:clamp(2.3rem, 5vw, 4.2rem);
  font-weight:700; line-height:1.02; letter-spacing:-0.04em;
  color:var(--bx-ink);
}
.rp__h1__em{ color:var(--bx-red); }
.rp__lede{
  margin:0 0 28px; max-width:34rem;
  font-size:var(--bx-t-lede); line-height:1.62; color:var(--bx-ink-2);
}
.rp__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 28px; }

.rp__meta{
  display:flex; flex-wrap:wrap; gap:0;
  margin:0; padding-top:18px; border-top:1px solid var(--bx-line);
}
.rp__meta > div{ padding-right:clamp(20px, 3vw, 40px); }
.rp__meta dt{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--bx-ink-3);
}
.rp__meta dd{
  margin:6px 0 0; font-size:var(--bx-t-sub); font-weight:700; line-height:1;
  color:var(--bx-ink); font-variant-numeric:tabular-nums;
}
.rp__loss{ color:var(--bx-red); }

/* the book at a glance */
.rp__book{ margin:0; }
.rp__book__k{
  margin:0 0 14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--bx-label); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--bx-ink-3);
}
/* The strip is the masthead's illustration, so it is given real height
   rather than the 48px it had as a footnote under the old hero copy. */
.rp__strip{ display:block; }
.rp__strip .bx-marks{ height:clamp(150px, 24vh, 230px); gap:clamp(3px, 0.6vw, 8px); margin:0; }
.rp__pick{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:18px; border-top:1px solid var(--bx-line-2);
}
.rp__pick .bx-finding__v{ padding:14px 14px 14px 0; }
.rp__pick .bx-finding__v + .bx-finding__v{
  padding-left:18px; border-left:1px solid var(--bx-line);
}
.rp__pick .bx-finding__v[aria-pressed="true"]{ padding-left:15px; }
.rp__pick .bx-finding__v + .bx-finding__v[aria-pressed="true"]{ padding-left:21px; }

@media (max-width:980px){
  .rp__grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .rp__strip .bx-marks{ height:140px; }
}
@media (max-width:560px){
  .rp__pick{ grid-template-columns:1fr; }
  .rp__pick .bx-finding__v + .bx-finding__v{
    border-left:0; border-top:1px solid var(--bx-line); padding-left:0;
  }
  .rp__pick .bx-finding__v + .bx-finding__v[aria-pressed="true"]{ padding-left:13px; }
}

/* The provenance row is a flex of label/value pairs, and at phone width
   it wrapped so that "UPLOADED" landed under "ROWS 16" and the pairs
   stopped reading as pairs. A grid keeps each label over its own
   value. */
@media (max-width:620px){
  .rp__meta{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
  .rp__meta > div{ padding-right:0; }
  .rp__label{ gap:6px; }
  .rp__cta{ gap:10px; }
  .rp__cta .bx-btn{ width:100%; }
}

/* ── the masthead's reading ground ────────────────────────────────────────
   Making the surface burn cost exactly what you would expect: the
   terrain now reaches under the masthead and the reading was measured
   at 2.56 to 3.96 against it. The scene sections have a wash for this
   (.bx-col::after) and the masthead is not a .bx-scene, so it had
   none.

   A scrim under each text block rather than across the whole section:
   the point of the heat is that it is visible, and a full width veil
   would put the glow back behind glass. */
.rp__lead,
.rp__book{ position:relative; z-index:1; }
.rp__lead::before,
.rp__pick::before,
.bx-finding__hint::before{
  content:''; position:absolute; z-index:-1;
  inset:-24px -28px -24px -32px;
  background:radial-gradient(120% 100% at 30% 50%,
    var(--bx-ground) 0%, var(--bx-ground) 52%, rgba(7,9,13,0) 100%);
  pointer-events:none;
}
.bx-finding__hint{ position:relative; z-index:1; }
.rp__pick{ position:relative; z-index:1; }
/* on the pale theme the same scrim is the pale ground */
html.light .rp__lead::before,
html.light .rp__pick::before,
html.light .bx-finding__hint::before{
  background:radial-gradient(120% 100% at 30% 50%,
    var(--bx-ground) 0%, var(--bx-ground) 52%, rgba(245,246,248,0) 100%);
}