/* ═══════════════════════════════════════════════════════════════════════════
   RISKORA — GLASS. The finish layer.

   WHY THIS FILE EXISTS. css/blackbox.css got the structure right and the
   finish wrong. Its geometry, the scene grid, the column widths, the
   responsive breakpoints and the reading measures, is sound and is kept.
   What it produced was a document: hairlines on flat black, every object
   the same weight, one accent colour, no depth and no light. Printed,
   not built.

   This layer changes four things and only four:

     1  LIGHT.      The page is lit rather than printed. An aurora sits
                    behind the content and every surface that is an object
                    catches a highlight on its top edge.
     2  DEPTH.      Objects are panels with a radius, a translucent fill,
                    a hairline and a long shadow, so the eye can tell an
                    instrument from the page it sits on.
     3  COLOUR.     Red was the only hue in the file, which is why every
                    section read the same. Red stays reserved for loss and
                    for the primary action. Indigo carries the safe and
                    structural states; green carries upside. Three hues,
                    each with a job.
     4  TYPE.       Inter Tight for display, set tight and large, with
                    JetBrains Mono kept for anything a machine produced.

   WHAT IT DOES NOT CHANGE. No figure, no claim and no piece of copy is
   touched from here. Every number on this page still comes from
   SAMPLE_BOOK and is still rebuilt cell by cell by the contract suite.

   CONTRAST. Re-measured against the new ground #06070A:
     --bx-ink    #FAFBFC   19.1:1
     --bx-ink-2  #A8B1C0    8.3:1
     --bx-ink-3  #A2ABB9    8.7:1   smallest text; 5.1 over lit terrain
     --bx-red    #FF6B63    6.6:1   loss, and text
     --bx-cool   #8AA4FF    8.0:1
     --bx-up     #35D9AB    9.9:1
     white on the brand gradient    4.69 to 7.77 down its three stops
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────── 1 · tokens */

.bx{
  /* Ground. Pushed a shade cooler and deeper than #07090D so the aurora
     behind it has somewhere to sit. A page already near-black at the
     midtones cannot show a bloom. */
  --bx-ground:#06070A;
  --bx-ground-2:#0B0D12;

  /* Lines become translucent. A hairline painted as a solid colour sits
     on top of the page; one painted as white at 7 percent sits IN it and
     picks up whatever light is behind it. This is the cheapest change in
     the file and it is most of the difference. */
  --bx-line:rgba(255,255,255,.075);
  --bx-line-2:rgba(255,255,255,.14);

  --bx-ink:#FAFBFC;
  --bx-ink-2:#A8B1C0;
  /* #828B9B measures 5.87:1 on the bare ground, which is fine on a flat
     page and wrong on this one. Every surface here is lit now: the
     aurora, the terrain and the panels' own fills all raise the ground
     under small text, and measured, that lift took this tone to 4.28
     on a panel and 3.46 in the hero. Eleven of the twenty contrast
     failures on this page were this one token. It carries enough
     headroom now to survive the brightest ground it sits on: 8.69:1
     bare, 6.34 on a panel, 5.13 over the lit terrain.

     blackbox.css recorded exactly this lesson about its own ink-3 and
     the same mistake was made again one layer up. */
  --bx-ink-3:#A2ABB9;

  /* Three hues with three jobs, instead of one hue doing all of them. */
  --bx-red:#FF6B63;          /* loss, and loss text                     */
  --bx-red-deep:#D50000;     /* the brand anchor, unchanged             */
  --bx-brand:#FF3B38;        /* red as emitted light, not as ink        */
  --bx-cool:#8AA4FF;         /* structure, privacy, the safe state      */
  --bx-cool-deep:#4F6BE8;
  --bx-up:#35D9AB;
  --bx-down:#FF6B63;

  /* The glass recipe. One object, one shape, everywhere on the page. */
  --g-fill:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --g-fill-2:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  --g-edge:rgba(255,255,255,.085);
  --g-top:inset 0 1px 0 rgba(255,255,255,.09);
  --g-drop:0 28px 70px -28px rgba(0,0,0,.92), 0 2px 8px -4px rgba(0,0,0,.6);
  --g-drop-lg:0 44px 110px -34px rgba(0,0,0,.95), 0 4px 14px -6px rgba(0,0,0,.7);
  --g-r:18px;
  --g-r-lg:26px;
  --g-r-xl:32px;

  /* Type. Inter Tight set tight is the whole modern-interface voice; the
     old stack set Chakra Petch at default tracking, which reads as a
     slide. Chakra Petch stays on the logo, where it is the brand. */
  font-family:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bx-t-display:clamp(2.6rem, 6.2vw, 5.1rem);
  --bx-t-head:   clamp(2.1rem, 4.4vw, 3.5rem);
  --bx-t-fig:    clamp(2.6rem, 5vw, 3.6rem);
  --bx-t-lede:   clamp(1.05rem, 1.4vw, 1.25rem);

  --bx-ease:cubic-bezier(.22,.61,.36,1);
  --bx-spring:cubic-bezier(.34,1.26,.64,1);
}

.bx h1,.bx h2,.bx h3,
.bx .bx-h2,.bx .hx__h1,.bx .lg__title{
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  letter-spacing:-.035em;
  font-weight:600;
  text-wrap:balance;
}
.bx .bx-h2{ font-size:var(--bx-t-head); line-height:1.04; }
.bx .bx-h2--lg{ font-size:var(--bx-t-display); line-height:1.0; }

/* Figures line up. Any digit in a column, or one that animates, is
   tabular, or the layout jitters while it counts. */
.bx .lg__num,.bx .pv__kpi dd,.bx .bx-facts b,.bx .bx-weights__w,
.bx .bx-split__v,.bx .bx-huge__n,.bx .pv__found__v,.bx .bx-finding__v strong{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ───────────────────────────────────────────────────── 2 · the atmosphere */
/*
   Three very large, very soft blooms drifting slowly behind everything.
   This is the layer the old page had no equivalent of: it had a flat
   ground and a vignette, so there was nowhere for light to come from,
   and every section therefore looked identical whatever was in it.

   Pure CSS compositing, no canvas and no second render loop, and it sits
   BELOW the WebGL stage, so in the scenes where the terrain comes
   forward the terrain still wins. It is the floor of light, not a
   decoration on top of the work.
*/
.bx-aurora{
  position:fixed; inset:-20vmax; z-index:0; pointer-events:none;
  contain:strict;
}
/*
   NO blur() AND NO BLEND MODE. The first version put filter:blur(90px)
   and mix-blend-mode:screen on three elements each the size of the
   viewport. Measured on software rendering, where a cheap phone's GPU
   is a closer neighbour than a desktop's, that cost 8.1fps of a 15.5fps
   page: about as much as the entire WebGL surface, for a background.

   And it was redundant. A radial-gradient that fades to transparent is
   already a smooth bloom; the blur was softening an edge that was never
   hard. Three stops per bloom give the falloff the blur was providing,
   at the cost of a gradient the compositor draws once. Screen blend
   over a near-black ground is close enough to ordinary alpha
   compositing of a light colour that it was paying for nothing either.

   The drift is still a transform, which stays on the compositor.
*/
.bx-aurora i{
  position:absolute; display:block; border-radius:50%;
  opacity:.62; will-change:transform;
}
.bx-aurora i:nth-child(1){
  width:72vmax; height:72vmax; left:-14vmax; top:-14vmax;
  background:radial-gradient(closest-side,
    rgba(213,0,0,.46) 0%, rgba(201,10,10,.26) 34%,
    rgba(150,10,20,.1) 62%, rgba(120,10,30,0) 100%);
  animation:bx-drift-a 34s var(--bx-ease) infinite alternate;
}
.bx-aurora i:nth-child(2){
  width:66vmax; height:66vmax; right:-16vmax; top:8vmax;
  background:radial-gradient(closest-side,
    rgba(79,107,232,.38) 0%, rgba(79,107,232,.2) 34%,
    rgba(60,90,200,.08) 64%, rgba(40,70,180,0) 100%);
  animation:bx-drift-b 44s var(--bx-ease) infinite alternate;
}
.bx-aurora i:nth-child(3){
  width:58vmax; height:58vmax; left:16vmax; bottom:-18vmax;
  background:radial-gradient(closest-side,
    rgba(170,23,110,.3) 0%, rgba(150,20,100,.16) 36%,
    rgba(120,16,86,.06) 66%, rgba(100,14,74,0) 100%);
  animation:bx-drift-c 52s var(--bx-ease) infinite alternate;
}
@keyframes bx-drift-a{ to{ transform:translate3d(14vmax,9vmax,0) scale(1.18); } }
@keyframes bx-drift-b{ to{ transform:translate3d(-13vmax,11vmax,0) scale(1.12); } }
@keyframes bx-drift-c{ to{ transform:translate3d(10vmax,-12vmax,0) scale(1.22); } }

/* Grain. Without it the blooms band visibly on an 8-bit panel, which is
   the commonest tell of a gradient background done cheaply. An SVG
   turbulence at 3 percent is enough to break the bands. */
.bx-aurora::after{
  content:''; position:absolute; inset:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The stage and the content both clear the aurora.

   ONLY z-index IS SET HERE, never position. The reel, the support bot,
   the stats bar and the header are already positioned, three of them
   fixed, and giving them position:relative detached all three from the
   viewport: the reel became a 1440px block inside the page and pushed
   the document 50px wider than the window. A stacking rule has no
   business deciding where an element lives. */
.bx .bx-stage{ z-index:1; }
.bx main,.bx .bx-foot{ position:relative; z-index:2; }

/* THE ORDER MATTERS, AND main COMES AFTER header IN THE DOCUMENT. Given
   the same z-index, the later element wins, so putting both on 2 let
   every section paint over the wordmark and the first nav links. The
   header keeps the z-index it already had before this file existed. */
.bx .bx-reel{ z-index:3; }
.bx .floating-stats,.bx .support-bot{ z-index:900; }
.bx header{ z-index:1000; }
.bx .mobile-nav{ z-index:1001; }

/* The old vignette is kept but softened: at 60 percent black on the edges
   it was eating the aurora it now sits on top of. */
.bx .bx-vignette{
  background:radial-gradient(130% 90% at 50% 40%,
    rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%);
}

html.light .bx-aurora{ opacity:.24; }

/* ────────────────────────────────────────────────────── 3 · the top chrome */
/*
   The header was a full width bar with a solid fill and a bottom rule,
   which is the single piece of furniture that most dates a page. It
   becomes a floating pill: inset from the edges, rounded, lifted, and
   blurred over whatever is passing underneath it.
*/
.bx header{
  position:fixed; top:14px;
  left:50%; transform:translateX(-50%);
  width:min(1240px, calc(100% - 28px));
  background:rgba(12,14,19,.62) !important;
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid var(--g-edge);
  border-bottom:1px solid var(--g-edge);
  border-radius:999px;
  box-shadow:var(--g-top), 0 16px 40px -18px rgba(0,0,0,.9);
  padding:8px 10px 8px 20px;
  display:flex; align-items:center; gap:18px;
  transition:background .3s var(--bx-ease), box-shadow .3s var(--bx-ease);
}
/* 'Ethnocentric Rg' first: that is the name /fonts/ethnocentric.woff
   declares, and this stack led with 'Ethnocentric', which resolves only
   on a machine that happens to have the font installed and silently
   fell to Chakra Petch everywhere else. The same stack is in
   css/riskora-shell.css, which every other page uses. */
.bx header .logo{
  font-family:'Ethnocentric Rg','Ethnocentric','Chakra Petch',system-ui,sans-serif;
  letter-spacing:.02em;
}
.bx header nav{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important;
  display:flex; gap:2px; margin-left:auto;
}
.bx header nav a{
  position:relative; padding:8px 13px; border-radius:999px;
  font-size:12px; letter-spacing:.06em; font-weight:500;
  color:var(--bx-ink-2);
  transition:color .18s var(--bx-ease), background .18s var(--bx-ease);
}
.bx header nav a:hover{ color:var(--bx-ink); background:rgba(255,255,255,.07); }
.bx header .nav-actions{ display:flex; align-items:center; gap:8px; }
.bx header .nav-actions button{ border-radius:999px !important; }

@media (max-width:1100px){ .bx header nav{ display:none; } }
@media (max-width:760px){
  .bx header{ top:8px; width:calc(100% - 16px); padding:7px 8px 7px 16px; }
}

/* ── the disclosure bar ──────────────────────────────────────────────
   It was fixed to the top of the window at 34px, which is inside the
   header's own band, so it painted straight over the wordmark. The bar
   is not optional copy, it is the beta and educational-only disclosure,
   so it moves rather than goes: to the foot of the window, as a slim
   status strip. That is where an application puts its state, it is out
   of the way of the first screen, and it stays on screen for the whole
   page instead of scrolling away in the first flick. */
.bx .floating-stats{
  top:auto !important; bottom:0; left:0; right:0;
  background:rgba(8,10,14,.82) !important;
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--g-edge); border-bottom:0 !important;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.bx .floating-stats .stats-inner{
  max-width:var(--bx-frame); margin:0 auto;
  padding:7px max(18px, env(safe-area-inset-left)); gap:26px;
}
.bx .floating-stats .stat{ font-size:11.5px; letter-spacing:.02em; }
html.light .bx .floating-stats{ background:rgba(255,255,255,.88) !important; }

/* The footer clears the bar. --bar-h is measured and published by
   js/riskora-glass.js, because the bar is one line at 1440 and three
   at 390: it carries sentences, not a label. The fallback is the
   desktop height, so without that script the page is a few pixels
   tight on a phone rather than broken. */
.bx .bx-foot{
  padding-bottom:calc(36px + var(--bar-h, 46px) + env(safe-area-inset-bottom, 0px));
}
@media (max-width:760px){
  .bx .floating-stats .stats-inner{ gap:4px 12px; padding:6px 16px; }
  .bx .floating-stats .stat{ font-size:10.5px; line-height:1.45; }
}

/* The scroll progress becomes a hairline of brand light. */
.bx .scroll-progress{
  height:2px;
  background:linear-gradient(90deg, var(--bx-red-deep), var(--bx-brand) 60%, #FF8A66);
  box-shadow:0 0 12px rgba(255,59,56,.6);
}

/* ─────────────────────────────────────────────────────────── 4 · controls */
/*
   The primary action stops being a flat red rectangle. It is a filled
   capsule with a real gradient, a lit top edge and a bloom underneath
   that grows on hover: the action should look like the brightest thing
   on the screen, because it is the only thing the page is asking for.
   White on the gradient's darkest stop measures 5.6:1.
*/
.bx .bx-btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px; border:0;
  font-family:inherit; font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  color:#fff; text-decoration:none; cursor:pointer;
  /* Measured against white: 4.69, 6.21, 7.77 down the gradient. The
     first version ran #FF4B45 to #C81E1E, whose top stop is 3.31:1, and
     the label on it measured 4.49 against the mid tone: under AA by a
     hundredth, which is still under.

     The second ran down to #A61010, which clears AA comfortably and is
     maroon, not brand red. #E02B26 is the brightest red a white label
     can legally sit on at this size, so the gradient starts there and
     falls only as far as it needs to. Measured white: 4.62, 5.47,
     6.38. The bloom underneath carries the rest of the brightness. */
  background:linear-gradient(180deg, #E02B26 0%, #D01A17 52%, #BE1310 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 10px 28px -10px rgba(213,0,0,.85);
  transition:transform .22s var(--bx-spring), box-shadow .22s var(--bx-ease),
             filter .22s var(--bx-ease);
}
.bx .bx-btn::after{
  content:''; position:absolute; z-index:-1; inset:-40% -12%;
  border-radius:inherit; opacity:0;
  background:radial-gradient(50% 60% at 50% 50%, rgba(255,59,56,.75), transparent 72%);
  filter:blur(18px);
  transition:opacity .28s var(--bx-ease);
}
/* No brightness on hover: lifting the fill by 5 percent takes the top
   stop from 4.69 to about 4.45, so the hover state would fail AA while
   the resting state passed. The lift and the bloom carry the feedback. */
.bx .bx-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 18px 42px -12px rgba(213,0,0,.95);
}
.bx .bx-btn:hover::after{ opacity:1; }
.bx .bx-btn:active{ transform:translateY(0); }
.bx .bx-btn:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:3px; }

/* The secondary action is glass, not an outline. */
.bx .bx-btn--ghost{
  background:var(--g-fill-2); color:var(--bx-ink);
  border:1px solid var(--g-edge);
  box-shadow:var(--g-top), 0 10px 26px -14px rgba(0,0,0,.9);
}
.bx .bx-btn--ghost::after{ display:none; }
.bx .bx-btn--ghost:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.18); filter:none;
  box-shadow:var(--g-top), 0 16px 34px -16px rgba(0,0,0,.9);
}

