/* ══════════════════════════════════════════════════════
   ZEXCA — the landing page's own layer
   ══════════════════════════════════════════════════════
   THIS FILE ADDS; IT DOES NOT REDEFINE. Every colour, radius, font and easing
   below is read from `dashboard.css`'s `:root`, and every component the product
   already owns — the signal card, the AI reading panel, the gold button, the
   chip — is used with its own classes and its own stylesheet. What is here is
   only the things a marketing page needs that an application does not: a page
   rhythm, section headers, a hero, and the handful of canvases that tell the
   story.

   WHY NOT A SEPARATE DESIGN. A landing page that invents its own gold, its own
   card and its own type scale teaches a visitor one product and then hands them
   a different one at sign-in. The most persuasive thing this page can do is be
   made of the actual thing it is selling — so the signal cards here are the
   product's signal cards, the AI reading is the product's reading panel, and
   the market figures are the product's live feed.

   Prefix: `ld-`. Nothing here leaks into the app.
   ══════════════════════════════════════════════════════ */

/* ══ PAGE RHYTHM ══════════════════════════════════════
   One spacing scale for the whole page, so section gaps cannot drift. Marketing
   density, not dashboard density: the app packs five columns into 260px; this
   page has one job per screen. */
:root{
  --ld-s1:8px; --ld-s2:16px; --ld-s3:24px; --ld-s4:40px;
  --ld-s5:64px; --ld-s6:96px; --ld-s7:136px;
  --ld-max:1240px;          /* the content column's ceiling */
  --ld-narrow:680px;        /* prose, kept near 62 characters */
  /* THE NOTCH IS PART OF THE BAR'S HEIGHT, and folding it into the token is
     what makes that true in seven places at once. `--ld-nav-h` is not only the
     bar: about.css, contact.css, vision.css and legal.css all offset their
     content by it, legal.css sticks its sidebar to it and sets scroll-margin
     from it. Patching `.ld-nav` alone would have left every one of those
     measuring against a bar that is 47px shorter than the one on screen.

     `env()` resolves to 0 wherever there is no inset, so this is the same
     56px on a laptop, on Android, and in a browser that has never heard of
     safe areas. */
  --ld-nav-h:calc(56px + env(safe-area-inset-top, 0px));
  /* TWO GROUNDS, not one. A page of nineteen sections on a single background
     is a list however good the sections are; alternating them is what turns a
     list into chapters, and it is the cheapest structural move there is. The
     page floor drops below the product's --bg-0 so the panel can sit ABOVE it
     and still read as dark. */
  --ld-floor:#07080B;
  --ld-panel:#0E1319;
  --ld-rule:#1C232E;
}

html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body.ld{
  background:var(--ld-floor);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.7;
  overflow-x:hidden;         /* the rails run past the fold */
  -webkit-font-smoothing:antialiased;
}

/* The one thing every section agrees on. */
.ld-wrap{width:100%;max-width:var(--ld-max);margin-inline:auto;padding-inline:20px;}
@media(min-width:768px){ .ld-wrap{padding-inline:32px;} }
@media(min-width:1024px){ .ld-wrap{padding-inline:44px;} }

/* THREE LENGTHS, and which one a section gets is a decision. Identical padding
   on every section is the single loudest thing that makes a long page read as
   generated: the eye finds the same gap nineteen times and stops believing
   anyone chose it. A section that carries one sentence gets air; a section that
   carries a table does not. */
.ld-sec{position:relative;padding-block:120px;}
.ld-sec.tall{padding-block:172px;}
.ld-sec.tight{padding-block:var(--ld-s5);}
/* TRANSLUCENT, so the room behind the page shows through. `--ld-panel` is
   #0E1319; at 0.90 the ground still reads as a step up from the floor and the
   scene passes behind it as a shadow rather than being blocked by it. Nine
   sections carry this, which is most of the page.

   THE TWO STRENGTHS ARE THE POINT. A section with no panel shows the room at
   the canvas's own opacity; a panel puts a ground in front of it and the room
   drops to a trace. That is what a shadow behind a surface does, and it is why
   the page keeps its panel/floor rhythm instead of every section carrying the
   same veil. */
.ld-sec.panel{background:color-mix(in srgb,var(--ld-panel) 86%,transparent);}
@media(max-width:767px){
  .ld-sec{padding-block:var(--ld-s5);}
  .ld-sec.tall{padding-block:var(--ld-s6);}
  .ld-sec.tight{padding-block:var(--ld-s4);}
}

/* ── Skip link. First in the DOM, invisible until focused. ── */
.ld-skip{
  position:absolute;inset-inline-start:-9999px;top:8px;z-index:200;
  background:var(--gold);color:var(--on-gold);font-weight:700;
  padding:10px 16px;border-radius:var(--r2);
}
.ld-skip:focus{inset-inline-start:8px;}

/* ══ TYPE ═════════════════════════════════════════════
   The scale does the work. A page whose headings are all one size has no
   hierarchy to read, only a sequence to scroll — so the display size and the
   note size are now nearly eight times apart, and everything in between is a
   step somebody picked.

   THE OVERLINE. It was a mono word in 0.2em capitals behind a gold dash, on
   every section, nineteen times. That combination is a tell: it is what a
   section header looks like when nobody decided what the section is. It is now
   a plain bold line in the body face, sentence case, no rule, and it appears
   only where it names something the heading does not. */
.ld-eyebrow{
  display:block;
  font-family:var(--f-display);font-size:13.5px;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--gold-lt);
  margin-bottom:12px;
}
/* Non-latin scripts do not letter-space or uppercase — the same rule the app
   applies to its own eyebrows. */
html[lang="fa"] .ld-eyebrow,html[lang="ar"] .ld-eyebrow{
  font-family:var(--f-body);
}

/* A headline cut out of a gradient was the other tell, and it cost legibility
   for it: the last third of every headline sat at half the contrast of the
   first. One colour, and ONE word in gold — which is a decision a person makes
   about which word matters, and a gradient never is. */
.ld-h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(40px,7vw,96px);line-height:.98;letter-spacing:-0.04em;
  text-wrap:balance;margin-bottom:var(--ld-s3);color:var(--fg);
}
.ld-h1 em,.ld-h2 em{font-style:normal;color:var(--gold-lt);}

/* ── THE SHEEN ──
   TWO headings on this page are struck in gold and lit, and the pair is the
   rule: `AI Market Analysis — Free` and `Learn the Whole Board`. They are the
   two things the platform gives away — the reading, and the academy that is
   included with every account. Nothing else gets it.

   That is what makes it a mark rather than a decoration. A flourish that lands
   on one heading is a whim; a flourish that lands on exactly the free things is
   a reader learning, without being told, what gold means here. Put it on all
   nineteen and it is a template again.

   IT IS A SPECULAR, NOT A GLOW. The band is narrow and white-hot and the rest
   of the gradient is flat gold, so what travels reads as a light crossing a
   metal surface rather than the text pulsing. Seven seconds, and it HOLDS for
   nearly half of them — the keyframe parks the band off the end of the line
   from 55% to 100%, so the jump back to the start happens where there is
   nothing to see. A sweep with no rest is a casino sign.

   THE FALLBACK IS NOT OPTIONAL. `color:transparent` with no
   `background-clip:text` behind it is an invisible heading, so the solid gold
   is declared first and the gradient only inside the @supports. */
.ld-h2.sheen{color:var(--gold-lt);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ld-h2.sheen{
    background:linear-gradient(100deg,
      var(--gold-dp) 0%,
      var(--gold) 26%,
      var(--gold-lt) 40%,
      #FFF8E4 46%,
      #FFFFFF 50%,
      #FFF8E4 54%,
      var(--gold-lt) 60%,
      var(--gold) 74%,
      var(--gold-dp) 100%);
    /* 200%, NOT 300%. A percentage background-position on an image WIDER than
       its box is offset by `(box - image) x pct`, so at 300% the band spent most
       of the travel entirely off the end of the line and the heading looked
       static. At 200% the bright part is inside the text for about half the
       sweep, which is the half worth watching. */
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:ldSheen 7s cubic-bezier(.4,0,.2,1) infinite;
  }
}
@keyframes ldSheen{
  0%,10%  {background-position:112% 0;}
  62%,100%{background-position:-12% 0;}
}
/* Motion off: the gold stays, the light stops on the bright part of the band so
   the heading is still struck metal and not a flat swatch. */
@media(prefers-reduced-motion:reduce){
  .ld-h2.sheen{animation:none;background-position:50% 0;}
}
body.no-motion .ld-h2.sheen{animation:none;background-position:50% 0;}
.ld-h2{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(29px,4.4vw,56px);line-height:1.05;letter-spacing:-0.035em;
  text-wrap:balance;margin-bottom:14px;color:var(--fg);
}
.ld-h3{
  font-family:var(--f-display);font-weight:700;font-size:18px;
  letter-spacing:-0.015em;line-height:1.32;margin-bottom:7px;color:var(--fg);
}
.ld-lead{
  font-size:clamp(16px,1.5vw,19.5px);line-height:1.6;color:var(--fg-2);
  letter-spacing:-0.008em;
  max-width:var(--ld-narrow);
}
.ld-note{font-size:13px;line-height:1.65;color:var(--fg-3);}
.ld-head{margin-bottom:var(--ld-s5);}
.ld-head.center{text-align:center;margin-inline:auto;}
.ld-head.center .ld-lead{margin-inline:auto;}
.ld-head.center .ld-eyebrow{justify-content:center;}

/* ══ BUTTONS ══════════════════════════════════════════
   `.btn-gold` and `.btn-ghost` come from dashboard.css unchanged. These are the
   two things a marketing page needs on top: a size, and a row that wraps. */
.ld-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.ld-btn-lg{padding:15px 26px;font-size:15px;min-height:52px;border-radius:11px;}
.ld-link{
  display:inline-flex;align-items:center;gap:7px;color:var(--gold-lt);
  font-weight:600;font-size:14px;
}
.ld-link .ic{width:15px;height:15px;transition:transform .2s var(--ease);}
.ld-link:hover .ic{transform:translateX(3px);}
[dir="rtl"] .ld-link:hover .ic{transform:scaleX(-1) translateX(3px);}

/* ══ NAV ══════════════════════════════════════════════
   Transparent over the hero, then a glass bar once the page has moved. The
   switch is a class the script sets, not a scroll listener that restyles on
   every frame. */
.ld-nav{
  position:fixed;top:0;inset-inline:0;z-index:90;height:var(--ld-nav-h);
  /* The bar now COVERS the status bar area; this keeps its contents out of
     it. Height is 56 + inset, padding is the inset, so the row the reader
     actually sees is 56px on every device. */
  padding-top:env(safe-area-inset-top, 0px);
  display:flex;align-items:center;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),
             backdrop-filter .3s var(--ease);
}
.ld-nav.stuck{
  background:rgba(7,8,11,.78);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 var(--ld-rule);
}
.ld-nav-in{display:flex;align-items:center;gap:var(--ld-s3);width:100%;}
.ld-brand{display:inline-flex;align-items:center;gap:10px;flex:none;}
/* One gold object in the bar, not three. The mark keeps the gradient because
   it is the logo; the wordmark beside it was a second gradient saying the same
   thing twice, and it now just reads as type. */
.ld-mark{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:14px;
  color:var(--on-gold);
  background:linear-gradient(145deg,var(--gold-lt),var(--gold) 45%,var(--gold-dp));
}
.ld-brand-w{
  font-family:var(--f-display);font-weight:700;font-size:15.5px;
  letter-spacing:.02em;color:var(--fg);
}
.ld-nav-links{display:none;gap:26px;margin-inline-start:auto;}
@media(min-width:1024px){ .ld-nav-links{display:flex;} }
.ld-nav-links a{
  font-size:13px;color:var(--fg-2);font-weight:450;position:relative;
  padding-block:4px;transition:color .18s var(--ease);
}
.ld-nav-links a::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform .24s var(--ease);
}
.ld-nav-links a:hover{color:var(--fg);}
.ld-nav-links a:hover::after{transform:scaleX(1);}
.ld-nav-end{display:flex;align-items:center;gap:20px;margin-inline-start:auto;}
/* Two buttons next to each other make neither of them the one to press. */
.ld-nav-login{font-size:13px;color:var(--fg-2);font-weight:450;}
.ld-nav-login:hover{color:var(--fg);}
@media(min-width:1024px){ .ld-nav-end{margin-inline-start:0;} }

/* ══ HERO ═════════════════════════════════════════════ */
.ld-hero{
  position:relative;min-height:clamp(560px,86vh,880px);
  display:flex;align-items:center;
  padding-block:calc(var(--ld-nav-h) + var(--ld-s5)) var(--ld-s5);
  overflow:hidden;
}
/* ══ THE ROOM ═════════════════════════════════════════
   The 3D market scene, and it is behind the ENTIRE page rather than behind the
   hero. It used to be an absolute child of `.ld-hero`, which is
   `overflow:hidden` — so the scene was cut off at the fold and everything
   below it stood on flat colour. Fixed at the body's level it is one shadow
   the whole site sits on, and `.ld-sec.panel` below is translucent so it
   carries through.

   FIXED, SO IT IS NO LONGER PARALLAXED. A scroll-driven translate on a fixed
   element does not slow it down, it walks it off the screen — `landing.js`
   used to apply `translate3d(0, y*0.12, 0)` here and that line is gone with
   this change. `will-change` goes too: nothing animates the element any more,
   and a permanent compositor hint on a full-viewport layer is a cost with
   nothing on the other side of it.

   EXPLICIT WIDTH AND HEIGHT, still. `<canvas>` is a REPLACED element, so
   `width:auto` resolves to its intrinsic 300×150 even when `inset` is set —
   `inset:0` alone positioned it correctly and left it postage-stamp sized.

   AND IT IS DIM ON PURPOSE. At full strength a scene behind live text is a
   scene competing with it; the brief is a shadow, so the opacity is what makes
   it one. The hero still reads strongest because nothing is layered over the
   canvas there — every section below puts a translucent ground in front of
   it. */
.ld-aurora{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:.22;
}
@media(max-width:767px){
  /* Fainter on a phone: the type sits closer to the edges, there is less
     margin for the scene to live in, and the panel is doing more of the work. */
  .ld-aurora{opacity:.16;}
}
.ld-hero-in{position:relative;z-index:1;width:100%;}
.ld-hero-grid{display:grid;gap:var(--ld-s5);align-items:center;}
@media(min-width:1024px){
  .ld-hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--ld-s4);}
}
.ld-hero-copy{max-width:640px;}
.ld-hero .ld-lead{margin-bottom:var(--ld-s4);}

/* The proof strip under the CTAs — the sign-in page's own idiom. */
/* A grid, not a wrapping flex row. At 40px gaps the fourth item dropped to a
   line of its own and read as an afterthought rather than as the fourth of
   four. Two columns on a phone, four from 600 up — and they line up either way. */
/* A FLEX ROW, not four equal columns. Four columns of a narrow hero split into
   four narrow boxes, and every label wrapped onto two lines — "Markets, one /
   account" — which is a stack of broken phrases pretending to be a statistic
   row. Let each item be as wide as its own label and space them apart. */
.ld-proof{
  display:flex;flex-wrap:wrap;gap:var(--ld-s3) 46px;
  margin-top:var(--ld-s4);padding-top:var(--ld-s3);border-top:1px solid var(--ld-rule);
}
.ld-proof > div{flex:none;}
.ld-proof b{
  display:block;font-family:var(--f-mono);font-size:22px;font-weight:600;
  color:var(--gold-lt);line-height:1.2;
}
.ld-proof span{font-size:12.5px;color:var(--fg-3);white-space:nowrap;}

/* ══ THE TAPE ═════════════════════════════════════════
   An exchange tape. The instruments travel; they do not sit in a row and
   refresh in place. `landing.js` owns the offset — see THE TAPE RUNS there for
   why the cells are built once and never rebuilt.

   Real prices. `LIVE` is only printed when a figure actually arrived; a frozen
   sample says SAMPLE and says it in the same place, at the same size, so the
   difference is legible rather than implied. */
.ld-tape{
  display:flex;align-items:stretch;
  border-block:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.016),transparent),
    var(--bg-0);
  overflow:hidden;
}

/* The station identifier, pinned at the head of the tape the way an exchange
   board carries its own name. It does not travel — everything else does. */
.ld-tape-mark{
  display:none;align-items:center;gap:8px;flex:none;
  padding-inline:20px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--gold);background:var(--bg-0);
  border-inline-end:1px solid var(--line);
  position:relative;z-index:2;
}
@media(min-width:600px){ .ld-tape-mark{display:flex;} }
.ld-tape-dot{
  width:6px;height:6px;border-radius:50%;background:var(--up);flex:none;
  box-shadow:0 0 0 3px var(--up-pale);
  animation:ldPulse 2s ease-in-out infinite;
}
@keyframes ldPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* The window the run travels through. The fades are what make a cell leave the
   tape rather than hit the end of it. */
.ld-tape-vp{
  position:relative;flex:1;min-width:0;overflow:hidden;
}
.ld-tape-vp::before,.ld-tape-vp::after{
  content:'';position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;
}
.ld-tape-vp::before{inset-inline-start:0;background:linear-gradient(90deg,var(--bg-0),transparent);}
.ld-tape-vp::after{inset-inline-end:0;background:linear-gradient(270deg,var(--bg-0),transparent);}

.ld-tape-run{
  display:flex;align-items:stretch;width:max-content;
  will-change:transform;
  /* NO TRANSITION. The script writes `transform` every frame; a transition
     fighting a per-frame write is the classic source of marquee judder. */
}
.ld-tk{
  display:flex;align-items:baseline;gap:9px;padding:12px 22px;white-space:nowrap;
  border-inline-end:1px solid var(--line-2);flex:none;
  font-family:var(--f-mono);font-size:12px;
}
.ld-tk-sym{color:var(--fg-3);letter-spacing:.06em;}
.ld-tk-px{color:var(--fg);font-variant-numeric:tabular-nums;}
.ld-tk-ch.up{color:var(--up);} .ld-tk-ch.down{color:var(--down);}
.ld-tk-st{
  font-size:9px;letter-spacing:.14em;padding:2px 6px;border-radius:var(--r1);
  border:1px solid var(--line);color:var(--fg-3);
}
.ld-tk-st.live{color:var(--up);border-color:var(--up-line);background:var(--up-pale);}
.ld-tk-st.sample{color:var(--fg-3);}
/* The tick. A price that moved says so for half a second, which is the only
   part of this tape that is about a single instant. */
.ld-tk-px.t-up{animation:ldTickUp .65s var(--ease);}
.ld-tk-px.t-down{animation:ldTickDown .65s var(--ease);}
@keyframes ldTickUp{0%{color:var(--up);text-shadow:0 0 10px var(--up)}100%{color:var(--fg);text-shadow:none}}
@keyframes ldTickDown{0%{color:var(--down);text-shadow:0 0 10px var(--down)}100%{color:var(--fg);text-shadow:none}}

/* Motion off: the tape stops where it is and stays readable. It is then a row
   of prices, which is a perfectly good thing for a row of prices to be. */
@media(prefers-reduced-motion:reduce){
  .ld-tape-dot{animation:none;}
  .ld-tk-px.t-up,.ld-tk-px.t-down{animation:none;}
}
body.no-motion .ld-tape-dot{animation:none;}

/* ══ CELLS ════════════════════════════════════════════
   THIS IS THE BIG ONE. Every group on this page was a row of identical rounded
   boxes — same radius, same border, same fill, same icon plate, same shadow —
   and that is the thing that reads as machine-made more than any colour or font
   ever did. Border, fill, radius and shadow each say "separate object"; spend
   all four on every item and nothing is separate from anything, so the page
   flattens into wallpaper.

   A cell is now a rule and some air. The GROUP is the container, the way a
   specification table is: one hairline above each item, generous space between
   columns, and nothing drawn around anything. The few surfaces that genuinely
   are objects — a panel, a card of figures — ask for `.raised` and get the old
   treatment, which now means something because it is rare. */
.ld-card{
  position:relative;background:none;border:0;border-radius:0;
  border-top:1px solid var(--ld-rule);
  padding:22px 0 30px;
}
.ld-card > *{position:relative;z-index:1;}

/* ── THE FACE ──
   A cell has no surface until the pointer arrives, and then one rises behind
   it — wider than the text on every side, so the panel is clearly a thing the
   cell is sitting ON rather than a box someone drew around it. It is the whole
   trick: the page stays quiet at rest and gains an object exactly where you are
   looking, which is what a card does for free and pays for by being loud
   everywhere else.

   WHO OWNS `transform`. The depth camera in `zexca-depth.js` writes
   `style.transform` straight onto whatever it is hovering, and an inline style
   beats any rule here — so a `translateY` written on `:hover` would silently do
   nothing on every surface the camera touches. The division is: the camera owns
   transform, this file owns everything else. The lift you see is the camera's
   `lift`, raised to match. */
.ld-card:not(.raised)::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  inset:-1px -22px -14px;
  border-radius:16px;
  background:linear-gradient(168deg,rgba(160,196,228,.13),rgba(146,180,214,.02) 56%,transparent);
  box-shadow:0 24px 56px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.09);
  opacity:0;transform:scale(.97);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.ld-card:not(.raised):hover::before{opacity:1;transform:none;}

/* The rule lights ALONG ITS LENGTH rather than changing colour in place. A line
   that travels says the pointer arrived from somewhere; a line that just turns
   gold says a state flipped. */
.ld-card:not(.raised)::after{
  content:'';position:absolute;top:-1px;left:0;z-index:2;
  width:100%;height:1px;background:var(--gold);pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
[dir="rtl"] .ld-card:not(.raised)::after{transform-origin:100% 50%;}
.ld-card:not(.raised):hover::after{transform:scaleX(1);}
/* Cells the camera does not reach — touch, and anything without `.ld-tilt` —
   lift from here instead, so the gesture is not simply missing. */
.ld-card:not(.raised):not(.ld-tilt){transition:transform .34s var(--ease);}
.ld-card:not(.raised):not(.ld-tilt):hover{transform:translateY(-5px);}

/* The exception, and it has to stay an exception. */
.ld-card.raised{
  background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r3);padding:24px;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             border-color .22s var(--ease);
}
.ld-card.raised::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(176deg,rgba(255,255,255,.05),rgba(255,255,255,.008) 42%,transparent);
}
.ld-card.raised:hover{box-shadow:0 16px 40px rgba(0,0,0,.44);}
.ld-card.gold{border-color:var(--gold-line);}
.ld-card.gold::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 0%,var(--gold-pale),transparent 62%);
}
/* Wide columns, no row gap: the rule on each cell IS the row separation. */
.ld-grid{display:grid;column-gap:clamp(22px,3.4vw,48px);row-gap:0;}
/* The hero's sample card sits on its own, not in a group, so it keeps a frame
   — a lone cell with a rule above it and nothing beside it is just a stray
   line. */