/* The eyebrow chip becomes a real pill with a status dot, which is the
   one piece of interface vocabulary that reads as product rather than
   slide at a glance. */
.bx .bx-eyebrow--chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 11px; border-radius:999px;
  background:var(--g-fill); border:1px solid var(--g-edge);
  box-shadow:var(--g-top);
  color:var(--bx-ink-2); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
}
.bx .bx-eyebrow--chip::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--bx-brand);
  box-shadow:0 0 0 3px rgba(255,59,56,.18), 0 0 10px rgba(255,59,56,.9);
}
.bx .bx-scene--red .bx-eyebrow--chip{
  background:rgba(0,0,0,.26); border-color:rgba(255,255,255,.22); color:#fff;
}
.bx .bx-scene--red .bx-eyebrow--chip::before{
  background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.2);
}

/* ───────────────────────────────────────────────────────────── 5 · the hero */
/*
   WHAT WAS HERE BEFORE AND WHY IT WENT. A report masthead: a label row, a
   headline, a lede, two buttons and a definition list of four figures,
   all set flush left on flat ground. It was honest and it was dead. The
   page opened with a paragraph, and a company whose product is an
   instrument should open with the instrument.

   WHAT REPLACES IT. The product, floating and lit. Copy above it, cut to
   the brief's own words and to one sentence; below it, a glass panel
   tilted a few degrees off the plane with a bloom behind it, carrying
   the finding this entire page exists to produce.

   NOTHING IN THE PANEL IS DECORATIVE. The figure is 3.67x, which is the
   disposition ratio of the demonstration book and is asserted by the
   contract suite. The strip is the sixteen real round trips, drawn by
   js/riskora-hero.js from the ledger printed further down. The two
   buttons under it are the same controls that were in the masthead, with
   the same classes, so that script is untouched.
*/
.bx .hx{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start;
  /* TIGHT ENOUGH THAT THE FINDINGS ARE ON THE FIRST SCREEN. The copy
     grew when it started answering who this is for, and at the old
     rhythm that pushed the panel's top to 700px: on a 900px window the
     three findings, which are the whole argument for the panel being
     there, sat below the fold. Measured and tuned until they are not. */
  gap:clamp(18px, 2.4vh, 28px);
  padding:clamp(96px, 11vh, 124px) 20px clamp(56px, 8vh, 96px);
  text-align:center;
  /* The bloom behind the panel is inset -6% horizontally so the light
     spills past the panel's edges, which is the point of it. At 1024
     that spill is 26px wider than the window and the document scrolled
     sideways. clip, not hidden: hidden would make this a scroll
     container, and the scroll cue inside is positioned against the
     first screen. */
  overflow-x:clip;
}
/* THE READING SCRIM. Taking the blur off the aurora concentrated the
   blooms: the ground under the hero copy went from about rgb(67,51,54)
   to rgb(89,68,54), and the lede fell to 4.21 and the microcopy to
   3.77. Measured, not guessed.

   The fix is a scrim rather than brighter text, because the text is
   already at the page's two readable tones and because this is what
   the darkening is for: it sits under the copy and fades out well
   before the panel, so it reads as the light falling off around the
   headline rather than as a box. Composited, it takes that ground to
   about rgb(51,40,33), where the lede measures 6.5 and the microcopy
   5.6. It is below the content and above the canvas. */
.bx .hx::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  inset:0 0 auto; height:76%;
  background:radial-gradient(74% 62% at 50% 40%,
    rgba(4,5,8,.62) 0%, rgba(4,5,8,.45) 46%, rgba(4,5,8,0) 100%);
}
.bx .hx__in{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  max-width:60rem; width:100%;
}
.bx .hx__h1{
  margin:0;
  font-size:var(--bx-t-display);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:600;
  color:var(--bx-ink);
}
/* The second line is the one the whole company is named for, so it gets
   the light rather than a flat brand swatch. A gradient clipped to text
   reads as emitted; #D50000 as a fill reads as print. The fallback
   colour under it is the measured 6.6:1 red, so a browser without
   background-clip still passes. */
/* The gradient's darkest stop was #D50000, which measures 3.67:1 on the
   bare ground: over the 3:1 a headline this size has to clear, but the
   aurora lifts the ground under the right of this line and took it
   under. #E8201C is 4.46 bare and still clearly the brand red. */
.bx .hx__h1__em{
  color:var(--bx-red);
  background:linear-gradient(94deg, #FF9A6B 0%, #FF4B45 44%, #E8201C 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .bx .hx__h1__em{ background:none; -webkit-text-fill-color:currentColor; }
}
/* 46rem, not 40: at 40 this sentence set to three lines and each one
   of them cost the panel below it a line of the first screen. */
.bx .hx__lede{
  margin:0; max-width:46rem;
  font-size:var(--bx-t-lede); line-height:1.55;
  color:var(--bx-ink-2); letter-spacing:-.005em;
}
.bx .hx__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
/* The rail answers the three things a cold visitor needs before they
   will hand over a file: will it take mine, what does it cost me, and
   where does it go. Each one gets a tick, because a bare list of
   phrases reads as marketing and a ticked one reads as terms. */
.bx .hx__under{
  margin:4px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  font-size:13px; letter-spacing:-.005em; color:var(--bx-ink-2);
}
.bx .hx__under li{ display:inline-flex; align-items:center; gap:8px; margin:0; }
.bx .hx__under li::before{
  content:''; flex:none; width:15px; height:15px; border-radius:50%;
  border:1px solid rgba(53,217,171,.4);
  background:
    linear-gradient(rgba(53,217,171,.16), rgba(53,217,171,.16)) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%2335D9AB' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* The second audience, one quiet line. */
.bx .hx__alt{
  margin:6px 0 0; font-size:13px; color:var(--bx-ink-3);
}
.bx .hx__alt a{
  color:var(--bx-ink-2); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--bx-line-2);
  transition:color .18s var(--bx-ease), text-decoration-color .18s var(--bx-ease);
}
.bx .hx__alt a:hover{ color:var(--bx-ink); text-decoration-color:currentColor; }

/* ── the floating panel ──────────────────────────────────────────────── */
.bx .hx__stage{
  position:relative; z-index:2;
  width:100%; max-width:960px;
  perspective:1800px;
}
/* The bloom. A panel with a shadow and no light behind it looks pasted
   onto the page; this is what sets it into the page instead. */
.bx .hx__stage::before{
  content:''; position:absolute; z-index:0;
  inset:6% -6% -14% -6%;
  background:
    radial-gradient(60% 56% at 50% 46%, rgba(213,0,0,.42), transparent 72%),
    radial-gradient(44% 44% at 22% 70%, rgba(79,107,232,.3), transparent 72%);
  filter:blur(58px); opacity:.95; pointer-events:none;
}
.bx .pv{
  position:relative; z-index:1;
  border-radius:var(--g-r-xl);
  border:1px solid var(--g-edge);
  background:
    linear-gradient(180deg, rgba(20,24,32,.82), rgba(9,11,16,.9));
  /* No backdrop blur. This panel is 82 to 90 percent opaque, so the
     blur behind it was worth almost nothing to look at and 7fps of a
     23.6fps page to draw, measured. The fill and the lit edge carry
     the glass. */
  box-shadow:var(--g-top), var(--g-drop-lg);
  overflow:hidden;
  transform:rotateX(7deg) translateZ(0);
  transform-origin:50% 100%;
  transition:transform .7s var(--bx-ease);
}
/* A rim of light along the top edge, the way a real panel catches a
   source above it. One pixel, and it is the difference between a box and
   an object. */
.bx .pv::before{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.5) 22%, rgba(255,255,255,.5) 78%, transparent);
  pointer-events:none;
}
/* No CSS hover tilt. js/riskora-fx.js springs the panel toward the
   pointer and writes an inline transform, which beats this rule
   anyway; the two only ever disagreed. */

.bx .pv__bar{
  display:flex; align-items:center; gap:12px;
  padding:13px 18px;
  border-bottom:1px solid var(--bx-line);
  background:rgba(255,255,255,.028);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px; color:var(--bx-ink-3);
}
.bx .pv__dots{ display:flex; gap:6px; flex:none; }
.bx .pv__dots i{
  width:9px; height:9px; border-radius:50%; display:block;
  background:rgba(255,255,255,.14);
}
.bx .pv__file{ color:var(--bx-ink-2); letter-spacing:.02em; }
.bx .pv__tag{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:999px;
  border:1px solid rgba(53,217,171,.3);
  background:rgba(53,217,171,.1);
  color:var(--bx-up); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase;
}
.bx .pv__tag::before{
  content:''; width:5px; height:5px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor;
}

.bx .pv__body{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px, 3vw, 40px);
  padding:clamp(22px, 3vw, 34px);
  text-align:left; align-items:center;
}

/* .hx__fig is gone: the panel leads with three named findings now,
   which is section 22. */

.bx .pv__kpi{
  margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--bx-line);
  border:1px solid var(--bx-line); border-radius:var(--g-r);
  overflow:hidden;
}
.bx .pv__kpi > div{
  display:flex; flex-direction:column; gap:3px;
  padding:13px 15px; background:rgba(10,12,17,.72);
}
.bx .pv__kpi dt{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx .pv__kpi dd{
  margin:0; font-size:1.3rem; font-weight:600; letter-spacing:-.025em;
  color:var(--bx-ink);
}
.bx .pv__kpi dd.is-loss{ color:var(--bx-red); }

/* The strip and its two controls live in the panel's foot, full width,
   because the strip is sixteen marks and wants the run. */
.bx .pv__foot{
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:14px;
  padding-top:clamp(18px, 2.4vw, 26px);
  border-top:1px solid var(--bx-line);
}
.bx .pv__foot .rp__strip{
  display:flex; align-items:flex-end; gap:clamp(4px, .9vw, 10px);
  height:clamp(76px, 10vw, 112px); width:100%;
}
.bx .pv__foot .rp__pick{ display:flex; flex-wrap:wrap; gap:10px; }
.bx .pv__foot .bx-finding__hint{ margin:0; }

@media (max-width:860px){
  .bx .pv__body{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .bx .pv{ transform:none; }
}

/* ── the mark strip ──────────────────────────────────────────────────── */
/*
   Sixteen bars, one per closed round trip, each as tall as the position
   was held. The height is set by js/riskora-hero.js as a percentage, so
   nothing here may give a mark a fixed height.

   Winners carry the cool structural hue and losers the brand red, which
   is the first place on the page where the two colours do opposite work
   at the same moment. Previously both were red at different opacities,
   so the strip said nothing until you read the label under it.
*/
/* The real structure is #bookStrip.rp__strip > .bx-marks > .bx-marks__m,
   built by js/riskora-hero.js. Styling the strip's direct child paints
   the wrapper rather than the sixteen marks, which is exactly what it
   did: one blue slab the width of the panel. */
.bx .pv__foot .rp__strip{ display:block; height:auto; }
.bx .pv__foot .rp__strip .bx-marks{
  display:flex; align-items:flex-end; gap:clamp(4px, .8vw, 9px);
  height:clamp(72px, 9vw, 104px); width:100%; margin:0;
}
.bx .bx-marks__m{
  flex:1 1 0; min-width:0; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, rgba(138,164,255,.92), rgba(79,107,232,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
  opacity:1;
  transition:opacity .34s var(--bx-ease), transform .34s var(--bx-spring),
             filter .34s var(--bx-ease), box-shadow .34s var(--bx-ease);
  transform-origin:50% 100%;
}
.bx .bx-marks__m.is-loss{
  background:linear-gradient(180deg, rgba(255,107,99,.96), rgba(213,0,0,.3));
}
.bx .bx-marks__m.is-on{
  filter:brightness(1.22) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px -1px rgba(138,164,255,.7);
}
.bx .bx-marks__m.is-loss.is-on{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px -1px rgba(255,59,56,.75);
}
.bx .bx-marks__m.is-off{ opacity:.14; filter:grayscale(.7); }

/* The two figures become pressable cards rather than text with a border. */
.bx .bx-finding__v{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:11px 17px; border-radius:999px; cursor:pointer;
  border:1px solid var(--g-edge); background:var(--g-fill);
  box-shadow:var(--g-top);
  color:var(--bx-ink); font-family:inherit; font-size:14px;
  transition:border-color .2s var(--bx-ease), background .2s var(--bx-ease),
             transform .2s var(--bx-spring);
}
.bx .bx-finding__v strong{
  font-size:1.45rem; font-weight:600; letter-spacing:-.03em;
  color:var(--bx-cool);
}
.bx .bx-finding__v--loss strong{ color:var(--bx-red); }
.bx .bx-finding__v span{
  font-size:12px; color:var(--bx-ink-3); letter-spacing:-.005em;
}
.bx .bx-finding__v:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  background:var(--g-fill-2);
}
.bx .bx-finding__v[aria-pressed="true"]{
  border-color:rgba(138,164,255,.5);
  background:rgba(138,164,255,.12);
  box-shadow:var(--g-top), 0 0 0 3px rgba(138,164,255,.1);
}
.bx .bx-finding__v--loss[aria-pressed="true"]{
  border-color:rgba(255,107,99,.5);
  background:rgba(255,107,99,.12);
  box-shadow:var(--g-top), 0 0 0 3px rgba(255,107,99,.1);
}
.bx .bx-finding__v:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:3px; }
.bx .bx-finding__hint{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.07em; color:var(--bx-ink-3);
}

/* There is no scroll cue. One was tried, anchored to the bottom of the
   first screen, and on every desktop height that lands on top of the
   hero panel: a word printed across the product. The panel running past
   the fold already says there is more below, more clearly than a word
   does. */

/* ──────────────────────────────────────────────────── 6 · the panel recipe */
/*
   Every object on the page that is an instrument rather than a sentence
   gets the same treatment, so the reader can tell the two apart without
   being told. The old page gave the chart a border and the ledger a
   border and nothing else, and they looked like two different decisions.
*/
.bx .lg,
.bx .bx-chart__cv,
.bx .sc,
.bx .bx-limits,
.bx .bx-two__col,
.bx .bx-weights > li,
.bx .bx-spine__n,
.bx .bx-split__side{
  border-radius:var(--g-r-lg);
  border:1px solid var(--g-edge);
  background:var(--g-fill);
  box-shadow:var(--g-top), var(--g-drop);
}

/* The ledger. Full bleed was right; a full bleed slab with no edges was
   not. It becomes one long instrument with its own chrome. */
.bx .lg{
  border-radius:var(--g-r-xl);
  background:linear-gradient(180deg, rgba(17,20,27,.74), rgba(8,10,14,.84));
  /* clip, NOT hidden. The panel has to clip its corners to its radius,
     but overflow:hidden makes an element a scroll container, and the
     readout inside this one is position:sticky: it would have stuck to
     the panel and stopped travelling. clip crops to the same rounded
     box without creating a scroll container, which is the whole reason
     .bx-scene uses it too. */
  overflow:clip;
}
.bx .lg__head{
  padding:clamp(24px, 3vw, 38px) clamp(20px, 3vw, 38px) clamp(18px, 2vw, 26px);
  border-bottom:1px solid var(--bx-line);
  /* It carried a 52px bottom margin, which separated it from the table
     when both sat on a borderless slab. Inside a panel that margin is
     52px of nothing below a rule: measured on a phone it opened a 95px
     void between the lede and the first figure. The rule does the
     separating now, and the readout brings its own padding. */
  margin-bottom:0;
}
.bx .lg__title{ font-size:var(--bx-t-head); line-height:1.02; }
.bx .lg__wrap{ padding:0 clamp(8px, 1.4vw, 18px); }
.bx .lg__foot{
  padding:clamp(16px, 2vw, 24px) clamp(20px, 3vw, 38px);
  border-top:1px solid var(--bx-line);
  background:rgba(255,255,255,.018);
  margin:0;
}
.bx .lg__r{ transition:background .16s var(--bx-ease); }
.bx .lg__r:hover,.bx .lg__r.is-pinned{ background:rgba(255,255,255,.045); }
.bx .lg__r--flag .lg__f em{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-style:normal; font-size:11px; letter-spacing:.02em;
  border:1px solid rgba(255,107,99,.3);
  background:rgba(255,107,99,.12); color:var(--bx-red);
}
.bx .lg__ok{ color:var(--bx-ink-3); opacity:.6; }

/* The market scene's reading column was 22rem. At the display sizes
   this file sets, "The market is visible." does not fit on one line in
   352px, so a headline written as two lines was setting as four. The
   column widens to 27rem, which is what that line actually needs. */
.bx .bx-scene--market{ grid-template-columns:minmax(0,27rem) minmax(0,1fr); }
.bx .bx-col--market{ max-width:27rem; }

/* The chart canvas is an instrument, so it gets the panel too. */
.bx .bx-chart__cv{
  background:linear-gradient(180deg, rgba(13,16,22,.8), rgba(7,9,13,.9));
  box-shadow:var(--g-top), var(--g-drop);
}

/* The scrubber. */
.bx .sc{ padding:clamp(16px, 2vw, 22px); background:var(--g-fill); }

/* The two privacy columns stop being two lists with a rule between them
   and become two panels that disagree, which is what they are. The left
   one is the cool hue, the right one neutral. */
.bx .bx-two{ gap:clamp(14px, 2vw, 22px); }
/* The verification pair, set apart from the two columns above it by a
   rule rather than a box: it is a continuation of the same argument, not
   a separate card. The links inside it are the only underlined text in
   this scene, which is the point, because they are what the reader is
   being invited to go and do. */
.bx .bx-two--verify{
  margin-top:clamp(22px, 3vh, 34px);
  padding-top:clamp(20px, 3vh, 30px);
  border-top:1px solid var(--bx-line);
}
.bx .bx-two--verify a{
  color:var(--bx-ink-2);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);
}
.bx .bx-two--verify a:hover{ color:var(--bx-ink); text-decoration-color:currentColor; }
.bx .bx-two__col{ padding:clamp(20px, 2.4vw, 28px); }
.bx .bx-two__col:first-child{
  border-color:rgba(138,164,255,.24);
  background:linear-gradient(180deg, rgba(138,164,255,.08), rgba(138,164,255,.02));
}
.bx .bx-two__k--live{ color:var(--bx-cool); }

/* The limits block. */
.bx .bx-limits{ padding:clamp(20px, 2.4vw, 30px); }

/* The spine nodes become cards on a rail. */
.bx .bx-spine__n{ padding:clamp(18px, 2.2vw, 26px); }
.bx .bx-spine__n--live{
  border-color:rgba(53,217,171,.26);
  background:linear-gradient(180deg, rgba(53,217,171,.08), rgba(53,217,171,.015));
}
.bx .bx-spine__s{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--g-edge); background:rgba(255,255,255,.05);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
}
.bx .bx-spine__n--live .bx-spine__s{
  border-color:rgba(53,217,171,.32); background:rgba(53,217,171,.12);
  color:var(--bx-up);
}
.bx .bx-spine__s::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.9;
}

/* The winners/losers split, on the red wall. Glass over red needs white
   at a higher alpha than glass over black, or it disappears. */
.bx .bx-split{ gap:clamp(14px, 2vw, 22px); }
.bx .bx-split__side{
  padding:clamp(18px, 2.2vw, 26px);
  border-color:rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 20px 50px -24px rgba(0,0,0,.6);
}
.bx .bx-split__side + .bx-split__side{ border-left:1px solid rgba(255,255,255,.2); }
/* The panels are a white wash over the wall, so the ground under their
   labels is a lighter red than the wall itself: measured rgb(212,49,49),
   on which the wall's own label tint falls to 4.10. White measures 4.90
   on it. */
.bx .bx-scene--red .bx-split__k{ color:#fff; }

/* ──────────────────────────────────────────────────────────── 7 · the bento */
/*
   WHAT WAS HERE. An ordered list of five rows, each a number, a name and
   a disclosure. Correct, and the fifth identical block of the page.

   WHAT IT BECOMES. An asymmetric grid: the two heaviest behaviours take
   the wide cells, the three lighter ones take the narrow row underneath.
   The weight is drawn twice, once as a ghost numeral the size of the
   cell and once as a readable figure, so the grid has a visual order
   that matches its actual order of importance.

   The count in each cell is still computed at runtime by
   js/riskora-behaviours.js from the same book the geometry is built
   from, and three of the five still find nothing in the sample. A cell
   that found nothing is dimmed rather than hidden, because that is the
   demonstration.
*/
.bx .bx-weights{
  display:grid; gap:clamp(12px, 1.6vw, 18px);
  grid-template-columns:repeat(6, minmax(0,1fr));
  /* start, not stretch. A cell holds a disclosure, so opening one makes
     its row taller, and a stretched neighbour grows with it into a tall
     card holding one line of text. Each cell keeps its own height and
     only the opened one grows. */
  align-items:start;
  list-style:none; margin:var(--bx-s4) 0 0; padding:0;
  counter-reset:none;
}
.bx .bx-weights > li{
  position:relative; overflow:hidden; grid-column:span 2;
  padding:0; isolation:isolate;
  display:flex; flex-direction:column;
  transition:border-color .25s var(--bx-ease), transform .25s var(--bx-ease),
             background .25s var(--bx-ease);
}
.bx .bx-weights > li:nth-child(1),
.bx .bx-weights > li:nth-child(2){ grid-column:span 3; }
.bx .bx-weights > li::before{ content:none; }

/* The pointer-reactive bloom. --mx/--my are written by
   js/riskora-glass.js; without the script the custom properties fall
   back to the cell's centre and the hover is a plain lift, so nothing
   here depends on it. */
.bx .bx-weights > li::after{
  content:''; position:absolute; z-index:-1; inset:-1px;
  border-radius:inherit; opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(255,59,56,.16), transparent 68%);
  transition:opacity .3s var(--bx-ease);
  pointer-events:none;
}
.bx .bx-weights > li:hover{
  border-color:rgba(255,255,255,.18);
  transform:translateY(-2px);
}
.bx .bx-weights > li:hover::after{ opacity:1; }

.bx .bx-weights__btn{
  position:relative; width:100%; flex:1 1 auto;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:clamp(20px, 2.3vw, 28px);
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit; color:inherit;
}
/* The weight is drawn twice: as a readable chip and as a watermark the
   size of the cell. Which element plays which part is settled in
   section 18, because getting it the other way round put the only real
   text node at 1.01:1 and the readable copy in a pseudo-element. */

.bx .bx-weights__t{ display:flex; flex-direction:column; gap:7px; }
.bx .bx-weights__h{
  font-size:clamp(1.15rem, 1.7vw, 1.45rem); font-weight:600;
  letter-spacing:-.025em; line-height:1.15; color:var(--bx-ink);
  max-width:15ch;
}
/* The readable weight, as a chip above the name. */
.bx .bx-weights__btn::before{
  content:'Weight ' attr(data-weight);
  align-self:flex-start;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--g-edge); background:rgba(255,255,255,.05);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx .bx-weights__c{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--bx-ink-3); letter-spacing:-.005em;
}
.bx .bx-weights__c::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--bx-ink-3); opacity:.5;
}
/* A cell that found something lights its dot and warms its edge.
   riskora-behaviours.js marks the cell, so this only gives the mark a
   colour; before that script runs nothing is marked and every cell is
   neutral, which is the correct resting state rather than a flash of
   five findings that have not been computed yet. */
.bx .bx-weights > li.is-found{ border-color:rgba(255,107,99,.26); }
.bx .bx-weights > li.is-found .bx-weights__c{ color:var(--bx-red); }
.bx .bx-weights > li.is-found .bx-weights__c::before{
  background:var(--bx-brand); opacity:1;
  box-shadow:0 0 0 3px rgba(255,59,56,.16), 0 0 9px rgba(255,59,56,.8);
}
.bx .bx-weights > li.is-none .bx-weights__h{ color:var(--bx-ink-2); }

/* The open cell. */
.bx .bx-weights > li:has(.bx-weights__btn.is-on){
  border-color:rgba(255,255,255,.22); background:var(--g-fill-2);
}

.bx .bx-weights__d{
  padding:0 clamp(20px, 2.3vw, 28px) clamp(20px, 2.3vw, 28px);
  border-top:1px solid var(--bx-line); margin-top:2px;
  padding-top:16px;
}
.bx .bx-weights__d p{
  margin:0 0 8px; font-size:13.5px; line-height:1.6; color:var(--bx-ink-2);
  max-width:46ch;
}
.bx .bx-weights__d p:last-child{ margin-bottom:0; }
.bx .bx-weights__found{ color:var(--bx-ink-3) !important; font-size:12.5px !important; }
.bx .bx-weights__btn:focus-visible{ outline:2px solid var(--bx-ink); outline-offset:-4px; }

@media (max-width:980px){
  .bx .bx-weights{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bx .bx-weights > li,
  .bx .bx-weights > li:nth-child(1),
  .bx .bx-weights > li:nth-child(2){ grid-column:span 1; }
}
@media (max-width:620px){
  .bx .bx-weights{ grid-template-columns:minmax(0,1fr); }
  .bx .bx-weights > li,
  .bx .bx-weights > li:nth-child(1),
  .bx .bx-weights > li:nth-child(2){ grid-column:span 1; }
}

/* ───────────────────────────────────────────────────── 8 · the big figures */
/*
   The 3.67x on the red wall was already the loudest thing on the page.
   It now sits in the same family as the hero figure, so the two read as
   one measurement shown twice rather than two unrelated layouts.
*/
.bx .bx-huge{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:4px clamp(16px, 2.2vw, 30px);
}
.bx .bx-huge__n{
  font-size:clamp(4.2rem, 11vw, 8.5rem); line-height:.84; font-weight:600;
  letter-spacing:-.055em;
}
/* The multiplication sign was set at the figure's own size in a lighter
   tone, which read as a stray glyph parked next to the number rather
   than as part of it. It is a unit, so it is sized like one. */
.bx .bx-huge__n i{
  font-style:normal; font-size:.36em; font-weight:500;
  margin-left:.04em; opacity:.78;
}
.bx .bx-huge__c{
  max-width:22rem;
  font-size:clamp(1rem, 1.5vw, 1.2rem); line-height:1.4;
}

.bx .bx-facts b{ letter-spacing:-.04em; }

/* The cite links stop being underlined grey and become small chips, so
   a figure and its receipt read as one object. */
.bx .bx-cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  border:1px solid var(--g-edge); background:rgba(255,255,255,.04);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bx-ink-3); text-decoration:none;
  transition:color .18s var(--bx-ease), border-color .18s var(--bx-ease),
             background .18s var(--bx-ease);
}
.bx .bx-cite::before{ content:'\2197'; font-size:11px; line-height:1; }
.bx .bx-cite:hover{
  color:var(--bx-ink); border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.09); text-decoration:none;
}
.bx .bx-scene--red .bx-cite{
  border-color:rgba(255,255,255,.3); background:rgba(0,0,0,.2); color:#fde8e8;
}
.bx .bx-scene--red .bx-cite:hover{ background:rgba(0,0,0,.34); color:#fff; }

/* The arrange toggle becomes a real segmented control. */
.bx .bx-toggle{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.24);
}
.bx .bx-toggle__k{
  padding:0 10px 0 8px; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#fbe6e6;
}
.bx .bx-toggle button{
  padding:8px 16px; border-radius:999px; border:0; cursor:pointer;
  background:none; color:#fde8e8;
  font-family:inherit; font-size:13px; font-weight:500;
  transition:background .2s var(--bx-ease), color .2s var(--bx-ease);
}
.bx .bx-toggle button:hover{ background:rgba(255,255,255,.12); }
.bx .bx-toggle button[aria-pressed="true"]{
  background:#fff; color:#B00000; font-weight:600;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.4);
}
.bx .bx-toggle button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* The flow steps, as three numbered cards on a rail. */
.bx .bx-flow{ gap:clamp(14px, 2vw, 20px); }
.bx .bx-flow__s{
  padding:clamp(20px, 2.3vw, 28px);
  border-radius:var(--g-r-lg); border:1px solid var(--g-edge);
  background:var(--g-fill); box-shadow:var(--g-top), var(--g-drop);
  text-align:left;
}
.bx .bx-flow__k{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--g-edge); background:rgba(255,255,255,.05);
  color:var(--bx-ink-3);
}
.bx .bx-flow__t{ letter-spacing:-.025em; }

/* The two closing paths, as two panels. */
.bx .bx-path{
  padding:clamp(22px, 2.6vw, 32px);
  border-radius:var(--g-r-lg); border:1px solid var(--g-edge);
  background:var(--g-fill); box-shadow:var(--g-top), var(--g-drop);
}
.bx .bx-path + .bx-path{ border-left:1px solid var(--g-edge); padding-left:clamp(22px,2.6vw,32px); }

/* ─────────────────────────────────────────────────────── 9 · section rhythm */
/*
   Every scene was the same height with the same padding, which is why
   the page scrolled like a deck. The scenes that carry an instrument now
   breathe wider than the ones that carry a sentence.
*/
/* THE LEDGER STOPS BLEEDING. .bx-bleed was width:100vw pulled back by
   margin-left:50% and a translate, which only lands centred when its
   parent's content box is exactly centred in the viewport. It never
   quite was, and on a flat slab with no visible edge nobody could see
   it: measured, the band sat 55px to the left. The moment the ledger
   became a panel with a radius and a hairline, that asymmetry was the
   first thing on the page.

   A panel with edges should not be bleeding in the first place, so it
   is a centred block in the page's own frame instead, and the band's
   ground and rules go with it because the panel now supplies both. */