.ld-hero-card{
  position:relative;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r3);padding:16px;
}
.ld-grid.c2{grid-template-columns:1fr;}
.ld-grid.c3{grid-template-columns:1fr;}
.ld-grid.c4{grid-template-columns:repeat(2,1fr);}
@media(min-width:600px){ .ld-grid.c2{grid-template-columns:repeat(2,1fr);} }
@media(min-width:768px){ .ld-grid.c3{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){
  .ld-grid.c3{grid-template-columns:repeat(3,1fr);}
  .ld-grid.c4{grid-template-columns:repeat(4,1fr);}
}

/* The glyph, with no plate under it. Nine gold rounded squares on one screen
   is nine of the same object; the mark is the drawing, not the tile it sits on,
   and taking the tile away is what lets the heading be the thing you see. */
.ld-ic{
  display:block;margin-bottom:16px;color:var(--gold);
  background:none;box-shadow:none;
  transition:transform .32s var(--ease),color .32s var(--ease),filter .32s var(--ease);
}
.ld-ic .ic{width:24px;height:24px;}
.ld-card:hover .ld-ic{
  transform:translateY(-4px) scale(1.08);
  color:var(--gold-lt);
  filter:drop-shadow(0 5px 12px var(--gold-glow));
}
.ld-card .ld-h3{transition:color .3s var(--ease);}
.ld-card:hover .ld-h3{color:var(--gold-lt);}
.ld-card .ld-note{transition:color .3s var(--ease);}
.ld-card:hover .ld-note{color:var(--fg-2);}
.ld-ic.blue{color:var(--mlc);}
.ld-ic.up{color:var(--up);}

/* ══ ECOSYSTEM TILES ═══════════════════════════════════
   NINE OBJECTS, NOT NINE CELLS. This is the one module on the page that is
   genuinely three-dimensional, and it earns the exception by being the map: it
   is the only place a visitor is asked to look at all nine parts at once and
   pick one, so the nine have to be things you could pick up. Everywhere else on
   this page a group is a rule and some air, and that contrast is the point —
   make everything an object and nothing is one.

   WHAT MAKES IT REAL DEPTH AND NOT A DROP SHADOW. The plate pushes forward on
   its own Z axis, and the four things ON it sit at four different depths, so
   when the camera turns the tile they slide past one another by different
   amounts. That parallax is the whole difference between an object and a
   picture of an object — a shadow alone is a picture.

   WHAT FLATTENS IT. `opacity` below 1, `filter`, `overflow:hidden` and
   `clip-path` all compute `transform-style:preserve-3d` as `flat` and throw the
   layering away without an error. So nothing on the anchor or the plate carries
   any of them, the lift is `box-shadow` rather than `drop-shadow`, and the
   reveal's opacity is allowed only because it has finished before a pointer is
   anywhere near. */
#ldEco{gap:16px;}
.ld-eco{
  display:block;height:100%;
  perspective:1000px;
  transform-style:preserve-3d;
}
.ld-eco-plate{
  position:relative;display:block;height:100%;
  padding:24px 22px 26px;
  border-radius:16px;
  transform-style:preserve-3d;
  transform:translateZ(0);
  background:linear-gradient(168deg,rgba(255,255,255,.04),rgba(255,255,255,.006) 46%,rgba(0,0,0,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 3px 8px rgba(0,0,0,.4);
  transition:transform .44s var(--ease),box-shadow .44s var(--ease),
             background .44s var(--ease),opacity .44s var(--ease);
}
/* Out, toward the reader. Thirty pixels of Z at a metre of perspective is about
   three per cent of scale — enough to read as movement toward you, small enough
   that the type does not soften on the way. */
/* Further out, and brighter in itself. */
.ld-eco:hover .ld-eco-plate{
  transform:translateZ(40px);
  background:linear-gradient(168deg,rgba(176,210,240,.16),rgba(150,186,220,.04) 50%,rgba(0,0,0,.2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px var(--gold-line),
    inset 0 -30px 60px rgba(232,182,71,.05),
    0 40px 74px rgba(0,0,0,.7),
    0 0 56px var(--gold-glow);
}
/* The four depths. */
.ld-eco .ld-ic{transform:translateZ(26px);}
.ld-eco .ld-h3{transform:translateZ(16px);transition:color .28s var(--ease);}
.ld-eco .ld-note{transform:translateZ(8px);transition:color .28s var(--ease);}
.ld-eco .ld-eco-go{transform:translateZ(3px);}
/* No `drop-shadow` on the glyph: a filter here would flatten the tile it sits
   on and take the other three depths with it. */
.ld-eco:hover .ld-ic{
  transform:translateZ(26px) translateY(-3px) scale(1.08);
  color:var(--gold-lt);filter:none;
}
.ld-eco:hover .ld-h3{color:var(--gold-lt);}
.ld-eco:hover .ld-note{color:var(--fg-2);}

/* The other eight step back A LITTLE, and they do not dim.
   Fading them was the wrong way round. Dropping eight plates to half opacity
   does not make the ninth brighter — it makes the room darker, and the page
   reads as switching itself off every time the pointer lands. The rest of the
   grid still has to be legible while you are reading one of it: a visitor
   comparing "Signals" with "Analysis" is looking at BOTH.

   So the depth stays and the light does not move. Six pixels of recede is
   enough to put the hovered plate in front of its neighbours; everything else
   that makes it stand out is added TO IT, not taken from them. */
#ldEco:has(.ld-eco:hover) .ld-eco:not(:hover) .ld-eco-plate{
  transform:translateZ(-6px);
}

.ld-eco-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:12px;color:var(--fg-3);font-family:var(--f-mono);letter-spacing:.08em;
}
.ld-eco:hover .ld-eco-go{color:var(--gold);}
.ld-eco-go .ic{width:12px;height:12px;transition:transform .2s var(--ease);}
.ld-eco:hover .ld-eco-go .ic{transform:translateX(3px);}
[dir="rtl"] .ld-eco:hover .ld-eco-go .ic{transform:scaleX(-1) translateX(3px);}

@media(prefers-reduced-motion:reduce){
  .ld-eco:hover .ld-eco-plate,
  #ldEco:has(.ld-eco:hover) .ld-eco:not(:hover) .ld-eco-plate{transform:none;}
  .ld-eco:hover .ld-ic{transform:translateZ(26px);}
}
body.no-motion .ld-eco:hover .ld-eco-plate,
body.no-motion #ldEco:has(.ld-eco:hover) .ld-eco:not(:hover) .ld-eco-plate{
  transform:none;}

/* ══ THE INSTRUMENT RING ══════════════════════════════
   Nine machined plates on a carousel, turning. Not a row that slides — a ring
   that revolves, so a plate travels out to the side, away from the reader, round
   the back and returns. That is the difference between a filmstrip and an
   object, and this section is about objects.

   THE MOTION IS COMPUTED, NOT TRANSITIONED. A stepped carousel — move, settle,
   wait, move — reads as a slideshow however short the step is, because the eye
   is given a stop to rest on. This one has no steps: an angle advances a few
   thousandths of a radian per frame and every plate's position follows from it.
   Nothing here transitions, so nothing here can stutter between transitions.

   WHAT THE SCRIPT WRITES AND WHAT IT DOES NOT. Per frame it writes `transform`,
   `opacity` and `z-index` on nine elements — compositor properties only, so no
   frame costs a layout. There is no `transition` on a plate for the same
   reason: a transition fighting a per-frame write is the classic source of
   carousel judder.

   MACHINED, NOT PAINTED. The bezel is one linear-gradient with ten stops, and
   the stops are what make it read as metal: a near-white band immediately
   beside a near-black one, because a polished curve reflects the sky and the
   floor a few degrees apart. A gentle roll between mid-greys reads as plastic.

   NO CORPORATE LOGO GOES ON THESE. Every plate carries a ticker the market
   itself uses — XAU, XAG, BTC — or a drawing this project made. */
.ld-tiles-wrap{position:relative;}

/* The stage. Fixed height, because the plates are taken out of flow and put on
   an orbit; without it the section collapses to nothing. */
.ld-tiles{
  position:relative;
  height:clamp(170px,23vw,290px);
  perspective:1100px;perspective-origin:50% 46%;
  /* Its own warm floor, the way the reference lit its subject from behind. */
  background:radial-gradient(68% 132% at 50% 116%,rgba(232,182,71,.20),transparent 62%);
  overflow:hidden;
  touch-action:pan-y;
}
/* The two ends fade rather than cut, so a plate leaves the stage instead of
   hitting an edge. */
.ld-tiles::before,.ld-tiles::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(40px,9vw,130px);
  z-index:50;pointer-events:none;
}
.ld-tiles::before{inset-inline-start:0;
  background:linear-gradient(90deg,var(--bg-0),transparent);}
.ld-tiles::after{inset-inline-end:0;
  background:linear-gradient(270deg,var(--bg-0),transparent);}

.ld-tile{
  position:absolute;inset-inline-start:50%;top:50%;
  appearance:none;border:0;padding:0;background:none;cursor:pointer;
  /* ── THE OTHER HALF OF THE RADIUS ──
     `ringRadius` in landing.js puts the plates at R·sin(angle), so the radius
     sets BOTH how wide the ring reaches and how far apart the plates sit. The
     two are therefore sized together: this grew from 12.4vw/164px when the
     radius went from 0.26 to 0.32 of the stage, chosen so the gap beside the
     front plate stayed at exactly the 35px it already was.

     CHANGING ONE OF THEM ALONE OPENS OR CLOSES THAT GAP. If the ring needs to
     reach further again, solve for the plate that keeps the gap rather than
     nudging this number until it looks close. */
  inline-size:clamp(95px,14.6vw,210px);
  aspect-ratio:1/1;
  margin:0;
  transform-origin:50% 50%;
  /* NO TRANSITION. The script owns this property every frame — see the header. */
  will-change:transform,opacity,filter;
}
.ld-tile-plate{
  position:absolute;inset:0;border-radius:clamp(13px,2vw,26px);
  padding:clamp(5px,0.75vw,11px);
  background:linear-gradient(147deg,
    #FDFEFF 0%, #E4E9EF 9%, #6B7481 22%, #2E343D 31%,
    #F2F5F9 44%, #AFB7C2 55%, #454C57 68%,
    #E8ECF2 82%, #7C848F 92%, #3A414B 100%);
  box-shadow:
    0 22px 46px rgba(0,0,0,.62),
    0 4px 12px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.5);
}
/* The gold plate is gold because the instrument is — XAU. */
.ld-tile.is-gold .ld-tile-plate{
  background:linear-gradient(147deg,
    #FFF4DA 0%, #F2D089 9%, #A87A26 22%, #4E3810 31%,
    #FFF0CB 44%, #D9AE4E 55%, #6B4D15 68%,
    #FBE6B4 82%, #C09437 92%, #5A400F 100%);
  box-shadow:
    0 22px 50px rgba(0,0,0,.62),
    0 0 44px var(--gold-glow),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.5);
}
.ld-tile-face{
  position:absolute;inset:clamp(5px,0.75vw,11px);
  border-radius:clamp(9px,1.6vw,20px);
  /* THE GLINT IS PART OF THE FACE, NOT A LAYER OVER IT. It began as a separate
     rounded pseudo-element, which is fine on a plate facing the reader and
     wrong on one turned thirty degrees away: the ellipse squashed with the
     rotation and came out as a bright white slab standing beside the plate. A
     gradient on the face itself is subject to the same transform as the face,
     so it can never detach from the thing it is a highlight on. */
  background:
    radial-gradient(115% 62% at 50% -20%,rgba(255,255,255,.92),rgba(255,255,255,0) 64%),
    linear-gradient(163deg,#FFFFFF 0%,#F1F4F8 48%,#D3D9E1 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(2px,0.7vw,9px);
  box-shadow:inset 0 -6px 14px rgba(120,132,150,.28),inset 0 2px 3px rgba(255,255,255,.9);
  overflow:hidden;
}
.ld-tile-glyph{width:36%;height:36%;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 1px 1px rgba(30,40,55,.3));}
.ld-tile-sym{
  position:relative;z-index:1;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(10px,1.8vw,23px);letter-spacing:-0.015em;color:#141A24;
  line-height:1;text-align:center;padding-inline:4px;
}
.ld-tile.is-gold .ld-tile-sym{color:#241803;}
.ld-tile:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:18px;}

/* The plate at the front is named under the ring — there is no room on a
   74px plate for a name, a class and a price. */
.ld-tiles-cap{text-align:center;margin-top:var(--ld-s3);min-height:52px;}
.ld-tiles-cap b{
  display:block;font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--fg);
}
.ld-tiles-cap span{
  font-size:12.5px;color:var(--fg-3);
  display:inline-flex;align-items:center;gap:7px;justify-content:center;flex-wrap:wrap;
}
/* The three instruments this page can actually price carry the figure. The
   other six carry nothing — a dash would be a shrug and a stale number would
   be a lie. */