.bx .bx-bleed{
  width:100%; max-width:var(--bx-wide-grid);
  margin-left:auto; margin-right:auto; transform:none;
  background:none; border-top:0; border-bottom:0; padding:0;
}
.bx .lg{ max-width:none; margin:0; padding:0; }

/* The readout still has to be opaque where it sticks, or the rows run
   through the numbers; it just takes the panel's glass instead of the
   old flat --bx-ground-2, which is no longer the colour behind it. */
.bx .lg__readout{
  top:88px;
  background:rgba(12,15,21,.93);
  /* 93 percent opaque already; see .pv on why there is no blur. */
  margin-inline:calc(clamp(20px, 3vw, 38px) * -1);
  padding-inline:clamp(20px, 3vw, 38px);
}
html.light .bx .lg__readout{ background:rgba(255,255,255,.95); }

/* The inspector reserves 118px so a sticky panel never jumps as the
   pointer moves between rows, which is right. On a flat slab that
   reservation read as nothing; inside a panel it read as a hole. The
   reservation stays and the idle state fills it, so the space is an
   invitation rather than a gap. */
.bx .lg__insp__idle{
  display:flex; align-items:center; gap:11px;
  min-height:84px; padding:0 18px;
  border:1px dashed var(--bx-line-2); border-radius:var(--g-r);
  color:var(--bx-ink-3); background:rgba(255,255,255,.015);
}
/* ── the red wall ────────────────────────────────────────────────────
   TWO FAULTS, ONE CAUSE. The scene is a two column grid with everything
   in the first column, so at 1440 the right half was an empty red
   rectangle, which was the most unfinished-looking thing on the page.
   And the wall was fully opaque, so it covered the WebGL surface
   completely: the one scene whose entire subject is watching the
   sixteen decisions sort themselves was hiding the sixteen decisions
   sorting themselves. The emptiness and the hiding were the same
   mistake, and they have the same fix.

   The wall now fades across. The reading half stays solid brand red,
   where white measures 5.48:1 and the two tinted greys measure 5.00
   and 4.59. Past the text it thins out, and the terrain the scene is
   talking about comes through underneath it. The empty half is filled
   by the actual subject rather than by more content.

   Below 1100px the grid is one column and the text crosses the whole
   width, so the fade turns vertical and the reading band stays solid. */
/* THE WALL IS RED EVERYWHERE, OR IT IS NOT A RED WALL.

   The fade-across was meant to let the terrain through on the right so
   the empty half had something in it. It did not work: measured, the
   far end composites to #2b0a0c, which is not red, it is dirt. The
   terrain never showed through it either, because by the time the wall
   was transparent enough to see past, it was also dark enough to hide
   what was behind. The empty half is filled by the sorted bars now,
   which is what that problem actually needed.

   So this is one confident red field, lit from the corner the headline
   sits in and deepening away from it. Every stop is unmistakably red
   and every stop carries the body copy:

     stop      white  ink-2 #FFF4F3  ink-3 #FFEDEC
     #D4191A    5.31       4.93           4.70
     #C41317    5.78       5.37           5.12
     #AC1014    6.90       6.41           6.11
     #8E0C13    9.42       8.75           8.35
     #780A12   11.47      10.66          10.17

   The brightest stop is the ceiling, not a preference: at #E3261F the
   secondary tint falls to 4.07 and at #FF2D2A white itself is 3.71. */
.bx .bx-scene--red{
  --bx-ink:#ffffff;
  --bx-ink-2:#FFF4F3;
  --bx-ink-3:#FFEDEC;
  background:
    radial-gradient(120% 98% at 15% 3%,
      #D4191A  0%,
      #C41317 36%,
      #AC1014 64%,
      #8E0C13 86%,
      #780A12 100%);
}
/* Sheen and fall-off, both in the red family. The old pair laid a 42
   percent BLACK radial across the lower middle, which was half of why
   the wall went muddy. */
.bx .bx-scene--red::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(64% 46% at 14% 2%, rgba(255,146,106,.22), transparent 70%),
    radial-gradient(90% 70% at 88% 108%, rgba(74,2,14,.5), transparent 74%);
}
/* An absolutely positioned pseudo-element paints above in-flow content,
   so without this the wash would sit on top of the type rather than
   under it. */