.ld-tiles-px{
  font-style:normal;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  color:var(--fg);font-size:13px;
}
.ld-tiles-live{
  font-style:normal;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;
  padding:2px 5px;border-radius:var(--r1);
  color:var(--up);border:1px solid var(--up-line);background:var(--up-pale);
}

/* ══ SIGNAL CARDS ═════════════════════════════════════
   `.sigc` and everything inside it is dashboard.css's, unmodified. The only
   thing this page adds is the shelf they sit on: a scroll rail on a phone,
   a grid from 768 up. */
.ld-sigs{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:768px){ .ld-sigs{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1280px){ .ld-sigs{grid-template-columns:repeat(3,1fr);} }
/* A landing example is a photograph, not a live position: the breathing halo
   would claim a price is moving when nothing is connected to it. */
.ld-sigs .sigc.live.profit,.ld-sigs .sigc.live.loss{animation:none;}

/* ── The card as an object ──
   The same treatment the ecosystem tiles got, and the same three-way argument
   over `transform` settled the same way: the SLOT takes the reveal and the
   camera, the CARD itself is the plate that pushes forward, and the four bands
   inside it sit at four depths so the turn separates them.

   SMALLER NUMBERS THAN THE TILES, and the reason is the content. A tile carries
   a heading and one line; this carries eleven figures in 11px mono, and every
   pixel of Z is a pixel of re-raster on type that has to stay readable. Two
   degrees of turn and twenty-six of push is what this will take — the tiles
   take four and thirty because they have nothing that can be misread.

   `.sigc` itself is dashboard.css's and stays that way: everything here is
   scoped under `.ld-sigs`, so the card inside the app is untouched. */
.ld-sig-slot{
  perspective:1100px;
  transform-style:preserve-3d;
}
.ld-sigs .sigc{
  height:100%;
  transform-style:preserve-3d;
  transform:translateZ(0);
  transition:transform .44s var(--ease),box-shadow .44s var(--ease),
             border-color .44s var(--ease),background .44s var(--ease);
}
/* The card lifts further and LIGHTS: a ground one step up from the one it
   rests on, so the prominence is something it gained rather than something its
   neighbours lost. */
.ld-sig-slot:hover .sigc{
  transform:translateZ(34px);
  background:var(--bg-2);
  border-color:var(--gold-line);
  box-shadow:0 42px 78px rgba(0,0,0,.72),0 0 58px var(--gold-glow),
             inset 0 1px 0 rgba(255,255,255,.14);
}
/* A finished card keeps its own verdict colour on the rim — green or red is a
   fact about the trade, and the pointer does not get to overrule it. */
.ld-sig-slot:hover .sigc.done.profit{border-color:var(--up-line);}
.ld-sig-slot:hover .sigc.done.loss{border-color:var(--down-line);}

/* The four bands. */
.ld-sigs .sigc-head{transform:translateZ(20px);}
.ld-sigs .sigc-pnl{transform:translateZ(13px);}
.ld-sigs .sigc-track,.ld-sigs .sigc-trackl{transform:translateZ(8px);}
.ld-sigs .sigc-ladder{transform:translateZ(3px);}

/* The other five step back, and they stay lit. Six cards on one screen are a
   set you read across — half-fading five of them to flatter the sixth loses the
   comparison, which is the only reason six are shown at all. */
#ldSigs:has(.ld-sig-slot:hover) .ld-sig-slot:not(:hover) .sigc{
  transform:translateZ(-6px);
}

@media(prefers-reduced-motion:reduce){
  .ld-sig-slot:hover .sigc,
  #ldSigs:has(.ld-sig-slot:hover) .ld-sig-slot:not(:hover) .sigc{transform:none;}
}
body.no-motion .ld-sig-slot:hover .sigc,
body.no-motion #ldSigs:has(.ld-sig-slot:hover) .ld-sig-slot:not(:hover) .sigc{
  transform:none;}

/* ══ AI READING ═══════════════════════════════════════
   `.mwa-panel` from dashboard.css. On the app it expands under a chart; here it
   is the subject, so it gets a frame and opens on arrival. */
.ld-mwa{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r3);
  padding:22px;
}
.ld-mwa .mwa-panel{display:block;margin-top:0;padding-top:0;border-top:0;}
.ld-mwa-chrome{
  display:flex;align-items:center;gap:9px;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.ld-dot{width:9px;height:9px;border-radius:50%;background:var(--bg-4);flex:none;}
.ld-dot.g{background:var(--up);}

/* ══ CANVAS STAGES ════════════════════════════════════
   Milo, the brain, the ecosystem graph and the tier ladder are all drawn rather
   than placed — see `landing.js`. A stage is a well with a rim, the same
   treatment the AI terminal gives its own display. */
.ld-stage{
  position:relative;border-radius:var(--r3);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,rgba(146,180,214,.05),transparent 62%),
             var(--bg-1);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.72),inset 0 0 0 1px rgba(146,180,214,.14);
}
.ld-stage canvas{display:block;width:100%;height:100%;}
/* `width:100%` BEFORE the cap. Without it `margin-inline:auto` takes the stage
   out of the grid's stretch and it shrinks to fit its contents — which is the
   canvas's intrinsic 300px, not the column. */
.ld-stage.brain{aspect-ratio:16/10;}
.ld-stage.graph{aspect-ratio:16/9;}
.ld-stage.ladder{aspect-ratio:16/9;}
@media(max-width:600px){
  .ld-stage.brain,.ld-stage.graph,.ld-stage.ladder{aspect-ratio:4/3;}
}
/* The caption a stage carries, so a drawing always says what it is. */
.ld-stage-cap{
  position:absolute;inset-inline:14px;bottom:12px;z-index:2;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  color:var(--fg-3);text-transform:uppercase;pointer-events:none;
}

/* ══ MILO ═════════════════════════════════════════════
   The wave is the product's own `.milo-wave`, grown up. Steel blue, because
   MILO Coin is steel blue everywhere else in the product and gold already
   means money. */
.ld-milo-wave{display:inline-flex;align-items:flex-end;gap:3px;height:20px;}
.ld-milo-wave i{
  width:3px;border-radius:2px;background:var(--mlc);
  animation:wave 1.1s ease-in-out infinite;
}
.ld-milo-wave i:nth-child(1){height:8px;animation-delay:0s}
.ld-milo-wave i:nth-child(2){height:16px;animation-delay:.13s}
.ld-milo-wave i:nth-child(3){height:11px;animation-delay:.26s}
.ld-milo-wave i:nth-child(4){height:20px;animation-delay:.39s}
.ld-milo-wave i:nth-child(5){height:13px;animation-delay:.52s}
.ld-milo-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px;
  border-radius:999px;border:1px solid var(--mlc-line);background:var(--mlc-pale);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--mlc-lt);
}

/* ══ THE MILO RIG ═════════════════════════════════════
   One engine holding four questions at once, each answered on its own screen,
   each screen fed by a cable carrying a charge out of the engine.

   THE ENGINE IS DRAWN AS A BRAIN, and every part of it is SVG — outline, folds,
   fissure, the traces across the cortex, and the package in the middle with the
   engine's name on it. One element, one coordinate system: at 1200x620 a
   viewBox unit and a percentage of the rig are the same place, which is the
   only reason a cable leaves a port on the cortex and lands on a plug on a
   screen with nothing measuring anything. It is also what lets the whole
   creature crop to the brain on a phone — the SVG slices to its own centre and
   the cables simply stop being drawn.

   The four screens are elements, because they are a interface and not a
   drawing: real type, real numbers, real bezels.

   LED AND RGB. The four cables and the cortex carry a hue rotation on one
   clock, a quarter turn apart, so the spectrum walks around the head. The four
   ports stay amber through all of it — they are the LEDs, and an LED that
   changes colour with everything else stops being the thing you look at.

   ONE CLOCK FOR THE ELECTRICITY. `--oct-beat` is the period of everything that
   pulses: the package brightens, four charges cross the cortex to the ports and
   run down the cables, and each screen lifts as its charge lands — a screen's
   arrival flash peaks at 84% of the beat, the moment the dash reaches the plug.
   Nothing here is driven by script; it is a set of animations agreeing on one
   number.
   ═══════════════════════════════════════════════════ */
.ld-rig{
  --oct-beat:2.8s;
  --rgb-cycle:16s;
  /* The engine's line. Cyan, because the light has to be a different thing from
     the product's gold — gold is money on every other screen, and an engine
     that glows gold would read as a price. */
  --neo:#5FD8FF; --neo-gl:rgba(95,216,255,.55);
  /* The ports. Amber, held constant while everything else cycles. */
  --led:#FFB347; --led-gl:rgba(255,150,40,.75);
  position:relative;
  container:ldrig / inline-size;
  aspect-ratio:1200/620;
  margin-block:var(--ld-s4);
  border-radius:var(--r3);
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(46% 52% at 50% 48%,rgba(47,124,180,.22),transparent 72%),
    radial-gradient(120% 90% at 50% 0%,rgba(95,216,255,.07),transparent 60%),
    linear-gradient(175deg,#0B1726 0%,#070E18 62%,#05090F 100%);
  box-shadow:inset 0 0 0 1px rgba(95,216,255,.16),inset 0 2px 5px rgba(0,0,0,.7);
}
/* The mesh. One dot grid masked to a soft oval, which is all that is left of a
   constellation once you stop drawing it and start suggesting it. */
.ld-rig::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(95,216,255,.24) 1px,transparent 1.4px);
  background-size:36px 36px;
  -webkit-mask:radial-gradient(70% 66% at 50% 48%,#000 8%,transparent 76%);
          mask:radial-gradient(70% 66% at 50% 48%,#000 8%,transparent 76%);
  opacity:.5;
}
.ld-rig-cap{
  position:absolute;inset-inline:14px;bottom:11px;z-index:8;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  color:var(--fg-3);text-transform:uppercase;pointer-events:none;
}
.ld-rig-svg{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;
}

/* ── The brain ────────────────────────────────────────
   Two mirrored hemispheres with a fissure between them, twelve folds, and a
   package at the centre. The body is filled as well as stroked: an outline
   alone lets the dot mesh show straight through the head, and the creature
   stops sitting in front of the room. */
.ld-brain{
  animation:ldRgb var(--rgb-cycle) linear infinite;
}
.ld-brain-halo{fill:var(--neo);opacity:.17;filter:blur(16px);}
.ld-brain-body{
  fill:rgba(13,34,54,.9);stroke:var(--neo);stroke-width:2.6;
  filter:drop-shadow(0 0 14px var(--neo-gl));
}
.ld-brain-fis{fill:none;stroke:#CFF3FF;stroke-width:1.6;opacity:.6;}
/* Short, thick and round-ended. Drawn thin it stops reading as a brainstem and
   starts reading as a wire someone forgot to connect. */
.ld-brain-stem{fill:none;stroke:var(--neo);stroke-width:7;stroke-linecap:round;opacity:.75;}
/* The folds. Each one dims and lights on its own offset, so the cortex reads as
   busy rather than as a fixed pattern. */
.ld-brain-gy{
  fill:none;stroke:var(--neo);stroke-width:1.8;stroke-linecap:round;
  animation:ldFold 3.4s ease-in-out infinite;
  animation-delay:calc(var(--g) * -.28s);
}
@keyframes ldFold{ 0%,100%{opacity:.35;} 50%{opacity:.95;} }
/* The traces from the package out to the four ports. Mitred, not rounded: a
   circuit turns corners, it does not curve them. */
.ld-brain-tr{
  fill:none;stroke:var(--neo);stroke-width:1.8;stroke-linejoin:miter;opacity:.62;
}
.ld-brain-tr-lit{
  fill:none;stroke:#EAFBFF;stroke-width:2.6;stroke-linejoin:miter;
  stroke-dasharray:8 92;stroke-dashoffset:100;
  filter:drop-shadow(0 0 4px var(--neo));
  animation:ldCharge var(--oct-beat) linear infinite;
  animation-delay:calc(var(--oct-beat) / -4 * var(--k));
}
/* The package. */
.ld-brain-chip{
  fill:rgba(8,26,44,.95);stroke:var(--neo);stroke-width:2;
  filter:drop-shadow(0 0 9px var(--neo-gl));
  transform-box:fill-box;transform-origin:center;
  animation:ldCore var(--oct-beat) ease-in-out infinite;
}
.ld-brain-die{fill:none;stroke:var(--neo);stroke-width:1;opacity:.5;}
.ld-brain-name{
  fill:#EAF9FF;font-family:var(--f-mono);font-weight:600;font-size:15px;
  letter-spacing:.06em;text-anchor:middle;
}
@keyframes ldCore{
  0%,100%{filter:drop-shadow(0 0 6px var(--neo-gl)) brightness(.85);}
  46%    {filter:drop-shadow(0 0 16px var(--neo-gl)) brightness(1.4);}
}

/* ── The cables ───────────────────────────────────────
   `pathLength="100"` on the lit stroke is what lets four curves of four
   different lengths share one dash pattern and one keyframe: the browser
   rescales each path's own length to 100 before the array is applied, so a
   charge crosses the short cable and the long one in the same beat. */
.ld-wire{
  animation:ldRgb var(--rgb-cycle) linear infinite;
  animation-delay:calc(var(--rgb-cycle) / -4 * var(--k));
}
.ld-wire path{fill:none;stroke-linecap:round;}
.ld-wire-glow{stroke:var(--neo);stroke-width:9;opacity:.16;filter:blur(3px);}
.ld-wire-line{stroke:var(--neo);stroke-width:2.4;opacity:.9;}
.ld-wire-lit{
  stroke:#FFFFFF;stroke-width:4.4;stroke-dasharray:6 94;stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px var(--neo));
  animation:ldCharge var(--oct-beat) linear infinite;
  animation-delay:calc(var(--oct-beat) / -4 * var(--k));
}
@keyframes ldCharge{ from{stroke-dashoffset:100;} to{stroke-dashoffset:0;} }
@keyframes ldRgb{ from{filter:hue-rotate(0deg);} to{filter:hue-rotate(360deg);} }
/* The ports sit outside every group that rotates hue: they are the LEDs. */
.ld-port{
  fill:var(--led);stroke:#FFE6BE;stroke-width:1.4;
  filter:drop-shadow(0 0 7px var(--led-gl));
  animation:ldLed 3.2s ease-in-out infinite;
  animation-delay:calc(var(--k) * -.5s);
}
@keyframes ldLed{ 0%,100%{opacity:.7;} 50%{opacity:1;} }

/* ── The four screens ─────────────────────────────────
   The slot holds the angle; the panel holds the content. They are two elements
   for one reason: the depth camera writes `style.transform` straight onto
   whatever it is hovering, so a static `rotateY` living on the same node would
   be wiped the moment the pointer arrived. */
.ld-rig-slot{position:absolute;z-index:5;perspective:1500px;}
.ld-rig-slot.s1{left:3.33%; top:9.68%;  width:24.17%;height:29.03%;}
.ld-rig-slot.s2{left:.83%;  top:48.39%; width:25.83%;height:32.26%;}
.ld-rig-slot.s3{left:72.5%; top:9.68%;  width:24.17%;height:29.03%;}
.ld-rig-slot.s4{left:73.33%;top:48.39%; width:25.83%;height:32.26%;}
.ld-rig-slot.s1 .ld-rig-panel,.ld-rig-slot.s2 .ld-rig-panel{transform:rotateY(13deg);}
.ld-rig-slot.s3 .ld-rig-panel,.ld-rig-slot.s4 .ld-rig-panel{transform:rotateY(-13deg);}

.ld-rig-panel{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;
  padding:.5cqw;gap:.4cqw;
  border-radius:1.5cqw;
  /* The bezel: a brushed frame, not a border. */
  background:linear-gradient(150deg,#C9D4E0 0%,#6F7E8E 18%,#39434F 52%,#8A97A6 84%,#4A5563 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 1.4cqw 2.6cqw rgba(0,0,0,.55);
  transition:box-shadow .3s var(--ease);
}
/* The fourth screen is the one the reader is meant to want: the watchlist. It
   gets the copper frame, the same way the product gives gold to the thing that
   holds value. */
.ld-rig-slot.s4 .ld-rig-panel{
  background:linear-gradient(150deg,var(--gold-lt) 0%,var(--gold-dp) 20%,#4A3A18 52%,var(--gold) 84%,var(--gold-dk) 100%);
}
.ld-rig-panel:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 1.8cqw 3.2cqw rgba(0,0,0,.62);}

/* The plug, on the edge the cable arrives at. Copper barrel, same as the port
   it left. */
.ld-rig-plug{
  position:absolute;top:50%;width:1.5cqw;height:.75cqw;
  transform:translateY(-50%);
  border-radius:.2cqw;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dp) 55%,var(--gold-dk));
  box-shadow:0 0 .7cqw rgba(232,182,71,.6);
}
.ld-rig-slot.s1 .ld-rig-plug,.ld-rig-slot.s2 .ld-rig-plug{right:-1.1cqw;}
.ld-rig-slot.s3 .ld-rig-plug,.ld-rig-slot.s4 .ld-rig-plug{left:-1.1cqw;}

.ld-rig-q{
  flex:none;padding:.15cqw .5cqw 0;
  font-family:var(--f-display);font-weight:700;
  font-size:1.08cqw;line-height:1.35;letter-spacing:-.01em;
  color:#0D1219;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.ld-rig-scr{
  position:relative;flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:.55cqw .7cqw;
  border-radius:1cqw;
  background:linear-gradient(178deg,#111720,var(--bg-0) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 .2cqw .6cqw rgba(0,0,0,.8);
}
/* The charge lands. `--fx` is the edge it arrives at, so the light enters from
   the side the cable is on. */
.ld-rig-scr::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(110% 80% at var(--fx) 50%,rgba(149,220,255,.34),transparent 62%);
  opacity:0;
  animation:ldArrive var(--oct-beat) linear infinite;
  animation-delay:calc(var(--oct-beat) / -4 * var(--k));
}
.ld-rig-slot.s1 .ld-rig-scr,.ld-rig-slot.s2 .ld-rig-scr{--fx:100%;}
.ld-rig-slot.s3 .ld-rig-scr,.ld-rig-slot.s4 .ld-rig-scr{--fx:0%;}
@keyframes ldArrive{ 0%,72%{opacity:0;} 84%{opacity:1;} 100%{opacity:0;} }

/* ── What the screens say ─────────────────────────── */
.ld-rig-sym{
  font-family:var(--f-mono);font-size:.72cqw;letter-spacing:.14em;
  color:var(--fg-3);text-transform:uppercase;
}
.ld-rig-big{
  display:block;font-family:var(--f-mono);font-weight:600;
  font-size:1.95cqw;line-height:1.2;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.ld-rig-chg{
  font-family:var(--f-mono);font-size:.88cqw;font-variant-numeric:tabular-nums;
}
.ld-rig-chg.up{color:var(--up);} .ld-rig-chg.dn{color:var(--down);}
.ld-rig-st{
  position:absolute;top:.5cqw;inset-inline-end:.6cqw;
  padding:.1cqw .4cqw;border-radius:var(--r1);
  font-family:var(--f-mono);font-size:.62cqw;letter-spacing:.12em;
}
.ld-rig-st.live{color:var(--up);background:var(--up-pale);border:1px solid var(--up-line);}
.ld-rig-st.sample{color:var(--fg-3);background:var(--bg-2);border:1px solid var(--line);}

/* The candles. Real four-hour bars when the venue answers, drawn as elements —
   two divs a bar, positioned by percentage of the window's own high and low. */
.ld-rig-chart{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:stretch;gap:.14cqw;
}
.ld-rig-cndl{position:relative;flex:1;}
.ld-rig-cndl i{            /* the wick */
  position:absolute;left:50%;width:1px;transform:translateX(-50%);
  top:var(--ht);height:var(--hl);
  background:currentColor;opacity:.6;
}
.ld-rig-cndl b{            /* the body */
  position:absolute;left:0;width:100%;
  top:var(--bt);height:var(--bh);min-height:1px;
  background:currentColor;border-radius:.5px;
}
.ld-rig-cndl.up{color:var(--up);} .ld-rig-cndl.dn{color:var(--down);}
.ld-rig-scale{
  display:flex;justify-content:space-between;flex:none;margin-top:.25cqw;
  font-family:var(--f-mono);font-size:.62cqw;color:var(--fg-3);
  font-variant-numeric:tabular-nums;
}

/* The funding gauge. A cone clipped to its top half and masked to a ring — the
   dial a funding rate is actually read on, with zero at twelve o'clock because
   zero is the number that matters. */
.ld-rig-gauge{position:relative;width:58%;aspect-ratio:2/1;margin:0 auto .2cqw;overflow:hidden;}
.ld-rig-gauge-arc{
  position:absolute;left:0;top:0;width:100%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 270deg,
    var(--down) 0deg,#8C6A46 62deg,var(--fg-3) 88deg,var(--fg-3) 92deg,
    #3E7E70 118deg,var(--up) 180deg,transparent 180deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 60%,#000 61%);
          mask:radial-gradient(circle at 50% 50%,transparent 60%,#000 61%);
  opacity:.9;
}
.ld-rig-needle{
  position:absolute;left:50%;bottom:0;width:.22cqw;height:80%;
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(calc(-90deg + var(--g,.5) * 180deg));
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dp));
  border-radius:999px;
  box-shadow:0 0 .6cqw rgba(232,182,71,.7);
  transition:transform .8s var(--ease);
}
.ld-rig-gnum{
  display:block;text-align:center;font-family:var(--f-mono);font-weight:600;
  font-size:1.15cqw;color:var(--fg);font-variant-numeric:tabular-nums;
}
.ld-rig-gsub{
  display:block;text-align:center;font-family:var(--f-mono);font-size:.62cqw;
  letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase;
}

/* The watchlist. */
.ld-rig-wl{display:flex;flex-direction:column;gap:.35cqw;}
.ld-rig-wl-row{
  display:flex;align-items:center;justify-content:space-between;gap:.5cqw;
  padding:.35cqw .5cqw;border-radius:.6cqw;
  background:var(--bg-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.ld-rig-wl-sym{
  display:flex;align-items:center;gap:.4cqw;
  font-family:var(--f-mono);font-size:.82cqw;letter-spacing:.06em;color:var(--fg-2);
}
.ld-rig-wl-dot{
  width:.62cqw;aspect-ratio:1;border-radius:50%;flex:none;
  background:var(--gold);box-shadow:0 0 .5cqw var(--gold-glow);
}
.ld-rig-wl-row.eth .ld-rig-wl-dot{background:var(--sig-crypto);box-shadow:0 0 .5cqw rgba(142,124,195,.5);}
.ld-rig-wl-px{
  font-family:var(--f-mono);font-size:.86cqw;color:var(--fg);
  font-variant-numeric:tabular-nums;
}

/* ── Under the pointer ────────────────────────────────
   Hovering a screen tightens its own cable: the charge runs brighter and the
   dash gets longer, so the answer and the thing feeding it are shown to be one
   object. `:has()` is the whole mechanism, and where it is unsupported the rig
   simply does not react — nothing else depends on it. */
.ld-rig:has(.ld-rig-slot.s1 .ld-rig-panel:hover) .ld-wire.w1 .ld-wire-lit,
.ld-rig:has(.ld-rig-slot.s2 .ld-rig-panel:hover) .ld-wire.w2 .ld-wire-lit,
.ld-rig:has(.ld-rig-slot.s3 .ld-rig-panel:hover) .ld-wire.w3 .ld-wire-lit,
.ld-rig:has(.ld-rig-slot.s4 .ld-rig-panel:hover) .ld-wire.w4 .ld-wire-lit{
  stroke-dasharray:22 78;
  animation-duration:calc(var(--oct-beat) / 2.2);
}

/* ── Small screens ────────────────────────────────────
   The rig's geometry is the four corners of a wide box; there are no corners at
   375px. Below the breakpoint the cables stop being drawn and the SVG slices to
   its own centre, which is exactly where the brain is — so the head survives the
   breakpoint without a second copy of it in the markup. The four screens stack
   two by two underneath. */
@media(max-width:900px){
  .ld-rig{aspect-ratio:auto;container:none;overflow:visible;
    background:none;box-shadow:none;padding:0;}
  .ld-rig::before{display:none;}
  .ld-rig-cap{position:static;margin-top:var(--ld-s3);}
  .ld-rig-svg{position:relative;inset:auto;height:225px;
    margin-bottom:var(--ld-s3);}
  .ld-wire,.ld-rig-plug{display:none;}
  /* The slice alone crops to the brain but does not enlarge it: the viewBox is
     620 units tall and the brain is 254 of them, so at any sane height it comes
     out a third the size it should be. Scaling the group inside the SVG — in
     viewBox units, about the brain's own centre — zooms instead of crops, and
     the SVG's own viewport does the clipping. */
  .ld-brain{transform-box:view-box;transform-origin:600px 295px;transform:scale(1.9);}
  .ld-rig-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ld-s2);}
  /* The corner coordinates live on `.ld-rig-slot.s1` and friends, which is two
     classes; an override written on one class loses to them and the screens
     stay pinned at 24% of a box that no longer exists. Matched class for class,
     or not matched at all. */
  .ld-rig-slot.s1,.ld-rig-slot.s2,.ld-rig-slot.s3,.ld-rig-slot.s4{
    position:static;inset:auto;width:auto;height:auto;}
  .ld-rig-slot.s1 .ld-rig-panel,.ld-rig-slot.s2 .ld-rig-panel,
  .ld-rig-slot.s3 .ld-rig-panel,.ld-rig-slot.s4 .ld-rig-panel{
    transform:none;height:150px;padding:6px;gap:5px;border-radius:12px;}
  .ld-rig-q{font-size:12px;padding:2px 5px 0;}
  .ld-rig-scr{padding:7px 9px;border-radius:8px;}
  .ld-rig-sym{font-size:9px;} .ld-rig-big{font-size:20px;} .ld-rig-chg{font-size:11px;}
  .ld-rig-st{font-size:8px;top:6px;inset-inline-end:7px;padding:1px 5px;}
  .ld-rig-scale,.ld-rig-gsub{font-size:8px;}
  .ld-rig-gnum{font-size:14px;} .ld-rig-wl-sym,.ld-rig-wl-px{font-size:11px;}
  .ld-rig-wl-dot{width:8px;} .ld-rig-wl-row{padding:5px 7px;border-radius:7px;}
  .ld-rig-wl{gap:6px;} .ld-rig-chart{gap:1.5px;}
  .ld-rig-needle{width:3px;}
}
@media(max-width:520px){
  .ld-rig-slots{grid-template-columns:1fr;}
}

/* ── Motion off ───────────────────────────────────────
   The rig is a diagram before it is an animation: one brain, four cables, four
   answers. Stopping every clock leaves all of that, with each charge parked
   mid-cable where it reads as a filled connection rather than as something
   waiting to start. The hue rotation is frozen per cable rather than cleared,
   so the spectrum is still there — it simply stops walking. */
@media(prefers-reduced-motion:reduce){
  .ld-wire,.ld-brain{animation:none;filter:hue-rotate(calc(var(--k,0) * 90deg));}
  .ld-wire-lit,.ld-brain-tr-lit{animation:none;stroke-dasharray:none;opacity:.4;}
  .ld-brain-gy{animation:none;opacity:.7;}
  .ld-brain-chip,.ld-port{animation:none;}
  .ld-rig-scr::after{animation:none;opacity:.16;}
  .ld-rig-needle{transition:none;}
}
body.no-motion .ld-wire,body.no-motion .ld-brain{
  animation:none;filter:hue-rotate(calc(var(--k,0) * 90deg));}
body.no-motion .ld-wire-lit,body.no-motion .ld-brain-tr-lit{
  animation:none;stroke-dasharray:none;opacity:.4;}
body.no-motion .ld-brain-gy{animation:none;opacity:.7;}
body.no-motion .ld-brain-chip,body.no-motion .ld-port{animation:none;}
body.no-motion .ld-rig-scr::after{animation:none;opacity:.16;}

/* The paragraph, badge and call under the rig. */
.ld-rig-foot{max-width:var(--ld-narrow);margin-inline:auto;text-align:center;}
.ld-rig-foot .ld-cta-row{justify-content:center;}

/* ══ ACTION TILES ═════════════════════════════════════
   EARN · BUY · HOLD · USE. Four things a reader can do with the two coins, and
   the one place on this page that is unapologetically an object.

   FOUR COLOURS, AND NOT ONE OF THEM IS NEW. Every hue below is already in the
   product's token set and already means something there: green is money
   arriving, gold is money itself, steel blue is Milo and therefore time and
   patience, violet is what the signal feed marks crypto with. A landing page
   that invents a fifth palette teaches a visitor a colour language the
   application will then contradict.

   REAL DEPTH, NOT A DRAWN ONE. The plate carries `transform-style:preserve-3d`
   and its contents sit at three different `translateZ` values, so when the
   camera tilts the plate the glyph, the word and the line under it move by
   DIFFERENT amounts. That parallax is the whole difference between an object
   and a picture of one — and it is also why nothing here may carry a `filter`
   or an `opacity` below 1: either of those computes `preserve-3d` as `flat`
   and silently throws the layering away. That lesson cost this project a
   sign-in card once already.
   ══════════════════════════════════════════════════════ */
.ld-acts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(min-width:900px){ .ld-acts{grid-template-columns:repeat(4,1fr);} }

.ld-act{
  --h:var(--gold);              /* the plate's hue, set per action below */
  --h-lt:var(--gold-lt);
  position:relative;aspect-ratio:5/6;border-radius:var(--r3);
  transform-style:preserve-3d;
  isolation:isolate;
  background:linear-gradient(177deg,var(--bg-2) 0%,var(--bg-0) 68%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 14px 34px rgba(0,0,0,.5);
  transition:box-shadow .3s var(--ease);
  overflow:hidden;
}
.ld-act.earn{--h:var(--up);   --h-lt:#5BE3AE;}
.ld-act.buy {--h:var(--gold); --h-lt:var(--gold-lt);}
.ld-act.hold{--h:var(--mlc);  --h-lt:var(--mlc-lt);}
.ld-act.use {--h:var(--sig-crypto); --h-lt:#B5A4E0;}

/* ── The floor ──
   The plate is lit from below by its own colour. It breathes, staggered, so the
   four of them are never in step — four lights pulsing together reads as a
   fault indicator, four out of phase reads as something running. */
.ld-act-floor{
  position:absolute;inset-inline:0;bottom:0;height:64%;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(76% 100% at 50% 118%,var(--h) 0%,transparent 66%);
  opacity:.30;
  animation:ldActBreathe 5.5s ease-in-out infinite;
}
.ld-act.buy  .ld-act-floor{animation-delay:-1.3s;}
.ld-act.hold .ld-act-floor{animation-delay:-2.7s;}
.ld-act.use  .ld-act-floor{animation-delay:-4.1s;}
@keyframes ldActBreathe{0%,100%{opacity:.22}50%{opacity:.42}}

/* ── The rim ──
   A hairline of the plate's colour along the bottom edge, where the light is
   strongest. It is what stops the four plates reading as one grey set with
   different words on them. */
.ld-act::after{
  content:'';position:absolute;inset-inline:16%;bottom:0;height:2px;z-index:1;
  border-radius:2px 2px 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--h),transparent);
  box-shadow:0 0 16px var(--h);
  opacity:.75;
}

/* ── The contents, at three depths ── */
.ld-act-in{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.4vw,15px);padding:clamp(14px,2vw,22px);
  transform-style:preserve-3d;
}
.ld-act-ic{
  display:grid;place-items:center;flex:none;
  /* BOTH DIMENSIONS, NOT `aspect-ratio`. The plate is a grid whose only child
     is sized in percentages, so `aspect-ratio` asked the height from the
     content while the content asked its height from the aspect ratio — a
     circular measurement the browser resolves by stretching, which is why this
     came out as a 72×200 slab rather than a square. Two clamps break the
     circle. */
  inline-size:clamp(46px,4.8vw,60px);
  block-size:clamp(46px,4.8vw,60px);
  border-radius:15px;
  transform:translateZ(30px);
  background:linear-gradient(152deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.45);
  color:var(--h-lt);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ld-act-ic .ic{width:44%;height:44%;}
.ld-act b{
  transform:translateZ(16px);
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(20px,2.6vw,31px);letter-spacing:.015em;line-height:1;
  /* Brushed metal with the plate's own colour warming the top of the letters.
     A word in flat colour would be a label; this is a cast plate. */
  background:linear-gradient(178deg,
    var(--h-lt) 0%, #F4F7FA 26%, #A8B2C0 58%, #6B7480 82%, #454C57 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 5px 9px rgba(0,0,0,.5));
}
.ld-act-sub{
  transform:translateZ(7px);
  font-size:11.5px;line-height:1.5;color:var(--fg-3);text-align:center;
  max-width:19ch;
  /* Three lines' worth whether the sentence needs three or two. The stack is
     centred, so a two-line plate would sit its word eleven pixels lower than
     its neighbours — four words that should read as a row reading as a wobble. */
  min-height:calc(11.5px * 1.5 * 3);
}

/* ── Under the pointer ──
   The camera in zexca-depth.js turns the plate; these two carry the rest. The
   sweep is a highlight crossing the face, once, on arrival — not a loop. */
@media(hover:hover) and (pointer:fine){
  .ld-act:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.7),
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 26px 54px rgba(0,0,0,.6),
      0 0 44px -8px var(--h);
  }
  .ld-act:hover .ld-act-ic{
    transform:translateZ(42px) scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 0 0 1px var(--h),
      0 12px 24px rgba(0,0,0,.5),
      0 0 22px -4px var(--h);
  }
  .ld-act:hover .ld-act-floor{opacity:.55;}
  .ld-act::before{
    content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
    transform:translateX(-130%);
  }
  .ld-act:hover::before{animation:ldActSweep .72s var(--ease);}
}
@keyframes ldActSweep{to{transform:translateX(130%);}}

@media(prefers-reduced-motion:reduce){
  .ld-act-floor{animation:none;opacity:.32;}
  .ld-act:hover::before{animation:none;}
  .ld-act:hover .ld-act-ic{transform:translateZ(30px);}
}
body.no-motion .ld-act-floor{animation:none;opacity:.32;}

/* ══ ASSETS — Z Coin and MILO Coin ════════════════════ */
.ld-asset{display:flex;gap:16px;align-items:flex-start;}
.ld-coin{
  width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.04em;
}
.ld-coin.zc{
  color:var(--on-gold);
  background:linear-gradient(145deg,var(--gold-lt),var(--gold) 46%,var(--gold-dp));
  box-shadow:0 6px 20px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 6px rgba(0,0,0,.3);
}
.ld-coin.mlc{
  color:#0C1720;
  background:linear-gradient(145deg,var(--mlc-lt),var(--mlc) 46%,var(--mlc-dp));
  box-shadow:0 6px 20px rgba(127,180,212,.24),inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 6px rgba(0,0,0,.3);
}

/* ══ STATS ════════════════════════════════════════════
   Left, against the rule, and big. Centred figures in centred cells float: the
   eye has nothing to line them up against and six of them read as decoration.
   Set flush to the hairline above them they become a column of readings, which
   is what a number on a trading platform is supposed to look like. */
.ld-stat{text-align:start;padding:22px 0 30px;}
.ld-stat b{
  display:block;font-family:var(--f-mono);font-weight:600;
  font-size:clamp(38px,5.4vw,66px);line-height:1;color:var(--gold-lt);
  font-variant-numeric:tabular-nums;letter-spacing:-.045em;
}
.ld-stat span{display:block;font-size:13px;color:var(--fg-3);margin-top:10px;}
.ld-stat b{transition:color .3s var(--ease),text-shadow .3s var(--ease);}
.ld-stat:hover b{color:#FFE9B8;text-shadow:0 6px 22px var(--gold-glow);}
/* A figure nobody has verified yet says so, rather than showing a number the
   company cannot stand behind. */
.ld-stat.pending b{color:var(--fg-3);opacity:.55;}

/* ══ ROADMAP ══════════════════════════════════════════ */
.ld-road{position:relative;display:grid;gap:var(--ld-s3);}
@media(min-width:900px){ .ld-road{grid-template-columns:repeat(4,1fr);gap:var(--ld-s2);} }
.ld-road::before{
  content:'';position:absolute;inset-inline:0;top:19px;height:1px;display:none;
  background:linear-gradient(90deg,var(--gold-line),var(--line) 70%,transparent);
}
@media(min-width:900px){ .ld-road::before{display:block;} }
.ld-road-i{position:relative;padding-top:0;}
@media(min-width:900px){ .ld-road-i{padding-top:52px;} }
.ld-road-d{
  position:absolute;top:12px;inset-inline-start:0;width:15px;height:15px;
  border-radius:50%;background:var(--bg-0);border:2px solid var(--line);display:none;
}
@media(min-width:900px){ .ld-road-i .ld-road-d{display:block;} }
.ld-road-i.now .ld-road-d{border-color:var(--gold);box-shadow:0 0 0 5px var(--gold-pale);}
.ld-road-t{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:8px;
}
.ld-road-i.now .ld-road-t{color:var(--gold);}

/* ══ LEARNING ═════════════════════════════════════════
   The one photograph on the page, so it gets a frame rather than being dropped
   on the ground: the same radius and hairline every other surface here carries,
   and a vignette that walks its corners down into the page's own black. Without
   that the picture reads as a rectangle someone pasted on.
   ═══════════════════════════════════════════════════ */
.ld-lb{
  position:relative;display:block;
  width:100%;max-width:520px;margin-inline:auto;
  border-radius:var(--r3);overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(232,182,71,.16),0 18px 44px rgba(0,0,0,.55);
}
.ld-lb img{display:block;width:100%;height:auto;}
/* The corners, into the ground. The frame's own black, not a grey wash. */
.ld-lb::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 70% at 50% 42%,transparent 42%,rgba(6,5,3,.55) 100%);
}