.bx .bx-scene--red > *{ position:relative; z-index:1; }
@media (max-width:1100px){
  /* One column, so the lit corner moves to the top where the headline
     now is and the fall-off runs down rather than across. Same stops. */
  .bx .bx-scene--red{
    background:radial-gradient(130% 70% at 20% 0%,
      #D4191A 0%, #C41317 38%, #A60F14 72%, #820B12 100%);
  }
}
/* ── the privacy scene stops being a white page ──────────────────────
   blackbox.css redefines every token here to a light palette, so this
   one section rendered as a near-white document dropped into the
   middle of a lit dark page. It was the last thing on the site that
   still looked like a printout, and flipping the whole surface is a
   very heavy way to say "this part is different".

   It is still different, and by the same amount; it is simply told in
   hue rather than in polarity. This is the scene about the file not
   leaving the browser, so it takes the cool structural blue the rest
   of the page reserves for the safe state, and nothing else on the
   page is blue.

   Measured against this scene's own ground #070A12:
     --bx-ink    #F6F8FD  18.4:1
     --bx-ink-2  #A9B5D0   9.6:1
     --bx-ink-3  #8590AB   6.1:1
     --bx-cool   #8AA4FF   8.3:1   the "never leaves" label
     --bx-red    #FF6B63   6.5:1 */
.bx .bx-scene--pale{
  --bx-ground:#070A12;
  --bx-ground-2:#0C1120;
  --bx-line:rgba(138,164,255,.13);
  --bx-line-2:rgba(138,164,255,.24);
  --bx-ink:#F6F8FD;
  --bx-ink-2:#A9B5D0;
  --bx-ink-3:#8590AB;
  --bx-red:#FF6B63;
  --bx-red-deep:#D50000;
  color:var(--bx-ink);
  border-top:1px solid rgba(138,164,255,.16);
  border-bottom:1px solid rgba(138,164,255,.16);
}
/* blackbox paints this scene's ground on a ::before that covers the
   whole section, so the gradient has to go there or it is hidden. */
.bx .bx-scene--pale::before{
  background:
    radial-gradient(94% 72% at 12% 0%, rgba(79,107,232,.26), transparent 66%),
    radial-gradient(70% 60% at 94% 100%, rgba(138,164,255,.12), transparent 70%),
    linear-gradient(180deg, #080B16 0%, #060810 100%) !important;
}

/* The reel. A rail of ticks on the left margin, now with a lit current
   entry rather than a brighter grey one. */
.bx .bx-reel__d{ transition:background .25s var(--bx-ease), transform .25s var(--bx-ease); }
.bx .bx-reel a[aria-current="true"] .bx-reel__d,
.bx .bx-reel a.is-on .bx-reel__d{
  background:var(--bx-brand);
  box-shadow:0 0 0 3px rgba(255,59,56,.16), 0 0 10px rgba(255,59,56,.9);
}

/* ──────────────────────────────────────────────────────────── 10 · motion */
/*
   One entrance, used everywhere, driven by js/riskora-motion.js which
   already adds .is-in. Elements rise and settle; nothing slides in from
   the side, because sixteen things sliding in from the side is the other
   way a page reads as a deck.
*/
/*
   THE HIDDEN STATE IS NEVER SET FROM A STYLESHEET. js/riskora-motion.js
   adds .rise to mark an element hidden and .rise--in to release it, in
   that order, so a page whose JavaScript fails to load is readable
   rather than blank. Styling [data-rise] here would quietly undo that.

   The hero panel is no longer among them: js/riskora-fx.js owns its
   entrance and its recession on Motion, and a CSS rule setting the
   same transform would fight the scroll binding. Without Motion the
   panel simply arrives in place, which is the readable failure.
*/

@media (prefers-reduced-motion:reduce){
  .bx-aurora i{ animation:none; }
  .bx .bx-btn,.bx .bx-finding__v,.bx .bx-weights > li,.bx .pv{ transition:none; }
  .bx .bx-btn:hover,.bx .bx-finding__v:hover,.bx .bx-weights > li:hover{ transform:none; }
}

/* ───────────────────────────────────────────────────── 11 · the light theme */
/*
   The page defaults to dark and the toggle is unchanged, so this only
   has to keep the light side legible rather than beautiful. Glass over a
   pale ground needs a dark edge and a dark fill, or every panel vanishes.
*/
html.light .bx{
  --bx-ground:#F4F6F9;
  --bx-ground-2:#FFFFFF;
  --bx-line:rgba(10,14,22,.1);
  --bx-line-2:rgba(10,14,22,.18);
  --bx-ink:#0B0E14;
  --bx-ink-2:#424B59;
  --bx-ink-3:#5A6372;
  --bx-red:#C40D0D;
  --bx-cool:#2F49B8;
  --bx-up:#0A7D5F;
  --g-fill:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  --g-fill-2:linear-gradient(180deg, #fff, rgba(255,255,255,.8));
  --g-edge:rgba(10,14,22,.1);
  --g-top:inset 0 1px 0 rgba(255,255,255,.9);
  --g-drop:0 14px 34px -18px rgba(10,14,22,.26);
  --g-drop-lg:0 26px 60px -24px rgba(10,14,22,.3);
}
html.light .bx header{ background:rgba(255,255,255,.76) !important; }
/* The hero scrim is a near-black wash, which is the right way to lift
   dark-theme text off a bright bloom and exactly the wrong way round
   here: on the pale side it would lay a dark panel under dark text.
   Same scrim, same geometry, opposite polarity. */
html.light .bx .hx::before{
  background:radial-gradient(74% 62% at 50% 40%,
    rgba(255,255,255,.78) 0%, rgba(255,255,255,.52) 46%, rgba(255,255,255,0) 100%);
}
/* The headline gradient is built to emit light against near-black. Its
   first stop, #FF9A6B, measures 1.90:1 on this ground, so on the pale
   side the line is set solid in the light theme's own deep red, which
   measures 5.57:1. */
html.light .bx .hx__h1__em{
  background:none; -webkit-text-fill-color:currentColor; color:var(--bx-red);
}
html.light .bx .pv{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,251,.92));
}
html.light .bx .pv__kpi > div{ background:#fff; }
html.light .bx .pv::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9) 22%,
    rgba(255,255,255,.9) 78%, transparent);
}
html.light .bx .lg{ background:linear-gradient(180deg,#fff,rgba(247,249,252,.96)); }
html.light .bx .bx-weights__w{ color:rgba(10,14,22,.055); }
html.light .bx .bx-scene--pale{
  background:linear-gradient(180deg, rgba(47,73,184,.06), rgba(47,73,184,.015));
}

/* ─────────────────────────────────────────────────────── 12 · narrow widths */
@media (max-width:760px){
  .bx{ --bx-t-display:clamp(2.3rem, 10vw, 3.2rem); }
  .bx .hx{ padding-top:104px; gap:30px; min-height:auto; }
  .bx .hx__in{ gap:18px; }
  /* Both actions full width and the same width. Two capsules of
     different lengths stacked on a phone read as one button and one
     mistake. */
  .bx .hx__cta{ flex-direction:column; align-self:stretch; width:100%; }
  .bx .hx__cta .bx-btn{ width:100%; }
  .bx .pv__bar{ padding:11px 14px; font-size:10.5px; }
  .bx .pv__file{ display:none; }
  .bx .pv__kpi{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bx .bx-finding__v{ width:100%; }
  .bx .bx-path + .bx-path{ border-left:1px solid var(--g-edge); padding-top:clamp(22px,2.6vw,32px); }
}
@media (max-width:420px){
  .bx .pv__foot .rp__strip{ gap:3px; height:72px; }
  .bx .hx__under{ font-size:10px; }
}

/* Nothing on this page may scroll the document sideways. The panels all
   clip their own content and the one table that cannot scrolls inside
   its own region, which is keyboard reachable. */
.bx .lg__wrap{ overscroll-behavior-x:contain; }

/* The condensed header. js/riskora-glass.js adds .is-stuck once the page
   has moved, so the first screen keeps its full height of air. */
.bx header.is-stuck{
  top:10px;
  background:rgba(9,11,16,.82) !important;
  box-shadow:var(--g-top), 0 20px 50px -20px rgba(0,0,0,.95);
}
html.light .bx header.is-stuck{ background:rgba(255,255,255,.88) !important; }
@media (max-width:760px){ .bx header.is-stuck{ top:6px; } }

/* ─────────────────────────────────────────────────── 13 · the pattern bars */
/*
   The right half of the red wall, built by js/riskora-pattern.js: the
   sixteen rows of the book as sixteen bars, reordered by the toggle.

   COLOUR ON A RED GROUND. Winners are white and losers are a near black
   red, which is the only pairing that survives this background: measured
   against the wall's reading half at #C60F0F, white is 5.48:1 and
   #2E0000 is 3.33:1, both clear of the 3:1 that WCAG 1.4.11 asks of a
   graphic that carries meaning. Brand red on brand red would have
   carried none of it.

   The bars are placed by transform rather than by document order, so a
   reorder is one compositor transition instead of sixteen reflows.
*/
/* THE BARS GET THEIR OWN GROUND.

   They used to be drawn straight onto the wall, white for winners and
   a near-black red for losers. That only worked while the wall's right
   side was washing out to almost black: against a wall that is red all
   the way across, a dark bar measures 2.4 on the deep end and 1.6 at
   the far corner, so half the data disappeared. Dark-on-red has no
   range to work with, at any brightness the wall can legally be.

   So the bars sit on a panel, like every other instrument on this
   page, and inside it they use the same two colours as the strip in
   the hero: cool for closed in profit, brand red for closed at a loss.
   Measured on the panel's own composited ground, about #2A0609:
     winners #8AA4FF  7.9:1
     losers  #FF6B63  6.6:1
   Both clear of the 3:1 a graphic carrying meaning has to hold, and
   now the encoding is the same one the reader already learned at the
   top of the page instead of a second one invented for this scene. */
.bx .pt{
  grid-column:2; align-self:center; justify-self:stretch;
  max-width:30rem; margin-left:auto;
  display:flex; flex-direction:column; gap:16px;
  --pt-row:26px;
  padding:clamp(18px, 2.2vw, 26px);
  border-radius:var(--g-r-lg);
  border:1px solid rgba(255,255,255,.17);
  background:linear-gradient(180deg, rgba(26,3,6,.74), rgba(14,1,3,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
             0 26px 60px -28px rgba(50,0,6,.85);
}
.bx .pt__list{
  position:relative; list-style:none; margin:0; padding:0;
  height:calc(16 * var(--pt-row));
}
.bx .pt__r{
  position:absolute; left:0; right:0; top:0; height:var(--pt-row);
  display:grid; grid-template-columns:1.9rem minmax(0,1fr) 2.9rem;
  align-items:center; gap:10px;
  transform:translateY(calc(var(--slot, 0) * var(--pt-row)));
  transition:transform .62s var(--bx-ease);
  transition-delay:var(--d, 0ms);
}
.bx .pt__n,.bx .pt__v{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.04em; color:#D9C2C4;
}
.bx .pt__v{ text-align:right; font-variant-numeric:tabular-nums; }
.bx .pt__t{
  height:9px; border-radius:999px; min-width:0;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
}
.bx .pt__b{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, rgba(138,164,255,.55), #8AA4FF);
  transition:background .4s var(--bx-ease);
}
.bx .pt__r--loss .pt__b{
  background:linear-gradient(90deg, rgba(255,107,99,.6), #FF6B63);
}
.bx .pt__r--loss .pt__n,.bx .pt__r--loss .pt__v{ color:#fff; font-weight:600; }

.bx .pt__cap{
  margin:0; max-width:26rem;
  font-size:12.5px; line-height:1.55; color:#E8D4D5;
}

/* Under the two column breakpoint the scene stacks, so the bars follow
   the reading instead of sitting beside it, and they get the full
   width because that is where the resolution of a bar chart lives. */
@media (max-width:1100px){
  .bx .pt{
    grid-column:1; max-width:none; margin-left:0;
    margin-top:clamp(28px, 4vh, 48px);
  }
}
@media (max-width:520px){
  .bx .pt{ --pt-row:23px; }
  .bx .pt__r{ grid-template-columns:1.7rem minmax(0,1fr) 2.6rem; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  .bx .pt__r{ transition:none; transition-delay:0ms; }
}

/* ────────────────────────────────────────────── 14 · filling the half-scenes */
/*
   Two more scenes put everything in the first column of a two column
   grid and left the second one empty. On a flat page nobody noticed;
   with light behind it an empty half reads as unfinished.

   These are not filled with invented content. The privacy scene's two
   columns and the behaviour grid are already the right shape to use the
   whole frame; they were being held inside a reading-width column that
   was meant for prose. So the prose keeps the reading measure and the
   instruments take the frame, which is the correct relationship anyway.
*/
.bx .bx-col--wide{ max-width:var(--bx-wide-grid); }
.bx .bx-col--wide > .bx-eyebrow,
.bx .bx-col--wide > .bx-h2,
.bx .bx-col--wide > .bx-body,
.bx .bx-col--wide > .bx-lede,
.bx .bx-col--wide > .bx-note{ max-width:44rem; }

.bx .bx-scene--pale .bx-col{ max-width:var(--bx-wide-grid); }
.bx .bx-scene--pale .bx-col > .bx-eyebrow,
.bx .bx-scene--pale .bx-col > .bx-h2,
.bx .bx-scene--pale .bx-col > .bx-body,
.bx .bx-scene--pale .bx-col > .bx-facts,
.bx .bx-scene--pale .bx-col > .bx-note{ max-width:44rem; }

/* ──────────────────────────────────────────────── 15 · leftovers and measures */
/*
   THE SPINE'S RAIL. blackbox draws a hairline across the four nodes and
   a small tick where each one meets it, which was exactly right while
   the nodes were borderless columns sharing one rule. They are cards
   now, so the rule ran behind four panels and each tick became a stray
   square floating in a panel's top-left corner. Both go. The ordering
   they carried is said in words by the status pill in every card, which
   is the more honest place for it anyway.
*/
.bx .bx-spine{ gap:clamp(12px, 1.6vw, 18px); padding-top:0; }
.bx .bx-spine::before{ display:none; }
.bx .bx-spine__n::before{ display:none; }
.bx .bx-spine__n + .bx-spine__n{ padding-left:clamp(18px, 2.2vw, 26px); border-left:0; }
.bx .bx-spine__n{ padding:clamp(18px, 2.2vw, 26px); }
.bx .bx-spine__t{ margin-top:12px; letter-spacing:-.025em; }

/*
   DISPLAY TYPE AND READING TYPE WANT DIFFERENT MEASURES. 44rem is a
   reading measure; at 3.5rem it is about twelve words, so a headline
   written as two lines was setting as three with one word stranded on
   the last. Headlines get their own, wider measure.
*/
.bx .bx-col--wide > .bx-h2,
.bx .bx-scene--pale .bx-col > .bx-h2{ max-width:58rem; }

/*
   THE BARE FIGURES. b and span were set as inline siblings with no
   space between them, so a 0 and its label ran together: "0trades
   uploaded to run a report". They become a two track grid, the way the
   cited facts already are.
*/
.bx .bx-facts{
  display:flex; flex-wrap:wrap; gap:clamp(22px, 3.5vw, 54px);
  list-style:none; margin:var(--bx-s4) 0 0; padding:0;
}
.bx .bx-facts > li{
  display:flex; align-items:baseline; gap:16px;
  margin:0; padding:0;
}
.bx .bx-facts > li::before{ content:none; }
.bx .bx-facts b{
  font-size:clamp(2.6rem, 4.4vw, 3.6rem); line-height:.9; font-weight:600;
  letter-spacing:-.045em; color:var(--bx-ink);
}
.bx .bx-facts span{
  font-size:13.5px; line-height:1.45; color:var(--bx-ink-2); max-width:13rem;
}
/* The cited version carries a third element, the receipt, so it stacks
   its label and chip beside the figure instead of running them along. */
.bx .bx-facts--cited > li{ align-items:baseline; flex-wrap:wrap; }
.bx .bx-facts--cited span{ max-width:11rem; }

/*
   THE FLOW STEPS. Three cards on one row, and the numeral that marked
   each step was drawn by a counter on the list rather than on the step,
   so it sat on its own label. The step index is in the copy already
   ("You hand it", "It reads", "You get"), so the marker is dropped and
   the pill carries the step.
*/
.bx .bx-flow{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  list-style:none; margin:var(--bx-s4) 0 0; padding:0;
}
.bx .bx-flow__s::before,
.bx .bx-flow::before{ content:none; }
.bx .bx-flow__t{
  margin:12px 0 10px; font-size:1.2rem; font-weight:600; color:var(--bx-ink);
}
.bx .bx-flow__d{ font-size:13.5px; line-height:1.6; color:var(--bx-ink-2); margin:0; }
.bx .bx-flow__n{
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--bx-line);
  font-size:12.5px; line-height:1.5; color:var(--bx-ink-3);
}
@media (max-width:860px){
  .bx .bx-flow{ grid-template-columns:minmax(0,1fr); }
}

/*
   THE CLOSING PATHS. Two panels, so the hairline that used to divide
   them is now two edges meeting, which reads as a seam.
*/
.bx .bx-path + .bx-path{ border-left:1px solid var(--g-edge); }
.bx .bx-path__k{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--g-edge); background:rgba(255,255,255,.05);
  color:var(--bx-ink-3);
}
.bx .bx-path__d{ color:var(--bx-ink-2); }

/*
   THE LIMITS LIST AND THE PRIVACY LISTS. Both used a dash marker set at
   the same size as the text, which on a lit panel reads as a stray
   hyphen rather than a bullet.
*/
.bx .bx-limits li::marker,.bx .bx-list li::marker{ color:var(--bx-ink-3); }
.bx .bx-limits__k{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 16px; padding:4px 11px; border-radius:999px;
  border:1px solid var(--g-edge); background:rgba(255,255,255,.05);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx .bx-two__k{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.bx .bx-two__k--live{ color:var(--bx-cool); }
.bx .bx-two__k--live::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--bx-up);
  box-shadow:0 0 0 3px rgba(53,217,171,.16);
}

/* ────────────────────────────────────────── 16 · the preserved pricing block */
/*
   #plans is lifted from the previous homepage and its markup is not
   ours to rewrite; the contract suite asserts its ids and its two
   handlers still exist. Nothing here touches any of that. Two reasons
   to reach into it from the stylesheet:

   CONTRAST, which is not negotiable. Its call to action is
   `linear-gradient(135deg, var(--accent), var(--accent-2))`, and the
   white label on it measures 4.33:1 against real painted pixels on
   "Start Omega" and on "Get my Discipline Score". That is under AA, on
   the only buttons on this page that take money. It takes the same
   gradient as every other primary action here, which measures 4.69 to
   7.77 down its stops.

   COHESION, which is the point of this layer. The page's primary action
   was a 999px capsule in Inter Tight everywhere except the one section
   where someone is actually deciding to pay, where it was a 10px
   rectangle in Chakra Petch. Two different buttons doing the same job
   on one page reads as two different sites.
*/
.bx .btn-submit{
  background:linear-gradient(180deg, #E02B26 0%, #D01A17 52%, #BE1310 100%);
  border-radius:999px;
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-weight:600; letter-spacing:-.005em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 10px 26px -12px rgba(213,0,0,.8);
  transition:transform .22s var(--bx-spring), box-shadow .22s var(--bx-ease);
}
.bx .btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 18px 40px -14px rgba(213,0,0,.9);
}
.bx .btn-submit:active{ transform:translateY(0); }
.bx .btn-outline,.bx .btn-dashboard{ border-radius:999px; }


/* ──────────────────────────────────────── 17 · the light theme, properly */
/*
   THE CASCADE PROBLEM. main site.html's own light stylesheet colours
   bare h2 and p (`html.light h2 { color:#0f0f0f }` and similar), which
   is one element-and-class more specific than the scene classes that
   read --bx-ink. On a scene whose ground follows the theme that is
   harmless, because both values are dark and nobody can tell. On a
   scene that keeps its own ground in both themes it is not: measured in
   light theme, the red wall's headline came out at 1.03:1, near black
   on brand red, and so did six other runs of text on it.

   This section does two things: it hands the scenes with their own
   ground their own ink back, and it lets the scene that does not need
   its own ground follow the theme instead of fighting it.
*/

/* ── the red wall is red in both themes, so its text stays white ───── */
html.light .bx .bx-scene--red h1,
html.light .bx .bx-scene--red h2,
html.light .bx .bx-scene--red h3,
html.light .bx .bx-scene--red .bx-h2{ color:var(--bx-ink); }
html.light .bx .bx-scene--red p,
html.light .bx .bx-scene--red li,
html.light .bx .bx-scene--red dt,
html.light .bx .bx-scene--red dd,
html.light .bx .bx-scene--red .bx-body,
html.light .bx .bx-scene--red .bx-huge__c,
html.light .bx .bx-scene--red .bx-split__n{ color:var(--bx-ink-2); }
html.light .bx .bx-scene--red .bx-huge__n,
html.light .bx .bx-scene--red .bx-split__v,
html.light .bx .bx-scene--red .bx-split__k{ color:#fff; }
/* The bars' panel is dark in both themes, because it is an instrument
   sitting on a red field either way, so its text does not flip. */
html.light .bx .bx-scene--red .pt__n,
html.light .bx .bx-scene--red .pt__v{ color:#D9C2C4; }
html.light .bx .bx-scene--red .pt__r--loss .pt__n,
html.light .bx .bx-scene--red .pt__r--loss .pt__v{ color:#fff; }
html.light .bx .bx-scene--red .pt__cap{ color:#E8D4D5; }

/* ── the privacy scene follows the theme instead of inverting it ───── */
/*
   In dark theme this scene is a cool dark band, which is section 9. A
   dark band dropped into a light page is exactly the same mistake in
   the other direction, so on the pale side it is a cool LIGHT band. The
   hue is the constant; the polarity follows the page.

   Measured on this scene's own ground #F2F5FC:
     --bx-ink    #0B0E14  17.9:1
     --bx-ink-2  #424B59   8.3:1
     --bx-ink-3  #545D6C   6.3:1
     --bx-cool   #2F49B8   7.0:1
*/
html.light .bx .bx-scene--pale{
  --bx-ground:#F2F5FC;
  --bx-ground-2:#FFFFFF;
  --bx-line:rgba(47,73,184,.14);
  --bx-line-2:rgba(47,73,184,.26);
  --bx-ink:#0B0E14;
  --bx-ink-2:#424B59;
  --bx-ink-3:#545D6C;
  --bx-cool:#2F49B8;
  --bx-red:#C40D0D;
  --g-fill:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
  --g-edge:rgba(47,73,184,.16);
  --g-top:inset 0 1px 0 rgba(255,255,255,.95);
  color:var(--bx-ink);
  border-top-color:rgba(47,73,184,.18);
  border-bottom-color:rgba(47,73,184,.18);
}
html.light .bx .bx-scene--pale::before{
  background:
    radial-gradient(94% 72% at 12% 0%, rgba(47,73,184,.12), transparent 66%),
    radial-gradient(70% 60% at 94% 100%, rgba(47,73,184,.07), transparent 70%),
    linear-gradient(180deg, #F2F5FC 0%, #FAFBFE 100%) !important;
}
html.light .bx .bx-scene--pale .bx-two__col:first-child{
  background:linear-gradient(180deg, rgba(47,73,184,.07), rgba(47,73,184,.02));
  border-color:rgba(47,73,184,.2);
}

/* ── the disclosure bar over the red wall ──────────────────────────── */
/*
   At 88 percent white the bar composites to a pink over the wall, and
   the beta tag on it measured 4.44 and 4.37. Opaque, and the tag takes
   the light theme's deep red: 5.9:1 on white.
*/
html.light .bx .floating-stats{ background:rgba(255,255,255,.97) !important; }
html.light .bx .floating-stats .stat .val{ color:#C40D0D; }

/* ── the spine's live pill ─────────────────────────────────────────── */
/* #0A7D5F on its own 10 percent tint measures 4.14. */
html.light .bx .bx-spine__n--live .bx-spine__s{ color:#06694F; }
html.light .bx .bx-spine__n--live{
  border-color:rgba(6,105,79,.3);
  background:linear-gradient(180deg, rgba(6,105,79,.09), rgba(6,105,79,.02));
}

/* ──────────────────────────────── 18 · the weight, read and drawn once */
/*
   The weight was in the markup once and on the screen twice: as a
   watermark numeral at five percent, which is the texture of the grid,
   and again as a chip built from CSS content. That left the only real
   text node on the page measuring 1.01:1, and put the readable copy in
   a pseudo-element, where a screen reader may or may not find it.

   Inverted. The real span is the chip, where it is readable and has
   proper contrast. The watermark is the pseudo-element, where it is
   what it always was: decoration, duplicating text that is already
   beside it, and therefore incidental under 1.4.3.
*/
.bx .bx-weights__w{
  position:static; align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--g-edge); background:rgba(255,255,255,.05);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; font-weight:600; letter-spacing:.12em;
  line-height:1.6; color:var(--bx-ink-3);
  z-index:auto; pointer-events:auto; user-select:auto;
}
.bx .bx-weights__w::before{ content:'Weight'; font-weight:500; }
.bx .bx-weights > li:nth-child(n+3) .bx-weights__w{ font-size:10px; }
html.light .bx .bx-weights__w{ background:rgba(10,14,22,.04); }

/* the watermark, decorative, drawn from the same attribute */
.bx .bx-weights__btn::before{ content:none; }
.bx .bx-weights__btn::after{
  content:attr(data-weight);
  position:absolute; right:clamp(10px, 1.4vw, 20px); bottom:-.22em;
  font-size:clamp(5rem, 11vw, 9rem); line-height:.8; font-weight:700;
  letter-spacing:-.06em; color:rgba(255,255,255,.055);
  pointer-events:none; user-select:none; z-index:-1;
}
.bx .bx-weights > li:nth-child(n+3) .bx-weights__btn::after{
  font-size:clamp(4rem, 8vw, 6.5rem);
}
.bx .bx-weights > li.is-none .bx-weights__btn::after{ color:rgba(255,255,255,.03); }
html.light .bx .bx-weights__btn::after{ color:rgba(10,14,22,.05); }
html.light .bx .bx-weights > li.is-none .bx-weights__btn::after{ color:rgba(10,14,22,.03); }

/* ───────────────────────────────────────── 19 · the cited facts, as rows */
/*
   Three figures, each with a label and a receipt. As a wrapping flex
   row they set as three ragged blocks whose labels broke to two lines
   and whose last receipt sat on top of the note underneath. They are
   rows now: figure right-aligned in a fixed column so the three line
   up on their units, label next, receipt pushed to the end.
*/
.bx .bx-facts--cited{
  display:flex; flex-direction:column; gap:0;
  margin:var(--bx-s4) 0 0;
}
.bx .bx-facts--cited > li{
  display:flex; align-items:center; gap:clamp(12px, 1.6vw, 20px);
  padding:14px 0; margin:0;
  border-top:1px solid var(--bx-line);
}
.bx .bx-facts--cited > li:last-child{ border-bottom:1px solid var(--bx-line); }
.bx .bx-facts--cited b{
  flex:none; min-width:4.2ch; text-align:right;
  font-size:clamp(2.1rem, 3.1vw, 2.8rem); line-height:1;
  letter-spacing:-.045em;
}
.bx .bx-facts--cited span{
  flex:1 1 auto; min-width:0; max-width:none;
  font-size:14px; line-height:1.4;
}
.bx .bx-facts--cited .bx-cite{ flex:none; margin-left:auto; }

@media (max-width:560px){
  .bx .bx-facts--cited > li{ flex-wrap:wrap; }
  .bx .bx-facts--cited .bx-cite{ margin-left:calc(4.2ch + clamp(12px, 1.6vw, 20px)); }
}

/* The note under them was butting straight into the last row. */
.bx .bx-note{ margin-top:var(--bx-s3); }


/* The ledger's four figures wrapped 2 / 1 / 1 on a phone, because a
   flex row breaks wherever it runs out of room and "Carrying
   something" is three times the width of "Rows". Two even columns. */
@media (max-width:620px){
  .bx .lg__meta{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px 18px;
  }
  .bx .lg__meta > div{ margin-right:0; padding-top:0; }
}

/* ──────────────────────────── 21 · the pricing block, in the same world */
/*
   Still no markup, no price, no id and no handler touched: #plans is
   lifted from the previous homepage and the contract asserts its ids
   and its two handlers. This is surface only, and it exists because a
   quarter of the page's length is this section and it was the one
   stretch that still looked like it came from a different site.

   The class names here are the ones the block actually uses, read off
   the rendered page rather than guessed: an earlier pass styled
   .plan-card, which does not exist in it.
*/
.bx .bx-scene--plans .free-strip,
.bx .bx-scene--plans .price-anchor,
.bx .bx-scene--plans .trial-band,
.bx .bx-scene--plans .founding-card,
.bx .bx-scene--plans .price-card,
.bx .bx-scene--plans .pricing-faq .pa-q{
  border-radius:var(--g-r-lg);
  border:1px solid var(--g-edge);
  background:var(--g-fill);
  box-shadow:var(--g-top), var(--g-drop);
}

/* Everything else on this page aligns to one 1180 frame. The anchor
   card was centred at a narrower width, so between two full-frame
   panels it read as a block that had slipped sideways rather than as a
   deliberately narrow one. */
.bx .bx-scene--plans .price-anchor{
  max-width:none; margin-left:0; margin-right:0;
}

/* The privacy line under the free tier was the only pure green on the
   page, set in mono at full saturation, and it shouted louder than the
   price above it. It takes the page's own upside tone, which is the
   colour the rest of the site already uses to mean this. */
.bx .bx-scene--plans .free-priv{
  color:var(--bx-up);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px; letter-spacing:.01em;
}

/* The section label and the FAQ questions take the page's label voice
   instead of their own. */
.bx .bx-scene--plans .section-label{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 11px; border-radius:999px;
  background:var(--g-fill); border:1px solid var(--g-edge);
  box-shadow:var(--g-top);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx .bx-scene--plans .pa-q{ padding:clamp(16px, 2vw, 22px); }

/* ─────────────────────────────────────── 22 · the three findings, in the panel */
/*
   The panel used to lead with 3.67x under the word "finding", which is
   the strongest number on the page and is meaningless to somebody two
   seconds into their first visit. Three named rows say what the
   product does in the time it takes to glance at them.

   They are set as a small table rather than as cards: name, figure,
   qualifier. The figure is the loud part and the qualifier is the
   honest part, and the honest part is what makes the loud part worth
   reading.
*/
.bx .pv__found{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:0;
}
/* ONE LINE PER FINDING. Set as name over figure over qualifier, three
   findings came to 275px and pushed themselves off the bottom of a
   900px window, which is the one place they have to be. On one line
   each they are 132px and they clear the fold at every common height. */
.bx .pv__found__r{
  display:grid;
  grid-template-columns:minmax(0,auto) auto minmax(0,1fr);
  align-items:baseline; gap:0 12px;
  padding:11px 0; margin:0;
  border-top:1px solid var(--bx-line);
}
.bx .pv__found__r:first-child{ border-top:0; padding-top:0; }
.bx .pv__found__r:last-child{ padding-bottom:0; }
.bx .pv__found__k{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bx-ink-3); white-space:nowrap;
}
.bx .pv__found__v{
  font-size:clamp(1.25rem, 1.9vw, 1.6rem); line-height:1;
  font-weight:600; letter-spacing:-.035em; color:var(--bx-ink);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  white-space:nowrap;
}
.bx .pv__found__r.is-loss .pv__found__v{ color:var(--bx-red); }
.bx .pv__found__n{
  min-width:0; font-size:12px; line-height:1.4; color:var(--bx-ink-2);
}

/* A found row carries a dot in the gutter, the same mark the behaviour
   grid uses, so the two read as one vocabulary. */
.bx .pv__found__k::before{
  content:''; display:inline-block; vertical-align:middle;
  width:6px; height:6px; border-radius:50%; margin-right:8px;
  background:var(--bx-ink-3); opacity:.45;
}
.bx .pv__found__r.is-loss .pv__found__k::before{
  background:var(--bx-brand); opacity:1;
  box-shadow:0 0 0 3px rgba(255,59,56,.16), 0 0 9px rgba(255,59,56,.75);
}

/* Under the panel's two column break the qualifier drops to its own
   line rather than squeezing to three words a line. */
/* Under the panel's two column break the qualifier drops to its own
   line. The figure stays LEFT, not right: the support bot is fixed to
   the bottom right of the window, so a figure pinned to the right edge
   of a full-width panel passes underneath it at some scroll position
   and the number the row exists for is the part that gets covered. */
@media (max-width:860px){
  .bx .pv__found__r{
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:'k v .' 'n n n'; gap:4px 12px;
    align-items:baseline;
  }
  .bx .pv__found__k{ grid-area:k; }
  .bx .pv__found__v{ grid-area:v; justify-self:start; }
  .bx .pv__found__n{ grid-area:n; }
}
@media (max-width:420px){
  .bx .hx__under{ gap:7px 16px; font-size:12.5px; }
}

/* ───────────────────────────────── 23 · short screens get a tighter hero */
/*
   A 1440x740 laptop is as common as a 1440x900 desktop, and on one the
   three findings ended 90px below the fold: the first screen showed a
   headline and the top edge of a panel. The hero is laid out against
   the viewport's HEIGHT as well as its width, so on a short screen the
   display type comes down a step and the rhythm tightens.

   Measured after, findings fully visible at: 740, 800, 900, 1000.
*/
@media (min-width:761px) and (max-height:860px){
  .bx .hx{
    gap:clamp(12px, 1.6vh, 18px);
    padding-top:clamp(76px, 9vh, 100px);
  }
  .bx .hx__in{ gap:12px; }
  .bx .hx__h1{ font-size:clamp(2.4rem, 4.6vw, 4.05rem); }
  .bx .hx__lede{ font-size:1.0625rem; max-width:44rem; }
  .bx .pv__bar{ padding:10px 16px; }
  .bx .pv__body{ padding:clamp(16px, 2vw, 24px); }
}
@media (min-width:761px) and (max-height:700px){
  .bx .hx__h1{ font-size:clamp(2.2rem, 4vw, 3.4rem); }
  .bx .hx__alt{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   24 · THE READ — the first screen, and the end of the generated look

   WHAT WENT, AND WHY EACH ONE HAD TO. Every item below is a default of
   the AI site builders shipping in 2026. Individually each is defensible;
   together they are a recognisable template, and no amount of refining
   them makes a page look authored:

     the aurora          three blurred colour blooms behind everything
     the centred stack   chip, headline, lede, two buttons, tick row
     the gradient line   a second headline line in clipped gradient text
     the glass slab      a translucent tilted panel with a lit edge
     the tick row        three green check marks under the actions
     the status pill     a capsule with a glowing dot in front of it

   WHAT REPLACES IT. An asymmetric two column grid: an argument on the
   left, the instrument on the right, and the instrument set like a
   printout rather than like a product shot. Bare. No radius, no fill,
   no shadow. The credibility of this page rests on the tradebook
   looking like a tradebook.
   ══════════════════════════════════════════════════════════════════════════ */

/* The aurora is gone. The element stays in the markup for one release
   so a cached stylesheet cannot leave it floating unstyled, and the
   markup goes next. */
.bx-aurora{ display:none !important; }

.bx .rd{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(26px, 4vh, 54px);
  padding:clamp(104px, 12vh, 140px) 0 clamp(48px, 7vh, 88px);
  overflow-x:clip;
}
.bx .rd__grid{
  width:100%; max-width:var(--bx-wide-grid); margin-inline:auto;
  padding-inline:max(20px, env(safe-area-inset-left));
  display:grid;
  /* 0.86/1.14, not 1/1. An even split reads as a slide; the instrument
     taking the larger share is what says which of the two is the
     subject. */
  grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  gap:clamp(30px, 4.5vw, 76px);
  align-items:start;
}

/* ── the argument ─────────────────────────────────────────────────── */
.bx .rd__kicker{
  margin:0 0 18px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bx-ink-3);
  display:flex; align-items:center; gap:12px;
}
/* A rule, not a pill with a dot. */
.bx .rd__kicker::after{
  content:''; flex:1 1 auto; height:1px; background:var(--bx-line-2);
}
.bx .rd__h1{
  margin:0 0 20px;
  font-size:clamp(2.5rem, 5.4vw, 4.4rem);
  line-height:.96; letter-spacing:-.045em; font-weight:600;
  color:var(--bx-ink);
}
.bx .rd__sub{
  margin:0 0 clamp(18px, 2.2vh, 24px); max-width:34rem;
  font-size:clamp(1rem, 1.25vw, 1.125rem); line-height:1.55;
  color:var(--bx-ink-2);
}
/* The demonstration introducing itself, now that the headline states
   the category instead. Mono because it describes what the machine is
   doing, which is the page's existing rule for mono. */
.bx .rd__demo{
  margin:0 0 clamp(16px, 2vh, 22px); max-width:34rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.04em; line-height:1.7;
  color:var(--bx-ink-3);
}

/* ── the verdict ──────────────────────────────────────────────────── */
.bx .rd__verdict{
  margin:0 0 clamp(26px, 3.4vh, 36px); padding:0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--bx-line);
}
/* label left, figure and its qualifier together on the right as ONE
   object. Pushing only the figure to the right edge left the qualifier
   trailing behind it and the three rows read as scattered rather than
   as a column of findings. */
.bx .rd__v{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:baseline; gap:4px 20px;
  padding:13px 0; border-bottom:1px solid var(--bx-line);
}
.bx .rd__v dt{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bx-ink-3);
}
.bx .rd__v dd{
  margin:0; justify-self:start; display:flex; align-items:baseline; gap:10px;
  min-width:0;
}
.bx .rd__v b{
  font-size:clamp(1.3rem, 2vw, 1.75rem); line-height:1; font-weight:600;
  letter-spacing:-.035em; color:var(--bx-ink);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.bx .rd__v.is-loss b{ color:var(--bx-red); }
.bx .rd__v dd span{ font-size:12.5px; color:var(--bx-ink-2); }

.bx .rd__cta{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px;
  margin-bottom:16px;
}
.bx .rd__alt{
  font-size:13.5px; color:var(--bx-ink-2);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--bx-line-2);
  transition:color .18s var(--bx-ease), text-decoration-color .18s var(--bx-ease);
}
.bx .rd__alt:hover{ color:var(--bx-ink); text-decoration-color:currentColor; }
/* The organisation line. Set like the hero's secondary link rather than
   like a third call to action: a trader reading this page should not have
   to step over a B2B pitch to reach the upload, and an academy should not
   have to scroll two thousand pixels to find out there is a door. */
.bx .rd__org{
  margin:14px 0 0; font-size:12.5px; line-height:1.7;
  /* --bx-ink-3, the token this layer reserves for the smallest text, at
     8.7:1 on the ground. A guessed #6b7280 measured about 4.1 and would
     have failed the contrast gate. */
  color:var(--bx-ink-3,#A2ABB9);
}
.bx .rd__org a{
  color:var(--bx-ink-2,#A8B1C0);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);
}
.bx .rd__org a:hover{ color:var(--bx-ink,#fff); text-decoration-color:currentColor; }

.bx .rd__terms{
  margin:0; max-width:30rem;
  font-size:12.5px; line-height:1.55; color:var(--bx-ink-3);
}

/* ── the book ─────────────────────────────────────────────────────── */
/*
   No panel. A hairline top and bottom, monospaced throughout, and the
   rows set tight enough to read as a printout. This is the one place
   on the page where density IS the design.
*/
.bx .rd__book{ margin:0; min-width:0; }
.bx .rd__book__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:0 0 10px;
  border-bottom:1px solid var(--bx-line-2);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.04em;
}
.bx .rd__file{ color:var(--bx-ink-2); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.bx .rd__state{
  flex:none; color:var(--bx-ink-3); letter-spacing:.1em;
  text-transform:uppercase; font-size:10px;
}

.bx .rd__rows{ display:flex; flex-direction:column; }
.bx .rd__r{
  display:grid;
  grid-template-columns:2.1rem 4.3rem minmax(0,1fr) 3.1rem 5rem minmax(0,7.5rem);
  align-items:baseline; gap:0 10px;
  padding:7px 0;
  border-bottom:1px solid var(--bx-line);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px; line-height:1.3; color:var(--bx-ink-2);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.bx .rd__n{ color:var(--bx-ink-3); font-size:10.5px; }
.bx .rd__d{ color:var(--bx-ink-3); }
.bx .rd__t{ color:var(--bx-ink-2); min-width:0; }
.bx .rd__h{ text-align:right; color:var(--bx-ink); }
.bx .rd__p{ text-align:right; color:var(--bx-ink); }
.bx .rd__r.is-loss .rd__p{ color:var(--bx-red); }

/* The flag. Empty on a clean row, which is the point: ten of sixteen
   carry something and six are visibly blank. */
.bx .rd__f{ min-width:0; padding-left:6px; }
.bx .rd__f i{
  font-style:normal; display:inline-block; max-width:100%;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bx-red);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* the streaming states */
.bx .rd__r.is-waiting{ opacity:0; }
.bx .rd__r.is-in{
  opacity:1;
  animation:rd-land .34s var(--bx-ease) both;
}
@keyframes rd-land{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}
/* the flag arrives separately, a beat later, and that gap is the whole
   difference between an animation and a demonstration */
.bx .rd__r .rd__f i{ opacity:0; transform:translateX(-4px); }
.bx .rd__r.flag-in .rd__f i{
  opacity:1; transform:none;
  transition:opacity .26s var(--bx-ease), transform .26s var(--bx-ease);
}
.bx .rd__rows.is-done .rd__r .rd__f i{ opacity:1; transform:none; }

.bx .rd__foot{
  margin:14px 0 0; max-width:38rem;
  font-size:12.5px; line-height:1.55; color:var(--bx-ink-3);
}

/* the no-script table, which the script removes once it has rows */
.bx .rd__fallback{
  width:100%; border-collapse:collapse;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px; color:var(--bx-ink-2);
}
.bx .rd__fallback caption{
  text-align:left; padding:10px 0; color:var(--bx-ink-3); font-size:11px;
}
.bx .rd__fallback th,.bx .rd__fallback td{
  text-align:left; padding:6px 10px 6px 0;
  border-bottom:1px solid var(--bx-line); font-weight:500;
}
.bx .rd__fallback th{ color:var(--bx-ink-3); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; }
.bx .rd__fallback tr.is-loss td{ color:var(--bx-ink-2); }

/* ── the two figures, inside the book ─────────────────────────────── */
/*
   blackbox sets .rp__pick to a two column grid, which is right where it
   came from and wrong here: inside the figure the buttons stretched to
   a full column each and stacked. Explicit flex, content width, and the
   strip constrained so sixteen marks read as a sparkline rather than as
   sixteen 95px dashes.
*/
.bx .rd__pick-wrap{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--bx-line-2);
  display:flex; flex-direction:column; gap:12px;
}
/* 46px, not 30. js/riskora-hero.js sizes each mark as a PERCENTAGE
   of the strip (16% floor, 100% at the 340 minute hold), so at 30px a
   five minute trade was 4.8px tall and eleven of the sixteen marks were
   invisible: only the three long holds showed and the strip looked
   broken rather than skewed. A floor in pixels as well keeps the short
   ones legible whatever the percentage works out to. The baseline rule
   is what makes it read as a chart rather than as floating chips. */
.bx .rd__pick-wrap .rp__strip{
  display:block; max-width:430px;
  border-bottom:1px solid var(--bx-line-2); padding-bottom:1px;
}
.bx .rd__pick-wrap .rp__strip .bx-marks{
  display:flex; align-items:flex-end; gap:3px;
  height:46px; width:100%; margin:0;
}
.bx .rd__pick-wrap .bx-marks__m{
  border-radius:2px 2px 0 0; opacity:.8; min-height:5px;
}
.bx .rd__pick-wrap .bx-marks__m.is-on{ opacity:1; }
.bx .rd__pick-wrap .bx-marks__m.is-off{ opacity:.12; }

.bx .rd__pick-wrap .rp__pick{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:0; border-top:0; grid-template-columns:none;
}
.bx .rd__pick-wrap .rp__pick .bx-finding__v{
  flex:0 0 auto; width:auto; padding:9px 15px;
}
.bx .rd__pick-wrap .rp__pick .bx-finding__v + .bx-finding__v{
  border-left:1px solid var(--g-edge); padding-left:15px;
}
.bx .rd__pick-wrap .bx-finding__hint{ margin:0; max-width:46rem; }

/* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .bx .rd__grid{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .bx .rd__sub{ max-width:46rem; }
  .bx .rd{ min-height:auto; padding-top:clamp(92px, 11vh, 120px); }
}
@media (max-width:620px){
  .bx .rd__r{
    grid-template-columns:3.6rem minmax(0,1fr) 2.8rem 4.4rem;
    grid-template-areas:'d t h p' 'f f f f';
    gap:2px 10px; padding:9px 0;
  }
  .bx .rd__n{ display:none; }
  .bx .rd__d{ grid-area:d; } .bx .rd__t{ grid-area:t; }
  .bx .rd__h{ grid-area:h; } .bx .rd__p{ grid-area:p; }
  .bx .rd__f{ grid-area:f; padding-left:0; }
  .bx .rd__f:empty{ display:none; }
  .bx .rd__v dd{ justify-self:start; text-align:left; }
  .bx .rd__v{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .bx .rd__r.is-in{ animation:none; }
  .bx .rd__r .rd__f i{ opacity:1; transform:none; transition:none; }
}


/* ── the two figures drive the table, not just the strip ──────────────
   Pressing 106 min dims every row that closed in profit, so the seven
   long holds are the only thing left lit in the book the reader is
   already looking at. One artifact, two ways of asking it a question,
   instead of a second chart restating the first. */
.bx .rd__r{ transition:opacity .3s var(--bx-ease); }
.bx .rd__rows.is-picking .rd__r{ opacity:.17; }
.bx .rd__rows.is-picking .rd__r.is-pick{ opacity:1; }
.bx .rd__rows.is-picking .rd__r.is-pick .rd__p{ font-weight:600; }


/* ═══════════════════════════════════════════════════════════════════════════
   25 · THE VOCABULARY

   WHAT WAS WRONG. Count the capsules on this page before this section:
   the header itself, every nav link, the login button, the theme
   toggle, both hero buttons, six section eyebrows, ten row flags in the
   ledger, every cite link, the five weight chips, the arrange toggle
   and each of its buttons, the three step keys, the two path keys, the
   limits key, the plans label, the support button. Thirty two elements,
   one shape: a 999px capsule with a one pixel white border and a five
   percent white fill, doing fourteen different jobs.

   That shape is not neutral. It is the default component of every site
   builder shipping this year, and using it for everything is why a page
   with real content in it still read as assembled rather than designed.
   Refining it does not help. A better capsule is still a capsule.

   WHAT REPLACES IT. The page's whole argument is that a tradebook is a
   document and the product is a machine reading it. So the furniture
   becomes what a printed instrument uses: rules, columns, mono labels,
   and space. A label is a label, not a label in a box. A flag in a
   table is text in its own column, which is what a linter prints. A
   button is a rectangle. Nothing glows.

   Three radii exist from here and they mean different things:
     0      a rule, a column, a table, the header
     7px    something you press
     14px   something you read inside of

   RED IS HELD TO THREE JOBS: a loss, a flag on a loss, and the one
   primary action on a screen. It was doing seven, and a colour doing
   seven jobs carries none of them. The chat button, the login outline,
   the eyebrow dots and the button halo all give it up.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 25.1 the header stops floating ─────────────────────────────────
   Section 3 made it a pill on the reasoning that a full width bar
   "most dates a page". That was true of the bar it replaced, which had
   a solid fill and a hard rule. It is not true of the shape: the inset
   floating capsule is now the thing every generated page has at the
   top, and it puts a second rounded rectangle in front of the first
   screen before a word is read.

   What it becomes is the quiet version: full bleed, no radius, no
   shadow, a single hairline at the bottom, and its contents aligned to
   the same 1180 frame as the page, so the wordmark sits directly above
   the headline instead of 20px inside a floating edge. */
.bx header{
  top:0; left:0; right:0; width:100%;
  transform:none; border-radius:0;
  border:0; border-bottom:1px solid var(--bx-line);
  background:rgba(7,8,12,.74) !important;
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:none;
  padding:9px max(20px, calc((100% - var(--bx-frame)) / 2));
  gap:14px;
}
html.light .bx header{ background:rgba(252,252,253,.82) !important; }

/* Nav links: no capsule hover. A link marks itself with a rule under
   the word, which costs no shape and reads at a glance. */
.bx header nav{ gap:0; }
.bx header nav a{
  border-radius:0; padding:8px 14px;
  box-shadow:inset 0 -1px 0 transparent;
  transition:color .18s var(--bx-ease), box-shadow .18s var(--bx-ease);
}
.bx header nav a:hover{
  background:none; color:var(--bx-ink);
  box-shadow:inset 0 -1px 0 var(--bx-ink);
}

/* The two actions are rectangles. Login loses its red outline: it is
   not a destructive or a primary action and it was the fourth red
   thing in the top 60px of the page. */
.bx header .nav-actions{ gap:7px; }
.bx header .nav-actions button{ border-radius:7px !important; }
.bx .btn-outline{
  border:1px solid var(--bx-line-2) !important;
  color:var(--bx-ink) !important; background:none !important;
  box-shadow:none !important;
}
.bx .btn-outline:hover{
  border-color:var(--bx-ink) !important;
  background:rgba(255,255,255,.06) !important;
}
html.light .bx .btn-outline:hover{ background:rgba(10,14,22,.05) !important; }

@media (max-width:760px){
  .bx header{ top:0; width:100%; padding:8px 14px; }
}

/* ── 25.2 the button is a rectangle and does not glow ───────────────
   The gradient stays exactly as section 4 measured it: #E02B26 /
   #D01A17 / #BE1310, white at 4.62 / 5.47 / 6.38, and no brightness on
   hover. Only the shape and the halo change. The halo was a blurred
   red radial sitting behind the button, which is the most recognisable
   generated-landing-page detail there is, and it put brand red into
   180 pixels of empty ground around every call to action. The press
   feedback is now the lift and the inner highlight, which is what a
   physical control gives you. */
.bx .bx-btn{
  border-radius:7px; padding:12px 20px;
  text-transform:none; letter-spacing:-.008em; font-size:14.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 1px 2px rgba(0,0,0,.4);
}
.bx .bx-btn::after{ display:none; }
.bx .bx-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 4px 14px -4px rgba(0,0,0,.7);
}
.bx .bx-btn--ghost{
  background:none; border:1px solid var(--bx-line-2);
  box-shadow:none; color:var(--bx-ink);
}
.bx .bx-btn--ghost:hover{
  background:rgba(255,255,255,.06); border-color:var(--bx-ink);
  box-shadow:none;
}
html.light .bx .bx-btn--ghost:hover{ background:rgba(10,14,22,.05); }

/* The pricing form button is the same object, so it takes the same
   shape and loses the same halo. */
.bx .btn-submit{
  border-radius:7px; text-transform:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 1px 2px rgba(0,0,0,.4);
}
.bx .btn-submit:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 4px 14px -4px rgba(0,0,0,.7);
}
.bx .btn-outline,.bx .btn-dashboard{ border-radius:7px; }

/* ── 25.3 a label is a label ────────────────────────────────────────
   Every eyebrow on the page was a capsule with a glowing red dot in
   it. The dot said nothing: nothing on this page is live, and a status
   light that is not reporting a status is decoration pretending to be
   instrumentation. What a label needs is to be quieter than the
   heading under it and to start somewhere definite, which a rule does
   for the cost of one pixel. */
.bx .bx-eyebrow--chip,
.bx .bx-scene--plans .section-label{
  padding:0; border:0; background:none; box-shadow:none; border-radius:0;
  gap:11px; color:var(--bx-ink-3);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.18em;
}
.bx .bx-eyebrow--chip::before,
.bx .bx-scene--plans .section-label::before{
  content:''; width:26px; height:1px; border-radius:0; flex:none;
  background:currentColor; opacity:.5; box-shadow:none;
}
/* A centred section gets the rule on both sides, so the label still
   starts from something rather than hanging in the middle. */
.bx .bx-col--centre .bx-eyebrow--chip::after,
.bx .bx-scene--plans .section-label::after{
  content:''; width:26px; height:1px; flex:none;
  background:currentColor; opacity:.5;
}

/* The same treatment for every other key on the page: the three flow
   steps, the two closing paths, the limits list, the spine status, the
   preview tag. All of them were the same capsule. */
.bx .bx-flow__k,
.bx .bx-path__k,
.bx .bx-limits__k,
.bx .bx-spine__s,
.bx .pv__tag{
  padding:0; border:0; background:none; box-shadow:none; border-radius:0;
}
.bx .bx-spine__s::before,
.bx .pv__tag::before{ display:none; }
.bx .bx-spine__n--live .bx-spine__s{ color:var(--bx-up); }
.bx .pv__tag{ color:var(--bx-up); }

/* ── 25.4 the ledger prints its findings, it does not badge them ────
   Ten rows carried a red capsule in the last column, which stacked
   into a column of identical red lozenges down the right of the table
   and read as a tag cloud. What the engine produces is a line of
   output attached to a row. So it sets as text, in the engine mono, in
   the loss red, with a hairline tick in front of it: the shape a
   linter uses, because that is the job. */
.bx .lg__r--flag .lg__f em{
  display:inline-flex; align-items:center; gap:8px;
  padding:0; border:0; background:none; border-radius:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bx-red);
}
.bx .lg__r--flag .lg__f em::before{
  content:''; width:10px; height:1px; flex:none;
  background:currentColor; opacity:.7;
}

/* ── 25.5 a citation is a link ──────────────────────────────────────
   Section 14 made the receipts into chips so that a figure and its
   receipt would read as one object. They do, but a chip also reads as
   a button, and these navigate. A link with a rule under it is both
   honest about what it does and quieter beside the figure it belongs
   to, which is the thing meant to be read. */
.bx .bx-cite{
  padding:0; border:0; background:none; border-radius:0;
  letter-spacing:.1em;
  box-shadow:inset 0 -1px 0 var(--bx-line-2);
}
.bx .bx-cite:hover{
  background:none; border:0;
  color:var(--bx-ink); box-shadow:inset 0 -1px 0 currentColor;
}

/* ── 25.6 the arrange toggle is a segmented control, not two pills ──
   On the red wall this was a capsule containing two capsules, one of
   them filled white. It becomes one rectangle divided by a rule, and
   the selected side is marked by the fill and a heavier label rather
   than by a floating lozenge inside a track. The active side stays
   #B00000 on #fff, which measures 8.4. */
.bx .bx-toggle{
  padding:0; border-radius:7px; overflow:hidden;
  border:1px solid rgba(255,255,255,.34); background:rgba(0,0,0,.22);
}
.bx .bx-toggle__k{ padding:0 14px 0 13px; letter-spacing:.16em; }
.bx .bx-toggle button{
  border-radius:0; padding:9px 18px;
  border-left:1px solid rgba(255,255,255,.26);
}
.bx .bx-toggle button[aria-pressed="true"]{ box-shadow:none; }
.bx .bx-toggle button:focus-visible{ outline-offset:-3px; }

/* ── 25.7 the three steps go back to being three columns ────────────
   blackbox.css already laid these out correctly: three columns on a
   rail, divided by hairlines, each with a tick on the rule above it.
   Section 15 of this file covered that with three floating glass cards
   with a capsule label in each, which is the three-feature-card row
   every template ships, and which hid a layout that was already
   better. The same happened to the two closing paths. Both revert. */
.bx .bx-flow{ gap:0; }
.bx .bx-flow__s{
  padding:26px 26px 0 0;
  border:0; border-radius:0; background:none; box-shadow:none;
}
.bx .bx-flow__s + .bx-flow__s{
  padding-left:26px; border-left:1px solid var(--bx-line);
}
.bx .bx-path{
  padding:0; border:0; border-radius:0; background:none; box-shadow:none;
}
.bx .bx-path + .bx-path{
  border-left:1px solid var(--bx-line-2);
  padding-left:clamp(24px, 4vw, 56px);
}
@media (max-width:860px){
  .bx .bx-flow__s{ padding:22px 0; border-top:1px solid var(--bx-line); }
  .bx .bx-flow__s + .bx-flow__s{ border-left:0; padding-left:0; }
}

/* ── 25.8 a weight is a measure, not a chip ─────────────────────────
   Each behaviour weight was printed in a capsule above its name. A
   weight is a quantity, so it sets as one: mono, tracked, unboxed,
   sitting above the name it qualifies. Five weights then compare at a
   glance instead of reading as five identical boxes with different
   text in them. */
.bx .bx-weights__w,
.bx .bx-weights__btn::before{
  padding:0; border:0; background:none; border-radius:0;
  letter-spacing:.16em; color:var(--bx-ink-3);
}
html.light .bx .bx-weights__w{ background:none; }

/* ── 25.9 the support button stops being the brightest thing here ───
   A 56px saturated red circle, fixed to the corner, over every screen
   including the red wall. It was the only element on the page that red
   was being spent on for no reason, and a bright circular bubble in
   the corner is the clearest single signal that a site was assembled
   from parts. It is now a dark square control with a hairline, at the
   size of a control rather than a mascot. */
.bx .bot-trigger{
  width:42px; height:42px; border-radius:10px;
  background:rgba(14,17,23,.82);
  border:1px solid var(--bx-line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.9);
  color:var(--bx-ink-2);
  transition:color .2s var(--bx-ease), border-color .2s var(--bx-ease);
}
.bx .bot-trigger svg{ width:19px; height:19px; }
.bx .bot-trigger:hover{
  transform:none; color:var(--bx-ink); border-color:var(--bx-ink);
}
html.light .bx .bot-trigger{
  background:rgba(255,255,255,.9); color:#3d4350;
  border-color:rgba(10,14,22,.16);
}
.bx .bot-window{ border-radius:14px; }
.bx .bot-input-area button{ border-radius:7px; }

/* ── 25.10 the three findings line up ───────────────────────────────
   Each row of the opening verdict was its own grid, so the label
   column was as wide as that row own label: CARRYING NOTHING is wider
   than OVERTRADING, and the third figure started 38px right of the
   first two. Three findings that do not share a left edge read as
   three unrelated statements. subgrid gives all three the widest
   label; where it is missing the min-width does the same job to within
   a few pixels rather than leaving the page broken. */
.bx .rd__verdict{ display:grid; grid-template-columns:auto minmax(0,1fr); }
.bx .rd__v dt{ min-width:9rem; }
@supports (grid-template-columns:subgrid){
  .bx .rd__v{ grid-column:1 / -1; grid-template-columns:subgrid; }
  .bx .rd__v dt{ min-width:0; }
}
@media (max-width:860px){
  .bx .rd__verdict{ display:flex; }
  .bx .rd__v dt{ min-width:0; }
}

/* ── 25.11 the opening two figures ──────────────────────────────────
   They are pressable, so they keep an edge, but a capsule 170px wide
   with a number in it is a pill; a rectangle with a number in it is a
   readout. They sit directly under the strip they filter, so they take
   the squared ends of that strip too. */
.bx .bx-finding__v{
  border-radius:8px; padding:11px 15px;
  box-shadow:none; background:rgba(255,255,255,.035);
}
.bx .bx-finding__v:hover{ background:rgba(255,255,255,.07); }
html.light .bx .bx-finding__v{ background:rgba(10,14,22,.035); }
html.light .bx .bx-finding__v:hover{ background:rgba(10,14,22,.06); }

/* ── 25.12 the wordmark stops glowing ───────────────────────────────
   RISKORA carried three stacked text-shadows and the ORA carried two
   drop-shadows on top of a three stop gradient. That is a neon sign,
   and a neon sign in the corner of every screen sets the register for
   everything under it before a sentence is read. The letterforms, the
   tracking and the red ORA are the mark and they stay; what goes is
   the lighting. One flat red, one flat white, no stroke, no bloom.
   It also stops costing a composited layer on every scroll frame. */
.bx header .logo{
  -webkit-text-stroke:0; text-shadow:none;
  letter-spacing:.055em;
}
.bx header .logo span{
  background:none; -webkit-background-clip:border-box;
  background-clip:border-box; -webkit-text-fill-color:currentColor;
  color:var(--bx-brand); filter:none;
}
html.light .bx header .logo span{ color:#D01A17; }


/* ═══════════════════════════════════════════════════════════════════════════
   26 · THE LAST OF THE DECORATION

   Section 25 took the capsule out. What is left is the other half of
   the generated look: marks that are drawn to fill a space rather than
   to carry a reading. A watermark numeral, a dashed box, a rounded
   progress bar. Each one is a place where the page had something true
   to show and showed a texture instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 26.1 the weight becomes a measure ──────────────────────────────
   Every behaviour card carried its weight twice: once as a label, and
   once as a 160px numeral at five percent opacity behind the text. The
   ghost numeral is the bento grid's signature decoration and it is
   pure filler: it says nothing the label two lines above it has not
   already said, and it competes with the one line on the card that
   reports a finding.

   The weight is a quantity out of a hundred, and five of them are
   meant to be compared, so it draws as the thing it is: a measure
   along the foot of the card, the full width at the heaviest
   behaviour. A reader now sees the ranking without reading five
   numbers, which is the only reason to put the weight on the card at
   all. It turns red on the two the engine actually found in the
   sample, so the card's state and its weight are one mark.

   The widths are the weights, scaled against the heaviest: 30 is the
   whole rule, and the rest are 22/30, 18/30 and 12/30 of it. They are
   written out per value because attr() cannot be used as a length in
   any shipping browser. The weights themselves live in the markup and
   are pinned by test-fixtures/dom-contract.mts. */
.bx .bx-weights__btn::after{
  content:''; position:absolute; left:0; bottom:0; height:2px;
  right:auto; top:auto;
  font-size:0; opacity:1; transform:none; z-index:1;
  background:var(--bx-ink-3); width:0;
  transition:background .3s var(--bx-ease);
}
.bx .bx-weights__btn[data-weight="30"]::after{ width:100%; }
.bx .bx-weights__btn[data-weight="22"]::after{ width:73.3%; }
.bx .bx-weights__btn[data-weight="18"]::after{ width:60%; }
.bx .bx-weights__btn[data-weight="12"]::after{ width:40%; }
.bx .bx-weights > li.is-found .bx-weights__btn::after{ background:var(--bx-red); }
.bx .bx-weights > li.is-none .bx-weights__btn::after{ opacity:.4; }

/* ── 26.2 the inspector's idle state ────────────────────────────────
   A dashed rounded rectangle is what a drop target looks like, and
   this is not one: nothing is dragged into it, it is the space the
   readout will occupy once the pointer reaches a row. A rule along the
   top and the sentence under it says the same thing without drawing a
   box around an empty area. */
.bx .lg__insp__idle{
  border:0; border-top:1px solid var(--bx-line); border-radius:0;
  background:none; padding:0 2px;
}

/* ── 26.3 the two panels on the red wall ────────────────────────────
   The white wash stays exactly as section 6 measured it, because the
   label contrast on the wall depends on it: white reads 4.90 on the
   rgb(212,49,49) the wash produces. Only the 18px radius and the
   40px drop shadow go, which is what made two readouts look like two
   frosted lozenges floating over a red slide. */
.bx .bx-split__side{
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

/* ── 26.4 a bar has ends ────────────────────────────────────────────
   The sixteen hold-time bars had 999px caps, so a five minute hold and
   a nine minute hold drew as the same lozenge: at that length the two
   round ends are the whole bar and the quantity is gone. Square ends,
   and they are readable at the short end, which is where the argument
   on that panel actually is. */
.bx .pt__t,.bx .pt__b{ border-radius:1px; }


/* ── 26.6 the sticky totals line up with the title ──────────────────
   MEASURED, not noticed. The readout is a direct child of the panel,
   not of the padded head, so its -38px margin (written to let the
   sticky background bleed to the panel's edges while its content stays
   put) pushed the content out instead: ROWS started at x=124 with the
   title at x=162, and the inspector under it went with them. The
   readout is already a block child of the panel, so it fills the width
   without the negative margin, and the padding alone puts its contents
   on the title's left edge. */
.bx .lg__readout{ margin-inline:0; }

/* ── 26.7 the five weights are on one scale ─────────────────────────
   The measures in 26.1 were percentages of their own card. The bento
   gives the first two cards half a row each and the last three a
   third, so weight 22 drew a 424px rule and weight 18 drew 228px: the
   bar said the opposite of the number. A measure that is not on a
   shared scale is worse than no measure.

   Six pixels per point of weight, the same on every card, so 30 draws
   180px and 12 draws 72. The narrowest card this grid produces is
   about 300px wide inside its padding, so the longest rule always has
   room. */
.bx .bx-weights__btn::after{ width:auto; }
.bx .bx-weights__btn[data-weight="30"]::after{ width:180px; }
.bx .bx-weights__btn[data-weight="22"]::after{ width:132px; }
.bx .bx-weights__btn[data-weight="18"]::after{ width:108px; }
.bx .bx-weights__btn[data-weight="12"]::after{ width:72px; }

/* ── 26.8 the pricing block keeps its own capsules no longer ────────
   The pricing section is older than the rest of this page and was left
   alone on purpose, but it carries the last four capsules on the site:
   the seats badge and the monthly/yearly control with its two buttons.
   They were the only round things left and read as a different site
   pasted in at the bottom. Shape only; the copy, the figures and the
   checkout are untouched. */
.bx .founding-seats{ border-radius:4px; }
.bx .founding-toggle{ border-radius:7px; overflow:hidden; padding:0; }
.bx .founding-toggle button{ border-radius:0; }
.bx .founding-toggle button + button{ border-left:1px solid var(--bx-line-2); }
/* The trial band's "No card" mark, the last round thing on the page. */
.bx .trial-band .tb-title span{ border-radius:4px; }
/* And the trial band's dashed outline, the page's second drop-target
   that is not one. */
.bx .trial-band{ border:1px solid var(--bx-line-2); border-radius:10px; }

/* ── 26.9 the condensed header stops casting a band ─────────────────
   CAUGHT BY MEASUREMENT, not by looking. js/riskora-glass.js adds
   .is-stuck once the page moves, and section 12's rule for it put the
   header back at top:10px with a 50px drop shadow. 25.1 only restyled
   the resting header, so the moment anyone scrolled, the old floating
   pill geometry came back underneath the new flat bar and painted a
   grey gradient band 25px deep across the full width.

   In light theme that band is where small labels land: the three flow
   keys measured 3.44 against a ground of rgb(197,198,200) that should
   have been rgb(246,247,248), and "Illustrative market data" measured
   3.55. All four clear AA with the band gone, at 5.58 and up.

   A flush bar has nothing to float above, so being stuck means only
   that it is a little more opaque. */
.bx header.is-stuck{
  top:0; box-shadow:none;
  background:rgba(5,6,9,.88) !important;
  border-bottom-color:var(--bx-line-2);
}
html.light .bx header.is-stuck{ background:rgba(252,252,253,.92) !important; }
@media (max-width:760px){ .bx header.is-stuck{ top:0; } }

/* ── 26.10 the sixteen marks get a baseline ─────────────────────────
   Measured, the marks were already correct: one per row, heights
   proportional to the hold, all sitting on a common bottom edge. They
   still read as scattered debris, for two reasons the measurement
   cannot see. They had no baseline, so sixteen separate blocks floated
   in a band with nothing to stand on; and each was filled with a
   gradient fading out at the top, which at the short end (eight pixels
   for a five minute hold) meant the bar was mostly fade and the
   shortest holds nearly vanished. A chart whose smallest values
   disappear is arguing the opposite of this page.

   A flat fill and a rule under them. The strip also takes the full
   width of the column so it lines up with the two readouts it belongs
   to, instead of ending 180px short of them. */
.bx .rd__pick-wrap .rp__strip{
  width:100%; padding-bottom:7px;
  border-bottom:1px solid var(--bx-line-2);
}
.bx .rd__pick-wrap .bx-marks{ width:100%; }
.bx .rd__pick-wrap .bx-marks__m{
  flex:1 1 0; min-width:0;
  border-radius:1px 1px 0 0;
  background:var(--bx-cool);
}
.bx .rd__pick-wrap .bx-marks__m.is-loss{ background:var(--bx-red); }

/* ── 26.11 the homepage's own paper, to the shared value ────────────
   css/riskora-shell.css brings every other page to #F4F6F9 in the light
   theme, which is this page's scene ground. The document behind the
   scenes was still main site.html's older #F9FAFB, which shows at the
   edges and in the gap under the last section. Two percent apart and
   invisible on its own; four papers across one product is the thing
   that was being fixed.

   The value lives in main site.html's own light block, which carries
   `background-color: ... !important` on body, so it had to change there
   rather than be overridden from here. */

/* ═══════════════════════════════════════ not for sale yet ════════════
   A plan control that is deliberately not on offer. Still a real button
   and still answers when pressed, but set back from the red so a reader
   scanning the plans does not see four live offers.

   IT LIVES HERE, not in riskora-shell.css, and that is the point worth
   recording: the home page does NOT load the shell. Its stylesheets are
   blackbox.css then this file, and this is the last one. Three attempts
   at this rule went into the shell and none of them reached the page,
   which is a different failure from the one that looks identical, a
   later declaration winning inside the same file. Check WHICH FILE
   before assuming it is cascade order. */
.bx .btn-submit.is-soon,
.btn-submit.is-soon{
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  color:var(--bx-ink-2, #A8B1C0) !important;
  border:1px solid var(--bx-line-2, rgba(255,255,255,.14)) !important;
  text-shadow:none !important;
}
.bx .btn-submit.is-soon:hover,
.btn-submit.is-soon:hover{
  color:var(--bx-ink, #fff) !important;
  border-color:var(--bx-ink-2, #A8B1C0) !important;
  background:none !important;
}

/* The plans notice. Set as a statement rather than a warning banner:
   nothing has gone wrong and the reader has not made a mistake. */
.plans-soon{
  max-width:60ch; margin:0 auto 30px; text-align:center;
  font-size:14px; line-height:1.75; color:var(--bx-ink-3, #A2ABB9);
  border:1px solid var(--bx-line, rgba(255,255,255,.08));
  border-radius:14px; padding:16px 20px;
  transition:border-color .5s ease, background-color .5s ease;
}
.plans-soon b{ color:var(--bx-ink, #fff); font-weight:600; }
.plans-soon.is-lit{
  border-color:var(--bx-ink-2, #A8B1C0);
  background:rgba(255,255,255,.03);
}

/* BOTH THEMES. The rules above use --bx-ink-* , which are the dark
   ground's tokens and are not redefined for light, so in light mode the
   button measured 2.38:1 and the notice 2.78:1 against AA's 4.5. The
   page's own light palette is declared inline in main site.html as
   --text and --dim, so those are what the light variants read. Measured
   after: both above 4.5 in both themes. */
html.light .bx .btn-submit.is-soon,
html.light .btn-submit.is-soon{
  color:var(--dim, #5b6270) !important;
  border-color:var(--border, #e5e7eb) !important;
}
html.light .bx .btn-submit.is-soon:hover,
html.light .btn-submit.is-soon:hover{
  color:var(--text, #0f0f0f) !important;
  border-color:var(--dim, #5b6270) !important;
}
html.light .plans-soon{
  color:var(--dim, #5b6270);
  border-color:var(--border, #e5e7eb);
}
html.light .plans-soon b{ color:var(--text, #0f0f0f); }
html.light .plans-soon.is-lit{
  border-color:var(--dim, #5b6270);
  background:rgba(0,0,0,.02);
}