/* ── The tracks ───────────────────────────────────── */
.ld-track{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;
  border-top:1px solid var(--line-2);
}
.ld-track:first-child{border-top:0;padding-top:0;}
.ld-track-ic{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:11px;
  color:var(--gold-lt);
  background:var(--gold-pale);
  box-shadow:inset 0 0 0 1px var(--gold-line);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.ld-track-ic .ic{width:17px;height:17px;}
.ld-track b{display:block;font-size:15px;line-height:1.4;color:var(--fg);}
.ld-track p{margin-top:2px;font-size:13.5px;line-height:1.6;color:var(--fg-2);}
.ld-track{transition:border-color .3s var(--ease);}
.ld-track b,.ld-track p{transition:color .3s var(--ease);}
.ld-track:hover{border-top-color:var(--gold-line);}
.ld-track:hover b{color:var(--gold-lt);}
.ld-track:hover p{color:var(--fg-2);}
.ld-track:hover .ld-track-ic{
  transform:translateY(-3px) scale(1.06);
  box-shadow:inset 0 0 0 1px var(--gold),0 8px 20px var(--gold-glow);
}

/* ══ PARTNERS ═════════════════════════════════════════
   EMPTY FRAMES ON PURPOSE. A landing page that draws logos for partnerships
   that do not exist is the one thing on this page that could not be undone
   later. They fill in when there is something true to put in them. */
.ld-partners{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:768px){ .ld-partners{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){ .ld-partners{grid-template-columns:repeat(6,1fr);} }
.ld-partner{
  aspect-ratio:5/2;border-radius:var(--r2);border:1px dashed var(--line);
  display:grid;place-items:center;background:rgba(255,255,255,.012);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--fg-3);
  opacity:.5;
}

/* ══ SECURITY RAILS ═══════════════════════════════════ */
.ld-rail{
  display:flex;align-items:center;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--hair);
}
.ld-rail:last-child{border-bottom:0;}
.ld-rail .ic{width:17px;height:17px;color:var(--up);flex:none;}
.ld-rail b{font-weight:600;font-size:14px;}
.ld-rail span{color:var(--fg-3);font-size:12.5px;}

/* ══ STICKY CTA ═══════════════════════════════════════
   Appears once the hero is gone and never over the footer. */
.ld-sticky{
  position:fixed;inset-inline:0;bottom:0;z-index:88;
  transform:translateY(110%);transition:transform .34s var(--ease);
  background:rgba(10,12,16,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 -1px 0 var(--line),0 -10px 30px rgba(0,0,0,.4);
  padding:10px 0;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
}
.ld-sticky.on{transform:none;}
.ld-sticky-in{display:flex;align-items:center;gap:12px;}
.ld-sticky-t{font-size:13px;color:var(--fg-2);display:none;}
@media(min-width:768px){ .ld-sticky-t{display:block;} }
.ld-sticky .ld-cta-row{margin-inline-start:auto;flex:1;justify-content:stretch;}
@media(min-width:768px){ .ld-sticky .ld-cta-row{flex:none;} }
.ld-sticky .btn-gold,.ld-sticky .btn-ghost{flex:1;}
@media(min-width:768px){ .ld-sticky .btn-gold,.ld-sticky .btn-ghost{flex:none;} }

/* ══ THE EDGE RAILS ═══════════════════════════════════
   Two hairlines down the margins of the page with a light travelling each of
   them. It is the one thing on this page that runs for the whole length of it,
   and that is its job: sixteen thousand pixels of scrolling with nothing
   continuous in it reads as a stack of separate pages.

   FIXED, so the light keeps its own pace instead of riding the scroll. The
   two rails are eleven seconds apart, because two lights descending in step
   read as a progress bar rather than as a room.

   THE STACKING, which is the only fiddly part: the rails sit at z-index 1 so
   they draw OVER the panel grounds that alternate down the page, and `.ld-wrap`
   is lifted to 2 so they never draw over a word. Below 1100px there are no
   margins left to put them in and they go. */
.ld-rails{position:fixed;inset:0;z-index:1;pointer-events:none;}
.ld-rails i{
  position:absolute;top:0;bottom:0;width:1px;overflow:hidden;
  background:linear-gradient(180deg,
    transparent,rgba(232,182,71,.12) 20%,rgba(146,180,214,.09) 58%,transparent);
}
.ld-rails i:nth-child(1){inset-inline-start:max(22px,calc(50% - var(--ld-max) / 2 - 30px));}
.ld-rails i:nth-child(2){inset-inline-end:max(22px,calc(50% - var(--ld-max) / 2 - 30px));}
.ld-rails i::after{
  content:'';position:absolute;inset-inline-start:-1px;width:3px;height:26vh;
  background:linear-gradient(180deg,transparent,var(--gold-lt),transparent);
  opacity:.42;
  animation:ldRail 19s linear infinite;
}
.ld-rails i:nth-child(2)::after{animation-delay:-11s;}
@keyframes ldRail{ from{top:-28vh;} to{top:100vh;} }
@media(max-width:1099px){ .ld-rails{display:none;} }
.ld-wrap{position:relative;z-index:2;}

/* ══ FOOTER ═══════════════════════════════════════════
   The last thing on a sixteen-thousand pixel page has to feel like an ending,
   not like the links ran out. Three things do that: the hairline above it is
   lit rather than flat, the columns sit on a ground one step up from the page,
   and the name is set once at the size it deserves — a ghosted wordmark across
   the base, large enough to be the last thing you see and quiet enough that you
   read the legal line in front of it first. */
.ld-foot{
  position:relative;overflow:hidden;
  padding-block:var(--ld-s6) var(--ld-s4);
  /* Translucent at the top where the page hands over, opaque by the base — the
     scene fades out under the footer instead of stopping at its edge. */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ld-panel) 88%,transparent),#080B10 68%);
}
/* A lit edge, not a border. */
.ld-foot::before{
  content:'';position:absolute;top:0;inset-inline:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--gold-line) 28%,
    rgba(146,180,214,.26) 62%,transparent);
}
/* The name, once, at the size it deserves. */
.ld-foot-mark{
  position:absolute;inset-inline:0;bottom:-5%;z-index:0;
  text-align:center;pointer-events:none;user-select:none;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(90px,18vw,264px);line-height:.8;letter-spacing:-.055em;
  /* OUTLINE ONLY. A gradient clipped to this text left the letter boxes
     painted as pale rectangles behind the glyphs — `background-clip:text` and
     `-webkit-text-stroke` on the same element do not agree about what the
     background belongs to. A hairline outline is the better drawing anyway:
     the name is present without being loud enough to compete with the line of
     legal text sitting in front of it. */
  color:transparent;
  -webkit-text-stroke:1px rgba(232,182,71,.13);
}
.ld-foot-grid{position:relative;z-index:2;display:grid;gap:var(--ld-s4);grid-template-columns:1fr;}
@media(min-width:600px){ .ld-foot-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .ld-foot-grid{grid-template-columns:1.6fr repeat(4,1fr);gap:var(--ld-s5);} }
.ld-foot h4{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:14px;
}
html[lang="fa"] .ld-foot h4,html[lang="ar"] .ld-foot h4{
  letter-spacing:0;text-transform:none;font-family:var(--f-body);
}
/* `display:grid` does not remove a list marker — the bullets were sitting in
   the gutter of every column. */
.ld-foot ul{display:grid;gap:11px;list-style:none;}
.ld-foot ul a{
  font-size:13.5px;color:var(--fg-2);position:relative;
  transition:color .22s var(--ease);
}
/* The same travelling rule the cells use, at link scale. */
.ld-foot ul a::after{
  content:'';position:absolute;inset-inline-start:0;bottom:-3px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
[dir="rtl"] .ld-foot ul a::after{transform-origin:100% 50%;}
.ld-foot ul a:hover{color:var(--gold-lt);}
.ld-foot ul a:hover::after{transform:scaleX(1);}
.ld-foot-base{
  position:relative;z-index:2;
  margin-top:var(--ld-s5);padding-top:var(--ld-s3);
  border-top:1px solid var(--ld-rule);
  display:flex;flex-wrap:wrap;gap:var(--ld-s2) var(--ld-s3);align-items:center;
  font-size:12.5px;color:var(--fg-3);
}
.ld-social{display:flex;gap:10px;margin-inline-start:auto;}
.ld-social a{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--ld-rule);background:rgba(255,255,255,.02);color:var(--fg-3);
  transition:color .22s,border-color .22s,background .22s,transform .22s var(--ease);
}
.ld-social a:hover{
  color:var(--gold-lt);border-color:var(--gold-line);
  background:var(--gold-pale);transform:translateY(-3px);
}
.ld-social .ic{width:15px;height:15px;}

/* ══ THE CURSOR ═══════════════════════════════════════
   Desktop only, and the native cursor is never hidden — a ring travels WITH it.
   Hiding the real pointer is how a page becomes unusable the moment the script
   fails, and it costs a reader their own system setting. */
.ld-cursor{
  position:fixed;top:0;inset-inline-start:0;z-index:120;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid var(--gold-line);
  opacity:0;transition:opacity .2s,width .18s var(--ease),height .18s var(--ease),
             margin .18s var(--ease),border-color .18s,background .18s;
  will-change:transform;
}
.ld-cursor.on{opacity:1;}
.ld-cursor.mag{
  width:52px;height:52px;margin:-26px 0 0 -26px;
  border-color:var(--gold);background:var(--gold-pale);
}
@media(hover:none),(pointer:coarse){ .ld-cursor{display:none;} }

/* ══ REVEAL ═══════════════════════════════════════════
   One class, set by an IntersectionObserver. Everything starts VISIBLE in the
   stylesheet and is only hidden once the script has confirmed it can reveal it
   again — so a failed script leaves a readable page rather than a blank one. */
 /* THE RISE. Eighteen pixels over six tenths of a second is a nudge: by the
   time the eye reaches the element the move is already over, so the page reads
   as static even though it is animating. Forty-eight pixels over nine tenths is
   a move you actually watch arrive.

   The scale is what turns a slide into an approach. 0.975 to 1 alongside the
   rise reads as the element coming forward out of the page rather than sliding
   up a groove, and it costs the same one composited frame.

   Six delay steps rather than four, a tenth of a second apart, because a grid
   of nine wrapped around after four and the fifth item started again at zero —
   which is not a cascade, it is a stutter. */
.ld-js .ld-rev{opacity:0;transform:translate3d(0,48px,0) scale(.975);}
.ld-js .ld-rev.in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.ld-js .ld-rev.d1.in{transition-delay:.10s;}
.ld-js .ld-rev.d2.in{transition-delay:.20s;}
.ld-js .ld-rev.d3.in{transition-delay:.30s;}
.ld-js .ld-rev.d4.in{transition-delay:.40s;}
.ld-js .ld-rev.d5.in{transition-delay:.50s;}
.ld-js .ld-rev.d6.in{transition-delay:.58s;}

/* Layered parallax. The script writes one custom property per rail. */
.ld-par{will-change:transform;transform:translate3d(0,var(--ld-y,0),0);}

/* ══ THE LIVE BOARD ═══════════════════════════════════
   The hero's right-hand side. It replaced a static sample signal card, and it
   is the first thing on the page that is actually the product: real prices,
   pushed over a socket, from the venue the whole platform reads.

   ── WHY IT IS ONE PANEL AND NOT THREE CARDS ──
   The obvious build is what every exchange front page does: a Trending box, a
   movers box, a futures box, sitting in a grid, none of them aware of the
   others. Three boxes of equal weight is a list wearing a layout — the reader's
   eye has nowhere to land first and nothing to do second.

   This is ONE object with a hierarchy: a featured instrument with its chart,
   and a rail under it. The rail is not decoration, it is the control — picking
   a row moves it into the feature. That relationship is the whole design, and
   it is the part a grid of boxes cannot have.
   ══════════════════════════════════════════════════════ */
.ld-board{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(232,182,71,.07),transparent 58%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  border:1px solid var(--line);
  border-radius:calc(var(--r3) + 4px);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 30px 70px -30px rgba(0,0,0,.9);
}

/* ── The status strip ── */
.ld-bd-top{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.012);
}
.ld-bd-live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  color:var(--fg-3);text-transform:uppercase;
}
.ld-bd-dot{
  width:6px;height:6px;border-radius:50%;background:var(--fg-3);flex:none;
  box-shadow:0 0 0 0 rgba(14,203,129,.5);
}
/* Connected: the dot goes green and breathes. It is the only moving thing in
   the strip, so it reads as a heartbeat rather than as decoration. */
.ld-board.on .ld-bd-dot{background:var(--up);animation:ldBdBeat 2.4s ease-in-out infinite;}
@keyframes ldBdBeat{
  0%,100%{box-shadow:0 0 0 0 rgba(14,203,129,.45);}
  50%{box-shadow:0 0 0 5px rgba(14,203,129,0);}
}
.ld-bd-venue{
  margin-inline-start:auto;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.13em;color:var(--fg-3);
}

/* ── The featured instrument ── */
.ld-bd-feat{padding:18px 16px 6px;}
.ld-bd-id{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.ld-bd-sym{
  font-family:var(--f-display);font-weight:800;font-size:19px;
  letter-spacing:.01em;color:var(--fg);
}
.ld-bd-name{font-size:11.5px;color:var(--fg-3);}
/* The same six characters Market Watch and the monitor use, for the same
   reason — thirteen instruments on this venue are contracts on the thing their
   label names, not the thing itself. */
.ld-bd-tag{
  font-style:normal;font-family:var(--f-mono);font-size:8px;letter-spacing:.1em;
  color:var(--fg-3);border:1px solid var(--line);border-radius:2px;
  padding:1px 4px;cursor:help;white-space:nowrap;
}
.ld-bd-px{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px;
}
.ld-bd-last{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4.4vw,40px);line-height:1.05;font-weight:600;
  color:var(--fg);letter-spacing:-.01em;
  transition:color .45s var(--ease);
}
/* A tick paints the direction and fades back. `.35s` because two prints inside
   half a second must not sit on top of each other as one long flash. */
.ld-bd-last.up{color:var(--up);}
.ld-bd-last.dn{color:var(--down);}
.ld-bd-chg{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:14px;
}
.ld-bd-chg.up{color:var(--up);} .ld-bd-chg.dn{color:var(--down);}

/* ── The chart ──
   Sized in the stylesheet rather than by the canvas' own attributes, so the
   backing store can be retina without the box changing. */
.ld-bd-chart{position:relative;height:96px;margin:10px 0 4px;}
.ld-bd-chart canvas{display:block;width:100%;height:100%;}

/* Four figures under the chart, on one rule. */
.ld-bd-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px 10px;
  padding:10px 16px 14px;border-top:1px solid var(--line-2);
}
.ld-bd-stat b{
  display:block;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--fg-2);font-weight:500;
}
.ld-bd-stat span{
  display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.11em;
  color:var(--fg-3);text-transform:uppercase;margin-top:2px;
}

/* ── The rail ──
   Buttons, not rows: this is a control and it has to be reachable from a
   keyboard. */
.ld-bd-rail{border-top:1px solid var(--line-2);}
.ld-bd-row{
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:10px;width:100%;
  padding:9px 16px;background:none;border:0;border-top:1px solid var(--line-2);
  text-align:start;cursor:pointer;color:inherit;font:inherit;
  transition:background .2s var(--ease);
}
.ld-bd-row:first-child{border-top:0;}
.ld-bd-row:hover,.ld-bd-row:focus-visible{background:rgba(255,255,255,.035);}
.ld-bd-row.on{background:rgba(232,182,71,.07);}
.ld-bd-row.on .ld-bd-rsym{color:var(--gold);}
.ld-bd-rmark{
  width:22px;height:22px;border-radius:6px;flex:none;
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:8.5px;font-weight:600;
  background:var(--bg-3);color:var(--fg-2);
}
/* When the mark is real artwork rather than the ticker stand-in it is a disc,
   not a rounded square, and it brings its own colour — so the plate the
   stand-in needs has to come off. `.cix` from `dashboard.css` supplies the
   hairline ring that keeps a dark brand disc visible on this page. */
.ld-bd-rmark.cix{border-radius:50%;background:none;}
.ld-bd-rsym{font-family:var(--f-mono);font-size:12px;color:var(--fg);}
.ld-bd-rpx{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--fg-2);transition:color .45s var(--ease);
}
.ld-bd-rpx.up{color:var(--up);} .ld-bd-rpx.dn{color:var(--down);}
.ld-bd-rchg{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:11.5px;min-width:62px;text-align:end;
}
.ld-bd-rchg.up{color:var(--up);} .ld-bd-rchg.dn{color:var(--down);}

/* ── Before the first print ──
   Never a spinner. The board is drawn at its real size with the figures
   replaced by a soft bar, so nothing moves when the prices land. */
.ld-board.warm .ld-bd-last,
.ld-board.warm .ld-bd-chg,
.ld-board.warm .ld-bd-rpx,
.ld-board.warm .ld-bd-rchg,
.ld-board.warm .ld-bd-stat b{
  color:transparent;border-radius:3px;
  background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2));
  background-size:220% 100%;
  animation:ldBdWarm 1.5s linear infinite;
}
@keyframes ldBdWarm{ from{background-position:120% 0;} to{background-position:-120% 0;} }

@media(prefers-reduced-motion:reduce){
  .ld-board.on .ld-bd-dot{animation:none;}
  .ld-board.warm .ld-bd-last,.ld-board.warm .ld-bd-chg,
  .ld-board.warm .ld-bd-rpx,.ld-board.warm .ld-bd-rchg,
  .ld-board.warm .ld-bd-stat b{animation:none;}
  .ld-bd-last,.ld-bd-rpx{transition:none;}
}
body.no-motion .ld-board.on .ld-bd-dot{animation:none;}

/* ══ MOTION OFF ═══════════════════════════════════════
   Both switches, the way the rest of the product handles them. Everything that
   MOVES stops; nothing that carries meaning is removed. */
@media(prefers-reduced-motion:reduce){
  .ld-js .ld-rev,.ld-js .ld-rev.in{opacity:1;transform:none;transition:none;}
  .ld-par{transform:none !important;}
  .ld-cursor{display:none;}
  .ld-milo-wave i,.ld-tape *{animation:none !important;}
  .ld-act:hover,.ld-social a:hover{transform:none;}
  .ld-card:hover .ld-ic,.ld-card:not(.raised):not(.ld-tilt):hover,
  .ld-track:hover .ld-track-ic{transform:none;}
  .ld-card:not(.raised)::after{transition:none;}
  .ld-rails i::after{animation:none;top:30vh;}
}
body.no-motion .ld-rev,body.no-motion .ld-rev.in{opacity:1;transform:none;transition:none;}
body.no-motion .ld-par{transform:none !important;}
body.no-motion .ld-cursor{display:none;}
body.no-motion .ld-milo-wave i{animation:none;}
body.no-motion .ld-rails i::after{animation:none;top:30vh;}

/* ══ PRINT ════════════════════════════════════════════ */
@media print{
  .ld-nav,.ld-sticky,.ld-cursor,.ld-aurora,.ld-stage{display:none !important;}
  body.ld{background:#fff;color:#000;}
  .ld-h1,.ld-brand-w,.ld-act b{-webkit-text-fill-color:currentColor;color:#000;background:none;}
}