/* Features: one continuous section telling a two-chapter product story. The
   trade-alert preview opens the workflow, then a hairline rule hands into the
   Tour Dashboard preview with its capability matrix — two chapters of the
   same product system, not separate sections. */

body.landing-3d #features {
  min-height: auto;
  /* A hairline seam (the default .landing-section::before) marks the How It
     Works → Features boundary. The section opens with generous top padding so
     its content sits well clear of the How It Works close below the seam. */
  padding: clamp(96px, 8vw, 120px) 0 clamp(96px, 8vw, 120px);
  /* Faint brand pool at the opening keeps the story continuous. */
  background: radial-gradient(ellipse 56% 30% at 50% 0%, rgba(70, 105, 125, 0.028), transparent 70%);
}

/* This seam previously had no divider at all, so read it a touch stronger than
   the near-invisible default — a clear hairline, still subtle and premium. */
body.landing-3d #features::before {
  background: linear-gradient(90deg, transparent, rgba(170, 195, 220, 0.16), transparent);
}

/* Cross-page /#features arrivals use native anchoring, so the fixed navbar
   (69px when scrolled) overlays the section top; the reduced padding-top no
   longer clears it. 80px matches where same-page nav clicks land the section
   (landing.js scrolls to navbar bottom + 10px). Mobile keeps its own 52px
   contract from landing-mobile.css. */
@media (min-width: 701px) {
  body.landing-3d #features {
    scroll-margin-top: 80px;
  }
}

body.landing-3d .feature-showcase-inner {
  width: min(100% - 48px, var(--container-wide));
}

/* ── Dashboard section — the command-center preview as its own section between
   Features and Pricing. Same section rhythm and seam idiom as its peers. */
body.landing-3d #dashboard {
  min-height: auto;
  padding: clamp(96px, 8vw, 120px) 0 var(--section-y-standard);
  background: radial-gradient(ellipse 56% 30% at 50% 0%, rgba(70, 105, 125, 0.028), transparent 70%);
}

/* A clear hairline seam at the Features → Dashboard boundary, like #features. */
body.landing-3d #dashboard::before {
  background: linear-gradient(90deg, transparent, rgba(170, 195, 220, 0.16), transparent);
}

@media (min-width: 701px) {
  body.landing-3d #dashboard {
    scroll-margin-top: 80px;
  }
}

body.landing-3d .dashboard-inner {
  width: min(100% - 48px, var(--container-wide));
}

/* Chapter one — a centerpiece composition: the introduction sits centered
   above one large decision card. The alert is the credibility moment of the
   page, so it gets the full column instead of sharing a split. */
body.landing-3d .feature-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(34px, 3.2vw, 44px);
}

body.landing-3d .feature-spotlight-copy {
  min-width: 0;
  max-width: 780px;
  text-align: center;
}

body.landing-3d .feature-spotlight-copy .depth-tag {
  justify-content: center;
  /* Eyebrow→headline gap, matched to the hero/how-it-works/pricing eyebrows. */
  margin-bottom: 22px;
}

body.landing-3d .feature-spotlight-copy .depth-heading {
  max-width: 16ch;
  margin: 0 auto;
  color: rgba(232, 240, 248, 0.92);
  /* Editorial, not billboard: one step below the section-title scale.
     3.62vw reaches the 52px cap at 1440px per the clamp rule. */
  font-size: clamp(40px, 3.62vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.048em;
  text-align: center;
  text-wrap: balance;
}

body.landing-3d .feature-spotlight-copy .depth-heading span {
  color: rgba(35, 209, 139, 0.8);
}

body.landing-3d .feature-spotlight-copy .depth-copy {
  max-width: 600px;
  margin: clamp(14px, 1.2vw, 18px) auto 0;
  color: rgba(210, 225, 235, 0.68);
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  line-height: 1.62;
  text-align: center;
}

/* Claims: a quiet one-line index of the panel — the three promises sit inline,
   spaced apart, annotation rather than a stacked checklist. */
body.landing-3d .trade-review-claims {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: center;
  column-gap: clamp(16px, 1.8vw, 26px);
  row-gap: 12px;
  max-width: none;
  margin: clamp(24px, 2.23vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  /* Grayscale AA so the light claim labels read crisp on the dark section
     instead of blooming with subpixel stem-dilation. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.landing-3d .trade-review-claims li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

/* Same muted check the panel's reasoning list uses, a step quieter. */
body.landing-3d .trade-review-claims i {
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.1 6.5 4.8 9.1 9.9 3.2' fill='none' stroke='%2323d18b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.64;
}

body.landing-3d .trade-review-claims strong {
  display: block;
  color: rgba(238, 244, 255, 0.86);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ── Trade Review editorial/product split ─────────────────────────────────
   Above 1200px the centered stage becomes an asymmetric split: annotation
   column left, decision artifact right. This breaks the centered-stage run
   into the Dashboard reveal while the artifact keeps the dominant track.
   Below the breakpoint everything falls back to the stacked composition. */
@media (min-width: 1200px) {
  body.landing-3d .feature-spotlight {
    /* Preview takes the wide left track; the editorial copy sits right. */
    grid-template-columns: minmax(0, 0.64fr) minmax(320px, 0.36fr);
    align-items: center;
    justify-items: stretch;
    /* 3.62vw reaches the 52px cap at 1440px per the clamp rule. */
    gap: clamp(40px, 3.62vw, 52px);
  }

  /* DOM order stays copy-then-panel (natural stacked reading on mobile); the
     desktop split places the panel left and the copy right explicitly. Both
     are pinned to row 1 — without an explicit grid-row, grid's sparse
     auto-placement drops the panel (placed after the copy) to row 2. */
  body.landing-3d .opportunity-panel {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    justify-self: stretch;
  }

  /* Copy stays in the right column (justify-self: end keeps it where it sits),
     but its content reads left-aligned. */
  body.landing-3d .feature-spotlight-copy {
    grid-column: 2;
    grid-row: 1;
    /* Use the full copy track (~460px) so the inline claims row fits on one
       line; the paragraph keeps its own narrower max-width below. */
    max-width: 460px;
    justify-self: end;
    text-align: left;
  }

  body.landing-3d .feature-spotlight-copy .depth-tag {
    justify-content: flex-start;
  }

  body.landing-3d .feature-spotlight-copy .depth-heading {
    max-width: 13ch;
    margin: 0;
    text-align: left;
  }

  body.landing-3d .feature-spotlight-copy .depth-copy {
    max-width: 440px;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  body.landing-3d .trade-review-claims {
    margin-right: 0;
    margin-left: 0;
  }
}

/* The panel shares the hero mockup's surface system — same near-solid
   translucent body, hairline border, and grounded shadow — so the two screens
   read as captures of one application. No inset sheen: a screenshot of
   software, not a rendering of one. */
body.landing-3d .opportunity-panel {
  position: relative;
  width: min(100%, 1088px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-product-line);
  border-radius: 25px;
  /* Premium product artifact: soft radius, top-lit gradient, hairline inner
     highlight, deep grounded shadow. Opaque fill with no backdrop blur — the
     panel reads as a screenshot of software, and the white figures stay crisp:
     a translucent + blurred backdrop bled the section's ambient light in around
     the bold numbers and haloed them. */
  background: linear-gradient(180deg, #08161f, #040c12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 26px 70px rgba(0, 0, 0, 0.32);
  color: rgba(222, 238, 230, 0.9);
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  /* Grayscale AA so the bold white figures render clean on the dark fill
     instead of blooming with subpixel stem-dilation. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}

body.landing-3d .opportunity-panel-head,
body.landing-3d .opportunity-reasoning,
body.landing-3d .opportunity-panel-foot {
  padding-right: clamp(26px, 2.8vw, 30px);
  padding-left: clamp(26px, 2.8vw, 30px);
}

/* Header is a compressed toolbar strip on the hero's darker chrome tint:
   instrument identity (coin + pair stack) left, alert telemetry right —
   chrome annotating the screen rather than titling a card. */
body.landing-3d .opportunity-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 36px);
  padding-top: 17px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(125, 150, 175, 0.09);
  background: rgba(10, 18, 27, 0.4);
}

body.landing-3d .opportunity-instrument {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.landing-3d .opportunity-coin {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  /* Slightly desaturated so the bright orange doesn't over-pull attention. */
  filter: saturate(0.82);
}

body.landing-3d .opportunity-names {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.landing-3d .opportunity-pair {
  display: flex;
  /* Center the direction pill on the ticker's optical center — baseline
     alignment let the padded/bordered pill sit visibly low. */
  align-items: center;
  gap: 9px;
}

body.landing-3d .opportunity-pair strong {
  color: rgba(238, 244, 255, 0.92);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.012em;
  line-height: 1.2;
}

/* Direction reads as a soft signal pill, not loose colored text. */
body.landing-3d .opportunity-direction {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px;
  border: 1px solid rgba(35, 209, 139, 0.15);
  border-radius: 7px;
  background: rgba(35, 209, 139, 0.08);
  color: rgba(200, 255, 230, 0.82);
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.2;
}

/* On phones the direction + timeframe move into the instrument sub-line as
   plain text ("· Long · 4H"); desktop keeps them in the pill + telemetry row,
   so hide the sub-line signal copy by default. */
body.landing-3d .opportunity-sub-signal {
  display: none;
}

body.landing-3d .opportunity-instrument-sub {
  color: rgba(222, 238, 230, 0.55);
  font-size: clamp(0.7rem, 0.82vw, 0.76rem);
  line-height: 1.3;
}

/* The source monitor reads a step brighter than the surrounding sub-line so
   it's legible as "where this trade came from" without shouting. */
body.landing-3d .opportunity-monitor {
  color: rgba(210, 228, 238, 0.82);
}

/* Telemetry follows the hero header's grammar — quiet sentence-case Inter
   with short standalone hairline dividers, not mono caps. */
body.landing-3d .opportunity-alert-meta {
  display: flex;
  align-items: center;
  color: rgba(222, 238, 230, 0.68);
  font-size: clamp(0.74rem, 0.88vw, 0.82rem);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

body.landing-3d .opportunity-alert-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* A dot separator (·) rather than a vertical hairline — quieter and less
   generic-SaaS than a bar. The 7px flex gap sits to its right. */
body.landing-3d .opportunity-alert-meta > span + span:not(.opportunity-confidence)::before {
  content: "·";
  margin-left: 8px;
  color: rgba(222, 238, 230, 0.4);
}

body.landing-3d .opportunity-alert-meta strong {
  color: rgba(238, 244, 255, 0.95);
  font-weight: 600;
}

/* Confidence is the card's signature status: a compact signal pill in the
   header telemetry — readable, softly green, never glowing. */
/* A small, refined signal pill — lower fill, thinner border, tighter radius
   and padding than a chunky badge. It reads, it doesn't shout. */
body.landing-3d .opportunity-alert-meta .opportunity-confidence {
  min-height: 21px;
  margin-left: 12px;
  padding: 2px 8px;
  border: 1px solid rgba(35, 209, 139, 0.1);
  border-radius: 6px;
  background: rgba(35, 209, 139, 0.05);
  color: rgba(214, 240, 228, 0.78);
  font-size: 0.72rem;
}

body.landing-3d .opportunity-alert-meta .opportunity-confidence strong {
  margin-left: 4px;
  /* Muted brand green, never brighter — the header stays restrained. */
  color: rgba(39, 200, 137, 0.9);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

body.landing-3d .opportunity-status {
  color: rgba(222, 238, 230, 0.94);
  font-size: clamp(0.76rem, 0.9vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.015em;
}

body.landing-3d .opportunity-status i {
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(35, 209, 139, 0.85);
}

/* One levels band, not four tiles: Entry leads at full voice in a wider
   column, and the supporting trio steps down in size and brightness. The
   hairline after Entry is a shade firmer than the ones inside the trio, so
   the band reads primary | supporting at a glance. */
/* Metric blocks — quiet cards inside the card, with Entry leading the row
   as the primary decision anchor: a wider column on a slightly firmer
   surface, the supporting trio a half-step quieter. */
/* One clean metric band on the card's own surface — no tiles. Entry leads in
   a wider column; the supporting trio are set off by subtle vertical hairlines
   and spacing, never rounded boxes. */
body.landing-3d .opportunity-levels {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 18px clamp(26px, 2.8vw, 30px);
  padding: 0;
  border-bottom: 0;
}

body.landing-3d .opportunity-levels > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2px clamp(14px, 1.7vw, 22px);
  border: 0;
  border-radius: 0;
  background: none;
}

/* Entry aligns flush to the band's left edge; the trio carry thin dividers. */
body.landing-3d .opportunity-levels > div:first-child {
  padding-left: 0;
}

body.landing-3d .opportunity-levels > div + div {
  border-left: 1px solid rgba(165, 205, 220, 0.08);
}

/* Metric labels in the data voice: small tracked mono. */
body.landing-3d .opportunity-levels dt {
  color: rgba(190, 210, 220, 0.62);
  font-family: var(--depth-mono);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.landing-3d .opportunity-level-entry dt {
  color: rgba(210, 228, 238, 0.72);
}

/* The flex column plus margin-top:auto on <small> pins every annotation to
   the band's shared baseline, so Entry's taller value can't stagger them. */
body.landing-3d .opportunity-levels dd {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  margin: 9px 0 0;
}

body.landing-3d .opportunity-levels dd strong {
  color: rgba(238, 244, 255, 0.96);
  font-size: clamp(1.15rem, 1.3vw, 1.3rem);
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

body.landing-3d .opportunity-level-entry dd strong {
  color: rgba(238, 244, 255, 0.96);
  font-weight: 750;
}

/* Top-aligned under each value so a longer sub-label (e.g. "Profit is twice
   the risk") flows down without staggering the band's values. */
body.landing-3d .opportunity-levels small {
  margin-top: 0;
  color: rgba(205, 220, 230, 0.6);
  font-size: clamp(0.6875rem, 0.8vw, 0.75rem);
  line-height: 1.35;
}

body.landing-3d .opportunity-level-target dd strong,
body.landing-3d .opportunity-level-target small {
  color: rgba(35, 209, 139, 0.88);
}

body.landing-3d .opportunity-level-stop small {
  color: rgba(231, 167, 104, 0.78);
}

/* Analysis sits a half-step recessed from the panel body — an editorial
   content well seated between hairlines, reading as generated analysis. */
/* A concise reasoning module on the card's own surface — one hairline divides
   it from the metrics above; no recessed well, no boxed frame. */
body.landing-3d .opportunity-reasoning {
  padding-top: 16px;
  padding-bottom: 18px;
  border-top: 1px solid rgba(207, 224, 255, 0.05);
  background: none;
}

/* Sentence case, Inter — all-caps mono felt mechanical. */
body.landing-3d .opportunity-reasoning-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  color: rgba(190, 210, 220, 0.56);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.4;
}

body.landing-3d .opportunity-reasoning-head span:first-child {
  color: rgba(214, 230, 240, 0.82);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

body.landing-3d .opportunity-reasoning ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each condition is one generated sentence — bold verdict flowing into the
   reasoning — rather than a two-column checklist row. */
body.landing-3d .opportunity-reasoning li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 11px;
  padding: 8px 0;
}

/* Extremely faint dividers between conditions — structure, not a checklist. */
body.landing-3d .opportunity-reasoning li + li {
  border-top: 1px solid rgba(207, 224, 255, 0.028);
}

/* Small, refined muted-green checks — verified, not bulleted. */
body.landing-3d .opportunity-reasoning li i {
  width: 12px;
  height: 12px;
  margin-top: 0.28em;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.1 6.5 4.8 9.1 9.9 3.2' fill='none' stroke='%2323d18b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.7;
}

/* Analysis voice: the bold verdict leads bright, the reasoning follows a
   half-step back — reads as generated analysis, not footnotes. */
body.landing-3d .opportunity-reasoning li p {
  margin: 0;
  color: rgba(218, 232, 242, 0.76);
  font-size: clamp(0.84375rem, 0.95vw, 0.875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* The verdict leads, but calmer — slightly less bright so it doesn't shout. */
body.landing-3d .opportunity-reasoning li strong {
  color: rgba(234, 242, 250, 0.88);
  font-weight: 600;
}

/* Quiet guidance affordance on the panel body surface: what ships with the
   alert on the left, a small text link on the right. Never a button. */
/* A slim execution strip on the card's own surface — one hairline above it,
   no rounded box: verdict left, action right. */
body.landing-3d .opportunity-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
  margin: 0;
  padding: 15px clamp(26px, 2.8vw, 30px);
  border: 0;
  border-top: 1px solid rgba(207, 224, 255, 0.05);
  border-radius: 0;
  background: none;
}

body.landing-3d .opportunity-guidance p {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

body.landing-3d .opportunity-guidance strong {
  color: rgba(222, 238, 230, 0.92);
  font-size: clamp(0.78rem, 0.92vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.015em;
}

body.landing-3d .opportunity-guidance p span {
  color: rgba(215, 230, 238, 0.7);
  font-size: clamp(0.79rem, 0.9vw, 0.8125rem);
  line-height: 1.5;
}

/* Suggested action reads in muted green at a confident weight — a verdict,
   never a primary CTA. */
body.landing-3d .opportunity-guidance-link {
  flex: 0 0 auto;
  color: rgba(35, 209, 139, 0.85);
  font-size: clamp(0.76rem, 0.88vw, 0.82rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

body.landing-3d .opportunity-guidance-link:hover,
body.landing-3d .opportunity-guidance-link:focus-visible {
  color: rgba(35, 209, 139, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(35, 209, 139, 0.4);
  text-underline-offset: 3px;
}

body.landing-3d .opportunity-guidance-link:focus-visible {
  outline: 1px solid rgba(35, 209, 139, 0.55);
  outline-offset: 3px;
}

body.landing-3d .opportunity-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid rgba(125, 150, 175, 0.07);
  background: rgba(10, 18, 27, 0.32);
  color: rgba(222, 238, 230, 0.55);
  font-size: clamp(0.72rem, 0.84vw, 0.78rem);
  font-weight: 500;
  line-height: 1.4;
}

body.landing-3d .opportunity-panel-foot span:first-child {
  color: rgba(222, 238, 230, 0.8);
}

/* Chapter two — a hairline rule (not a new section break) carries the reader
   from the alert into the Tour Dashboard it lives in. The dashboard becomes
   the control-room moment: centered introduction, one wide cinematic preview,
   and the capability list reading beneath it in three ruled columns. */
/* The command-center composition inside the Dashboard section. */
body.landing-3d .feature-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100%;
}

/* The lead groups the statement, subtext, and preview tile so it can move as
   one block: centered above the matrix when stacked, anchored right in the
   wide split. */
body.landing-3d .feature-dashboard-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

body.landing-3d .feature-dash-preview {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--container-dashboard));
  min-width: 0;
  margin: 0;
}

/* Pedestal light: a soft pool of brand-and-page light behind the mockup so
   the control room sits in an atmosphere instead of flat on the section. */
body.landing-3d .feature-dash-preview::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -7% -16%;
  background:
    radial-gradient(ellipse 46% 42% at 44% 56%, rgba(115, 199, 255, 0.025), transparent 68%),
    radial-gradient(ellipse 80% 66% at 50% 58%, rgba(8, 20, 28, 0.9), transparent 80%);
  pointer-events: none;
}

body.landing-3d .feature-dashboard-head {
  min-width: 0;
  max-width: 760px;
  margin-bottom: clamp(24px, 2.6vw, 34px);
  text-align: center;
}

body.landing-3d .feature-dashboard-head .depth-heading {
  /* The Dashboard section title — the same editorial scale and style as the
     How It Works and Features section headlines. */
  max-width: 16ch;
  margin: 0 auto;
  color: rgba(232, 240, 248, 0.92);
  font-size: clamp(40px, 3.62vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.048em;
  text-align: center;
  text-wrap: balance;
}

body.landing-3d .feature-dashboard-head .depth-heading span {
  /* The same brand green as the other section headlines. */
  color: rgba(35, 209, 139, 0.8);
}

/* Section subtext under the command-center headline — the same muted,
   centered voice as the spotlight lead, sized a touch larger as a standalone
   section intro. */
body.landing-3d .feature-dashboard-head .depth-copy {
  max-width: 60ch;
  margin: clamp(15px, 1.3vw, 19px) auto 0;
  color: rgba(210, 225, 235, 0.68);
  font-size: clamp(0.96rem, 1.12vw, 1.05rem);
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

/* The dashboard preview is a miniature of the real Tour Dashboard: cards on
   the app's page background, a page-level nav rail, the dominant chart card,
   and the Monitors / Trade Alerts column. Inner type is fixed-px — it is a
   rendered product screen, not page copy. */
body.landing-3d .dashpre {
  display: grid;
  /* Rail · central workspace panel · monitors+alerts. The market list and
     indicators docks live INSIDE the central panel (its own 3-column grid). */
  grid-template-columns: 40px minmax(0, 1fr) 220px;
  gap: 9px;
  overflow: hidden;
  padding: 8px;
  /* The flagship frame: crisp radius, glass edge, deep seated shadow. */
  border: 1px solid var(--card-product-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8, 22, 31, 0.8), rgba(4, 12, 18, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 36px 110px rgba(0, 0, 0, 0.46);
  color: rgba(222, 238, 230, 0.9);
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

body.landing-3d .dashpre-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(190, 210, 226, 0.07);
  border-radius: 14px;
  background: #0a141d;
}

/* The central panel is one card split into three columns by hairlines — the
   market-list dock, the chart, and the indicators dock. */
body.landing-3d .dashpre-chartcard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 146px;
  align-items: stretch;
}

body.landing-3d .dashpre-chartmain {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Nav rail sits directly on the page background, active tool boxed —
   exactly the tour's left rail. */
body.landing-3d .dashpre-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 2px 0;
}

body.landing-3d .dashpre-rail > span {
  display: grid;
  place-items: center;
  width: 33px;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(222, 238, 230, 0.48);
}

body.landing-3d .dashpre-rail > span.is-active {
  border-color: rgba(35, 209, 139, 0.4);
  background: rgba(35, 209, 139, 0.08);
  color: rgba(35, 209, 139, 0.95);
}

body.landing-3d .dashpre-rail > .dashpre-rail-foot {
  margin-top: auto;
}

body.landing-3d .dashpre-rail > .dashpre-rail-foot,
body.landing-3d .dashpre-rail > .dashpre-rail-foot ~ span {
  color: rgba(222, 238, 230, 0.36);
}

body.landing-3d .dashpre-rail svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Expanded market list — left dock inside the central panel ─────────── */
body.landing-3d .dashpre-markets {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 9px 8px 4px;
  border-right: 1px solid rgba(190, 210, 226, 0.08);
}

body.landing-3d .dashpre-mkt-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(207, 224, 255, 0.08);
  border-radius: 7px;
  background: rgba(207, 224, 255, 0.02);
  color: rgba(222, 238, 230, 0.4);
  font-size: 9.5px;
}

body.landing-3d .dashpre-mkt-search svg {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.landing-3d .dashpre-mkt-tabs {
  display: flex;
  gap: 12px;
  margin: 9px 4px 0;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(207, 224, 255, 0.06);
}

body.landing-3d .dashpre-mkt-tabs span {
  color: rgba(222, 238, 230, 0.4);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.landing-3d .dashpre-mkt-tabs span.is-active {
  color: rgba(238, 244, 255, 0.9);
}

body.landing-3d .dashpre-mkt-colhead {
  display: flex;
  justify-content: space-between;
  padding: 8px 5px 5px;
  color: rgba(190, 210, 220, 0.42);
  font-family: var(--depth-mono);
  font-size: 7.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.landing-3d .dashpre-mkt-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

body.landing-3d .dashpre-mkt-list li {
  display: grid;
  grid-template-columns: 9px 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4.5px 4px;
  border-radius: 6px;
}

body.landing-3d .dashpre-mkt-list li.is-active {
  background: rgba(35, 209, 139, 0.06);
  box-shadow: inset 2px 0 0 rgba(35, 209, 139, 0.55);
}

body.landing-3d .dashpre-mkt-star {
  width: 9px;
  height: 9px;
  background: rgba(222, 238, 230, 0.26);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3.3 2.75 5.57 6.15.9-4.45 4.34 1.05 6.12L12 17.34l-5.5 2.89 1.05-6.12L3.1 9.77l6.15-.9L12 3.3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3.3 2.75 5.57 6.15.9-4.45 4.34 1.05 6.12L12 17.34l-5.5 2.89 1.05-6.12L3.1 9.77l6.15-.9L12 3.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.landing-3d .dashpre-mkt-star.is-on {
  background: rgba(245, 189, 79, 0.92);
}

body.landing-3d .dashpre-mkt-coin {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c, #35507a);
  color: rgba(255, 255, 255, 0.94);
  font-size: 8px;
  font-weight: 700;
}

body.landing-3d .dashpre-mkt-name {
  display: grid;
  min-width: 0;
}

body.landing-3d .dashpre-mkt-name strong {
  color: rgba(238, 244, 255, 0.92);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}

body.landing-3d .dashpre-mkt-name em {
  overflow: hidden;
  color: rgba(222, 238, 230, 0.42);
  font-size: 8px;
  font-style: normal;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.landing-3d .dashpre-mkt-quote {
  display: grid;
  justify-items: end;
}

body.landing-3d .dashpre-mkt-quote strong {
  color: rgba(238, 244, 255, 0.88);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.25;
}

body.landing-3d .dashpre-mkt-quote em {
  font-size: 8px;
  font-style: normal;
  line-height: 1.2;
}

body.landing-3d .dashpre-mkt-quote em.up { color: rgba(35, 209, 139, 0.85); }
body.landing-3d .dashpre-mkt-quote em.dn { color: rgba(226, 96, 96, 0.82); }

/* ── Expanded indicators menu — right dock inside the central panel ─────── */
body.landing-3d .dashpre-indicators {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 9px 6px;
  border-left: 1px solid rgba(190, 210, 226, 0.08);
}

body.landing-3d .dashpre-ind-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(207, 224, 255, 0.06);
}

body.landing-3d .dashpre-ind-title {
  display: grid;
  gap: 2px;
}

body.landing-3d .dashpre-ind-title strong {
  color: rgba(238, 244, 255, 0.95);
  font-size: 12px;
  font-weight: 650;
}

body.landing-3d .dashpre-ind-title small {
  color: rgba(222, 238, 230, 0.4);
  font-size: 8.5px;
}

body.landing-3d .dashpre-ind-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(35, 209, 139, 0.13);
  color: rgba(35, 209, 139, 0.95);
  font-family: var(--depth-mono);
  font-size: 9px;
  font-weight: 650;
}

body.landing-3d .dashpre-ind-tabs {
  display: flex;
  gap: 6px;
  margin: 9px 4px;
}

body.landing-3d .dashpre-ind-tabs span {
  padding: 3px 9px;
  border-radius: 999px;
  color: rgba(222, 238, 230, 0.5);
  font-size: 9px;
  font-weight: 600;
}

body.landing-3d .dashpre-ind-tabs span.is-active {
  background: rgba(207, 224, 255, 0.06);
  color: rgba(238, 244, 255, 0.9);
}

body.landing-3d .dashpre-ind-list {
  display: flex;
  flex-direction: column;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

body.landing-3d .dashpre-ind-list li {
  display: grid;
  grid-template-columns: 12px 3px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5.5px 4px;
  border-top: 1px solid rgba(207, 224, 255, 0.035);
}

body.landing-3d .dashpre-ind-list li:first-child {
  border-top: 0;
}

body.landing-3d .dashpre-ind-check {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(207, 224, 255, 0.2);
  border-radius: 3px;
}

body.landing-3d .dashpre-ind-list li.is-on .dashpre-ind-check {
  border-color: rgba(35, 209, 139, 0.55);
  background: rgba(35, 209, 139, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.8 9.6 3.4' fill='none' stroke='%23051009' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}

body.landing-3d .dashpre-ind-tick {
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--c, #6fa8ff);
  opacity: 0.72;
}

body.landing-3d .dashpre-ind-list li strong {
  overflow: hidden;
  color: rgba(238, 244, 255, 0.84);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.landing-3d .dashpre-ind-list li.is-on strong {
  color: rgba(238, 244, 255, 0.97);
}

body.landing-3d .dashpre-ind-list li em {
  color: rgba(222, 238, 230, 0.38);
  font-family: var(--depth-mono);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

/* Right column — the tour's Monitors and Trade Alerts cards, stacked. */
body.landing-3d .dashpre-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

body.landing-3d .dashpre-cardhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgba(207, 224, 255, 0.05);
}

body.landing-3d .dashpre-cardtitle {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.landing-3d .dashpre-cardtitle strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(238, 244, 255, 0.97);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

body.landing-3d .dashpre-cardtitle strong b {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(35, 209, 139, 0.13);
  color: rgba(35, 209, 139, 0.95);
  font-family: var(--depth-mono);
  font-size: 9px;
  font-weight: 650;
}

body.landing-3d .dashpre-cardtitle small {
  color: rgba(222, 238, 230, 0.66);
  font-size: 9.5px;
  line-height: 1.3;
}

body.landing-3d .dashpre-filter {
  flex: 0 0 auto;
  color: rgba(222, 238, 230, 0.42);
}

body.landing-3d .dashpre-filter svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

body.landing-3d .dashpre-create {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(207, 224, 255, 0.05);
  color: rgba(238, 244, 255, 0.82);
  font-size: 10.5px;
  font-weight: 600;
}

body.landing-3d .dashpre-create i {
  display: grid;
  place-items: center;
  width: 17px;
  aspect-ratio: 1;
  border-radius: 5px;
  background: rgba(35, 209, 139, 0.16);
  color: rgba(35, 209, 139, 0.95);
}

body.landing-3d .dashpre-create svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

body.landing-3d .dashpre-side ul {
  margin: 0;
  padding: 3px 0 5px;
  list-style: none;
}

body.landing-3d .dashpre-monitors li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
}

body.landing-3d .dashpre-mdot {
  flex: 0 0 auto;
  width: 8px;
  aspect-ratio: 1;
  border: 1px solid rgba(222, 238, 230, 0.28);
  border-radius: 50%;
}

body.landing-3d .dashpre-monitors li.is-live .dashpre-mdot {
  border-color: rgba(35, 209, 139, 0.5);
  background: rgba(35, 209, 139, 0.9);
  box-shadow: 0 0 0 2px rgba(35, 209, 139, 0.12);
}

body.landing-3d .dashpre-mcopy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.landing-3d .dashpre-mcopy strong {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: rgba(238, 244, 255, 0.95);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* The name truncates before the status chip does. */
body.landing-3d .dashpre-mname {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

body.landing-3d .dashpre-chip {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid;
  border-radius: 4px;
  font-family: var(--depth-mono);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.landing-3d .dashpre-chip-live {
  border-color: rgba(35, 209, 139, 0.4);
  color: rgba(35, 209, 139, 0.95);
}

body.landing-3d .dashpre-chip-paused {
  border-color: rgba(222, 238, 230, 0.18);
  color: rgba(222, 238, 230, 0.6);
}

body.landing-3d .dashpre-mcopy small {
  overflow: hidden;
  color: rgba(222, 238, 230, 0.66);
  font-family: var(--depth-mono);
  font-size: 9.5px;
  white-space: nowrap;
}

body.landing-3d .dashpre-mbtn {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid rgba(222, 238, 230, 0.22);
  border-radius: 5px;
  color: rgba(238, 244, 255, 0.82);
  font-family: var(--depth-mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.landing-3d .dashpre-mbtn-pause {
  border-color: rgba(221, 110, 110, 0.24);
  color: rgba(235, 150, 150, 0.72);
}

/* Trade Alerts card — the tour's alert table: column heads, coin marks,
   received time, direction tag, timeframe. */
body.landing-3d .dashpre-alerthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 48px;
  gap: 9px;
  padding: 9px 14px 6px;
  color: rgba(222, 238, 230, 0.58);
  font-family: var(--depth-mono);
  font-size: 7.5px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.landing-3d .dashpre-alerthead span:last-child {
  text-align: right;
}

body.landing-3d .dashpre-alerts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 48px;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
}

body.landing-3d .dashpre-alerts li + li {
  border-top: 1px solid rgba(207, 224, 255, 0.045);
}

/* The first alert is faintly selected — which is why its trade detail is the
   one graphed onto the chart above. */
body.landing-3d .dashpre-alerts li.is-selected {
  background: rgba(35, 209, 139, 0.055);
  box-shadow: inset 2px 0 0 rgba(35, 209, 139, 0.5);
}

body.landing-3d .dashpre-acell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

body.landing-3d .dashpre-acoin {
  flex: 0 0 auto;
  width: 17px;
  aspect-ratio: 1;
}

body.landing-3d .dashpre-acoin svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.landing-3d .dashpre-acopy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.landing-3d .dashpre-acopy strong {
  overflow: hidden;
  color: rgba(238, 244, 255, 0.95);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.landing-3d .dashpre-acopy small {
  overflow: hidden;
  color: rgba(222, 238, 230, 0.6);
  font-size: 8.5px;
  white-space: nowrap;
}

body.landing-3d .dashpre-apill {
  justify-self: start;
  padding: 2px 6px;
  border: 1px solid rgba(35, 209, 139, 0.4);
  border-radius: 4px;
  color: rgba(35, 209, 139, 0.95);
  font-family: var(--depth-mono);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.landing-3d .dashpre-atf {
  justify-self: end;
  color: rgba(222, 238, 230, 0.72);
  font-family: var(--depth-mono);
  font-size: 9.5px;
  white-space: nowrap;
}

/* Chart card — the workspace centerpiece: market header, timeframe toolbar,
   candlestick plot with price scale, and the Chart Info stat strip. */
body.landing-3d .dashpre-chartcard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 146px;
  align-items: stretch;
  border-color: rgba(190, 210, 226, 0.11);
  background: linear-gradient(180deg, #0c1722, #0a141d 52%);
  box-shadow: inset 0 1px 0 rgba(222, 238, 230, 0.05);
}

body.landing-3d .dashpre-chartbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px 9px;
}

body.landing-3d .dashpre-coin {
  flex: 0 0 auto;
  width: 21px;
  aspect-ratio: 1;
}

body.landing-3d .dashpre-coin svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.landing-3d .dashpre-pair {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.landing-3d .dashpre-pair strong {
  color: rgba(238, 244, 255, 0.98);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
}

body.landing-3d .dashpre-pair small {
  color: rgba(222, 238, 230, 0.58);
  font-size: 9.5px;
  line-height: 1.2;
}

body.landing-3d .dashpre-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
  white-space: nowrap;
}

body.landing-3d .dashpre-price strong {
  color: rgba(238, 244, 255, 0.98);
  font-family: var(--depth-mono);
  font-size: 13.5px;
  font-weight: 650;
}

body.landing-3d .dashpre-price b {
  color: rgba(35, 209, 139, 0.95);
  font-family: var(--depth-mono);
  font-size: 10px;
  font-weight: 650;
}

body.landing-3d .dashpre-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px 9px;
  border-bottom: 1px solid rgba(207, 224, 255, 0.06);
}

body.landing-3d .dashpre-tfs {
  display: inline-flex;
  gap: 2px;
  min-width: 0;
}

body.landing-3d .dashpre-tfs > span {
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(222, 238, 230, 0.58);
  font-family: var(--depth-mono);
  font-size: 9.5px;
  line-height: 1.2;
}

body.landing-3d .dashpre-tfs > span.is-active {
  border-color: rgba(35, 209, 139, 0.32);
  background: rgba(35, 209, 139, 0.08);
  color: rgba(35, 209, 139, 0.95);
}

body.landing-3d .dashpre-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.landing-3d .dashpre-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 21px;
  padding: 0 7px;
  border: 1px solid rgba(207, 224, 255, 0.09);
  border-radius: 5px;
  background: rgba(207, 224, 255, 0.02);
  color: rgba(222, 238, 230, 0.58);
  font-size: 8.5px;
  font-weight: 600;
}

body.landing-3d .dashpre-tool.is-active {
  border-color: rgba(35, 209, 139, 0.35);
  background: rgba(35, 209, 139, 0.08);
  color: rgba(35, 209, 139, 0.95);
}

body.landing-3d .dashpre-tool svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The chart is the workspace's dominant surface — let it own the frame. */
body.landing-3d .dashpre-chart {
  position: relative;
  flex: 1 1 auto;
  min-height: 330px;
}

body.landing-3d .dashpre-gridline {
  position: absolute;
  top: var(--y);
  right: 60px;
  left: 0;
  border-top: 1px solid rgba(207, 224, 255, 0.06);
}

body.landing-3d .dashpre-plot {
  position: absolute;
  inset: 10px 64px 8px 10px;
}

body.landing-3d .dashpre-plot svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Candles in the hero chart's calmer, desaturated voice — jade and coral,
   not vivid green/red — so both product charts read as one instrument. */
body.landing-3d .dashpre-candle-up rect {
  fill: rgba(74, 192, 160, 0.92);
}

body.landing-3d .dashpre-candle-dn rect {
  fill: rgba(224, 130, 138, 0.86);
}

body.landing-3d .dashpre-wick-up,
body.landing-3d .dashpre-wick-dn {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body.landing-3d .dashpre-wick-up {
  stroke: rgba(74, 192, 160, 0.64);
}

body.landing-3d .dashpre-wick-dn {
  stroke: rgba(224, 130, 138, 0.58);
}

/* Faint vertical gridlines behind the tape — a real trading grid. */
body.landing-3d .dashpre-vgrid {
  fill: none;
  stroke: rgba(207, 224, 255, 0.05);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* EMA overlay (active in the indicators dock) — a smooth study line lagging
   the price, like the hero chart's moving average. */
body.landing-3d .dashpre-ma {
  fill: none;
  stroke: rgba(120, 176, 230, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Volume histogram rides the plot's bottom band, muted well below the
   candles' voice — present the way it is on the hero chart. */
body.landing-3d .dashpre-vol-up rect {
  fill: rgba(74, 192, 160, 0.3);
}

body.landing-3d .dashpre-vol-dn rect {
  fill: rgba(224, 130, 138, 0.26);
}

/* Session dates along the plot foot, spanning the same width as the plot
   (the 56px price-scale gutter stays clear). */
body.landing-3d .dashpre-times {
  position: absolute;
  right: 64px;
  bottom: 4px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  color: rgba(222, 238, 230, 0.5);
  font-family: var(--depth-mono);
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
}

body.landing-3d .dashpre-times i {
  font-style: normal;
}

body.landing-3d .dashpre-ohlc {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(207, 224, 255, 0.07);
  border-radius: 4px;
  background: rgba(6, 15, 23, 0.88);
  color: rgba(222, 238, 230, 0.64);
  font-family: var(--depth-mono);
  font-size: 8.5px;
  line-height: 1.3;
  white-space: nowrap;
}

body.landing-3d .dashpre-ohlc b {
  color: rgba(238, 244, 255, 0.93);
  font-weight: 600;
}

body.landing-3d .dashpre-ohlc b.is-up {
  color: rgba(35, 209, 139, 0.95);
}

/* Price scale gutter: axis labels, plus the live price line and tag. */
body.landing-3d .dashpre-axis {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  border-left: 1px solid rgba(207, 224, 255, 0.05);
}

body.landing-3d .dashpre-axis i {
  position: absolute;
  top: var(--y);
  right: 8px;
  transform: translateY(-50%);
  color: rgba(222, 238, 230, 0.6);
  font-family: var(--depth-mono);
  font-size: 9px;
  font-style: normal;
  line-height: 1;
}

body.landing-3d .dashpre-priceline {
  position: absolute;
  top: var(--y);
  right: 60px;
  left: 0;
  border-top: 1px dotted rgba(238, 244, 255, 0.3);
}

body.landing-3d .dashpre-pricetag {
  position: absolute;
  top: var(--y);
  right: 4px;
  transform: translateY(-50%);
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(35, 209, 139, 0.92);
  color: #05231a;
  font-family: var(--depth-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.2;
}

/* The selected BTC/USD Long alert, graphed on the chart the way the hero
   animation draws a found trade: dashed entry/target/stop levels with small
   pill labels. */
body.landing-3d .dashpre-tlevel {
  position: absolute;
  top: var(--y);
  right: 60px;
  left: 0;
  height: 0;
  border-top: 1px dashed var(--tc);
  pointer-events: none;
}

body.landing-3d .dashpre-tlevel b {
  position: absolute;
  top: 0;
  left: 6px;
  transform: translateY(-50%);
  padding: 1.5px 5px;
  border-radius: 3px;
  background: rgba(7, 15, 23, 0.92);
  color: var(--tc);
  font-family: var(--depth-mono);
  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

body.landing-3d .dashpre-tlevel-entry b {
  color: rgba(214, 232, 245, 0.95);
}

body.landing-3d .dashpre-tlevel-entry i {
  position: absolute;
  top: 0;
  left: 108px;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tc);
  box-shadow: 0 0 0 2px rgba(7, 15, 23, 0.85);
}

body.landing-3d .dashpre-tlevel-target { --tc: rgba(74, 192, 160, 0.85); }
body.landing-3d .dashpre-tlevel-entry { --tc: rgba(125, 180, 235, 0.9); }
body.landing-3d .dashpre-tlevel-stop { --tc: rgba(230, 172, 92, 0.82); }

/* Target label sits at the line's right end so it never collides with the
   OHLC readout at the chart's top-left. */
body.landing-3d .dashpre-tlevel-target b {
  left: auto;
  right: 6px;
}

/* Chart Info stat strip — the real dashboard's stats row, cropped to four. */
body.landing-3d .dashpre-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(207, 224, 255, 0.06);
}

body.landing-3d .dashpre-stats > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 14px 12px;
}

body.landing-3d .dashpre-stats > span + span {
  border-left: 1px solid rgba(207, 224, 255, 0.05);
}

body.landing-3d .dashpre-stats small {
  overflow: hidden;
  color: rgba(222, 238, 230, 0.62);
  font-family: var(--depth-mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.landing-3d .dashpre-stats b {
  color: rgba(238, 244, 255, 0.95);
  font-family: var(--depth-mono);
  font-size: 11.5px;
  font-weight: 650;
}

body.landing-3d .dashpre-stats b.is-bullish {
  color: rgba(35, 209, 139, 0.95);
}

/* Capability matrix — six quiet cards beneath the preview. Each capability
   sits on a whisper of surface inside a faint hairline border so every cell
   reads as intentionally placed, never text laid on a bare grid. A premium
   capability matrix, not chunky boxes. */
body.landing-3d .feature-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Equal rows so one-line and two-line descriptions share a card height. */
  grid-auto-rows: 1fr;
  gap: clamp(10px, 1vw, 14px);
  width: min(100%, var(--container-dashboard));
  /* Pulled up so the preview and its capabilities read as one composition
     rather than two blocks separated by empty space. */
  margin-top: clamp(30px, 2.8vw, 40px);
}

body.landing-3d .feature-matrix-item {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-content: center;
  column-gap: 13px;
  min-width: 0;
  min-height: clamp(106px, 9vw, 120px);
  padding: clamp(22px, 2.3vw, 28px) clamp(22px, 2.4vw, 30px);
  /* Dark glass, softened: a faint top-lit surface inside a barely-there cool
     hairline with a whisper of inner highlight — present, never boxy. */
  border: 1px solid rgba(160, 190, 225, 0.065);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022);
  text-align: left;
  cursor: default;
  transition: border-color 140ms ease;
}

/* Ambient pointer response only: the hairline clarifies by a few alpha points.
   No lift, fill shift, icon brightening, or title emphasis — these are
   informational capability cells, not buttons. */
@media (hover: hover) and (pointer: fine) {
  body.landing-3d .feature-matrix-item:hover {
    border-color: rgba(160, 190, 225, 0.085);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-3d .feature-matrix-item {
    transition: none;
  }
}

/* Every capability icon carries the brand green — a fully green matrix. */
body.landing-3d .feature-matrix-icon {
  display: grid;
  place-items: center;
  align-self: center;
  width: 21px;
  aspect-ratio: 1;
  color: rgba(35, 209, 139, 0.85);
}

body.landing-3d .feature-matrix-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.landing-3d .feature-matrix-icon svg * {
  vector-effect: non-scaling-stroke;
}

body.landing-3d .feature-matrix-item h3 {
  align-self: center;
  margin: 0;
  /* Off-white titles keep green as an accent (the icons), not the dominant
     colour across every card — more premium, less neon. */
  color: rgba(232, 240, 248, 0.9);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

body.landing-3d .feature-matrix-item p {
  grid-column: 2;
  margin: 7px 0 0;
  color: rgba(205, 220, 230, 0.66);
  font-size: 0.85rem;
  line-height: 1.56;
  text-wrap: pretty;
}

/* Trade Alerts reads the same as the other capabilities — no featured frame. */

/* ---- Mini dashboard portal ---------------------------------------------
   A compact but detailed tile evoking the workspace — a header ticker with a
   live quote, a nav rail, a charted market with gridlines and a marked last
   price, and a column of stat tiles. The whole anchor links to the Tour
   Dashboard; the window is the affordance and the green caption confirms it. */
body.landing-3d .dash-portal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  border-radius: 16px;
  text-decoration: none;
  outline: none;
}

/* The window — a premium preview tile, not a placeholder icon. Wider than
   before, a glass surface (top-lit sheen over the product gradient), a hairline
   inner highlight, and a deep grounded shadow carrying a whisper of brand
   light give it real dimension. */
body.landing-3d .dash-portal-window {
  position: relative;
  display: block;
  width: min(360px, 84vw);
  padding: 12px;
  border: 1px solid var(--card-product-line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0) 42%),
    var(--card-product-bg);
  /* Stronger glass depth, no brand glow: a firmer top highlight, a grounded
     contact shadow, and a deeper ambient — a real product surface. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.3),
    0 26px 62px rgba(0, 0, 0, 0.46);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 240ms ease, box-shadow 240ms ease;
}

/* Soft pedestal light so the tile sits in an atmosphere instead of flat on the
   section — a quiet pool of page-dark with a hint of brand behind it. */
body.landing-3d .dash-portal-window::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16% -11% -22%;
  /* A quiet navy depth pool — no green haze behind the tile. */
  background: radial-gradient(ellipse 72% 64% at 50% 54%, rgba(52, 82, 120, 0.055), rgba(6, 12, 22, 0.5) 46%, transparent 74%);
  pointer-events: none;
}

/* Header strip: instrument identity (coin + pair + timeframe) left, live quote
   with change right — the chrome of a real trading screen. */
body.landing-3d .dash-portal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 1px 9px;
  border-bottom: 1px solid rgba(150, 190, 220, 0.09);
}

body.landing-3d .dash-portal-id {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body.landing-3d .dash-portal-coin {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f9a838, #e8850f);
}

body.landing-3d .dash-portal-id b {
  color: rgba(238, 244, 255, 0.9);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

body.landing-3d .dash-portal-id em {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(200, 220, 235, 0.08);
  color: rgba(222, 238, 230, 0.5);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 600;
}

body.landing-3d .dash-portal-quote {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 5px;
}

body.landing-3d .dash-portal-quote b {
  color: rgba(238, 244, 255, 0.92);
  font-size: 9.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body.landing-3d .dash-portal-quote em {
  color: rgba(35, 209, 139, 0.9);
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
}

/* Rail · chart · stat column — the workspace in miniature. */
body.landing-3d .dash-portal-grid {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 46px;
  gap: 9px;
  height: 104px;
}

body.landing-3d .dash-portal-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Nav items as small rounded buttons; the active one carries the green. */
body.landing-3d .dash-portal-rail i {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(200, 220, 235, 0.07);
}

body.landing-3d .dash-portal-rail i.is-active {
  border-color: rgba(35, 209, 139, 0.4);
  background: rgba(35, 209, 139, 0.16);
}

body.landing-3d .dash-portal-chart {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(150, 190, 220, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

/* Faint horizontal gridlines behind the plot — a real chart grid. */
body.landing-3d .dash-portal-lines {
  position: absolute;
  inset: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

body.landing-3d .dash-portal-lines i {
  height: 1px;
  background: rgba(200, 220, 235, 0.06);
}

body.landing-3d .dash-portal-chart svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

body.landing-3d .dp-area {
  fill: url(#dashPortalFill);
}

body.landing-3d .dp-line {
  fill: none;
  stroke: rgba(45, 214, 150, 0.92);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 240ms ease;
}

/* Latest-point marker — a quiet echo of the hero's trade signal. */
body.landing-3d .dp-dot {
  position: absolute;
  left: 86%;
  top: 25%;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(52, 216, 152, 1);
  /* A refined last-price marker: a dark ring separates it from the line, then
     a whisper of halo. */
  box-shadow: 0 0 0 2px rgba(5, 14, 22, 0.95), 0 0 8px rgba(35, 209, 139, 0.3);
  transform: translate(-50%, -50%);
}

/* The marked last price riding the plot's right edge at the latest point. */
body.landing-3d .dash-portal-tag {
  position: absolute;
  top: 25%;
  right: 4px;
  z-index: 2;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(35, 209, 139, 0.9);
  color: #05140d;
  font-size: 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transform: translateY(-50%);
}

/* Stat tiles — three small cards, each a label line over a value line. */
body.landing-3d .dash-portal-side {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.landing-3d .dash-portal-stat {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid rgba(150, 190, 220, 0.1);
  border-radius: 5px;
  background: rgba(200, 220, 235, 0.05);
}

body.landing-3d .dash-portal-stat i {
  width: 58%;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(200, 220, 235, 0.18);
}

body.landing-3d .dash-portal-stat b {
  width: 80%;
  height: 4px;
  border-radius: 2px;
  background: rgba(200, 220, 235, 0.32);
}

/* The first tile reads positive — its value in the brand green. */
body.landing-3d .dash-portal-stat:first-child b {
  background: rgba(35, 209, 139, 0.55);
}

/* Caption — a button/link hybrid. Since it replaces the big dashboard
   screenshot's CTA, it carries a little more presence: a restrained brand-green
   pill (soft fill, hairline border), never a loud solid button. */
body.landing-3d .dash-portal-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  /* A premium, deliberate secondary CTA: a more present border and higher
     text contrast so it reads clearly clickable — still restrained green, never
     a primary button. */
  border: 1px solid rgba(35, 209, 139, 0.38);
  border-radius: 999px;
  background: rgba(35, 209, 139, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(126, 230, 184, 0.98);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease,
              border-color 200ms ease;
}

body.landing-3d .dash-portal-label svg {
  flex: 0 0 auto;
  transition: transform 200ms ease;
}

/* Hover / focus: the window lifts, its border and chart brighten, and the
   caption's arrow nudges — one coordinated response, no glow. */
body.landing-3d .dash-portal:hover .dash-portal-window,
body.landing-3d .dash-portal:focus-visible .dash-portal-window {
  transform: translateY(-3px);
  border-color: var(--card-product-line-strong);
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.42);
}

body.landing-3d .dash-portal:hover .dp-line,
body.landing-3d .dash-portal:focus-visible .dp-line {
  stroke: rgba(45, 216, 150, 1);
}

body.landing-3d .dash-portal:hover .dash-portal-label,
body.landing-3d .dash-portal:focus-visible .dash-portal-label {
  border-color: rgba(35, 209, 139, 0.55);
  background: rgba(35, 209, 139, 0.15);
  color: rgba(150, 236, 198, 1);
}

body.landing-3d .dash-portal:hover .dash-portal-label svg,
body.landing-3d .dash-portal:focus-visible .dash-portal-label svg {
  transform: translateX(3px);
}

body.landing-3d .dash-portal:focus-visible {
  outline: 1px solid rgba(35, 209, 139, 0.5);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  body.landing-3d .dash-portal-window,
  body.landing-3d .dash-portal-label svg {
    transition: border-color 240ms ease, box-shadow 240ms ease;
  }
  body.landing-3d .dash-portal:hover .dash-portal-window,
  body.landing-3d .dash-portal:focus-visible .dash-portal-window {
    transform: none;
  }
  body.landing-3d .dash-portal:hover .dash-portal-label svg,
  body.landing-3d .dash-portal:focus-visible .dash-portal-label svg {
    transform: none;
  }
}

/* ── Command-center split (>=1200px) ──────────────────────────────────────
   The dashboard chapter becomes an asymmetric split: the statement, subtext,
   and preview tile with its CTA anchor the left — kept centered within their
   own track — while the capability matrix reads as the 2×3 specification on
   the right. Below 1200px it falls back to the centered stack. */
@media (min-width: 1200px) {
  body.landing-3d .feature-dashboard {
    /* Split: the command-center lead (~40%) sits left of the wider capability
       grid (~60%), with a generous but controlled gap between them. */
    grid-template-columns: minmax(380px, 0.4fr) minmax(0, 0.6fr);
    align-items: start;
    justify-items: stretch;
    column-gap: clamp(56px, 5.5vw, 80px);
  }

  /* Left column — the lead group (headline, subtext, CTA) is vertically
     centered against the taller capability grid so the two read as balanced,
     centrally-aligned groups. */
  body.landing-3d .feature-dashboard-lead {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  body.landing-3d .feature-dashboard-head .depth-heading {
    /* Section-title scale (inherited from the base) settled into the left
       track — same size/style as the other section headlines. */
    max-width: 16ch;
  }

  /* Right column — the capability matrix as a 2×3 specification. */
  body.landing-3d .feature-matrix {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet-width dashboard: the seven timeframe chips collide with the chart
   tools inside the squeezed toolbar, so crop the longest ones the way a
   narrower product window would (mobile already crops under 700px). */
@media (max-width: 1080px) and (min-width: 701px) {
  body.landing-3d .dashpre-tfs > span:nth-child(3),
  body.landing-3d .dashpre-tfs > span:last-child {
    display: none;
  }
}

@media (max-width: 900px) {
  body.landing-3d .feature-spotlight {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    max-width: 720px;
    margin-inline: auto;
  }

  body.landing-3d .feature-spotlight-copy .depth-heading {
    max-width: 13ch;
  }

  /* The dashboard chapter stacks in reading order — head, preview tile,
     matrix — on the same centered 720px column as the spotlight. */
  body.landing-3d .feature-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    max-width: 720px;
  }

  body.landing-3d .feature-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet: the central panel's market/indicator docks need desktop width to
   breathe. Below it, collapse the panel to the chart alone. */
@media (min-width: 701px) and (max-width: 1140px) {
  body.landing-3d .dashpre-chartcard {
    grid-template-columns: minmax(0, 1fr);
  }

  body.landing-3d .dashpre-markets,
  body.landing-3d .dashpre-indicators {
    display: none;
  }
}

@media (max-width: 700px) {
  body.landing-3d #features {
    padding: var(--mobile-section-space) 0 clamp(48px, 6.5svh, 68px);
  }

  body.landing-3d #dashboard {
    padding: var(--mobile-section-space) 0 clamp(48px, 6.5svh, 68px);
  }

  body.landing-3d .feature-showcase-inner {
    width: calc(100vw - (var(--mobile-page-gutter) * 2));
    max-width: 560px;
  }

  body.landing-3d .feature-spotlight {
    gap: 30px;
    max-width: none;
  }

  /* Phone: the lead reads left-aligned like the How It Works editorial column,
     not centered. */
  body.landing-3d .feature-spotlight-copy {
    text-align: left;
  }

  body.landing-3d .feature-spotlight-copy .depth-tag {
    justify-content: flex-start;
    margin-bottom: 14px;
  }

  /* Wrap like the How It Works headline on mobile — a wider measure so the
     line doesn't break after only two or three words. */
  body.landing-3d .feature-spotlight-copy .depth-heading {
    max-width: 15.75ch;
    margin: 0;
    font-size: clamp(1.92rem, 8.4vw, 2.45rem);
    line-height: 1.04;
    text-align: left;
  }

  body.landing-3d .feature-spotlight-copy .depth-copy {
    margin: 15px 0 0;
    font-size: clamp(0.94rem, 3.85vw, 1.02rem);
    line-height: 1.56;
    text-align: left;
  }

  /* The three annotation claims are dropped on phones — the card speaks for
     itself. */
  body.landing-3d .trade-review-claims {
    display: none;
  }

  body.landing-3d .opportunity-panel-head {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* Only the confidence badge remains in the telemetry row, and it's lifted out
     of flow (below). display:contents drops the meta box itself so it leaves no
     empty gap beneath the instrument identity. */
  body.landing-3d .opportunity-alert-meta {
    display: contents;
  }

  /* "Trade Alert" (with its dot) and the standalone timeframe both leave the
     header on phones. Scoped through the parent to outrank the base
     `.opportunity-alert-meta > span` display. */
  body.landing-3d .opportunity-alert-meta > .opportunity-status,
  body.landing-3d .opportunity-alert-meta > .opportunity-tf {
    display: none;
  }

  /* The direction pill next to the ticker is dropped; the direction + timeframe
     now read as plain text in the instrument sub-line instead. */
  body.landing-3d .opportunity-direction {
    display: none;
  }

  /* Swap the sub-line: drop "· Found by BloqBot Core Strategy", show "· Long ·
     4H" beside "Bitcoin" in the same quiet sub-line typography. */
  body.landing-3d .opportunity-sub-found {
    display: none;
  }

  body.landing-3d .opportunity-sub-signal {
    display: inline;
  }

  /* Confidence becomes a plain-text badge at the header's right edge, vertically
     centered against the instrument identity as a group — no frame or shade,
     with the percentage tucked close to its label. */
  body.landing-3d .opportunity-alert-meta .opportunity-confidence {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    margin-left: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  body.landing-3d .opportunity-alert-meta .opportunity-confidence strong {
    margin-left: -1px;
  }

  body.landing-3d .opportunity-reasoning-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  /* Metric band reflows to a clean 2×2 on phones — Entry · Target on top,
     Stop · Risk/Reward beneath. Zero gap plus per-cell padding lets subtle
     hairlines draw a centered divider cross between the four metrics. */
  body.landing-3d .opportunity-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 16px 16px 18px;
  }

  body.landing-3d .opportunity-levels > div {
    padding: 14px 16px;
  }

  /* Left column sits flush to the band's left edge; right column flush right —
     each carries a 16px gutter toward the centered vertical hairline. */
  body.landing-3d .opportunity-levels > div:nth-child(odd) {
    padding-left: 0;
    /* Clear the base `div + div` left hairline so no stray vertical line runs
       down the left edge of the Stop cell (the left column stays flush). */
    border-left: 0;
  }

  body.landing-3d .opportunity-levels > div:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid rgba(165, 205, 220, 0.08);
  }

  /* Top row is flush to the band top; the bottom row carries the horizontal
     hairline that completes the divider cross. */
  body.landing-3d .opportunity-levels > div:nth-child(1),
  body.landing-3d .opportunity-levels > div:nth-child(2) {
    padding-top: 0;
  }

  body.landing-3d .opportunity-levels > div:nth-child(3),
  body.landing-3d .opportunity-levels > div:nth-child(4) {
    border-top: 1px solid rgba(165, 205, 220, 0.08);
  }

  body.landing-3d .opportunity-levels dd strong {
    font-size: clamp(0.88rem, 3.8vw, 1rem);
  }

  body.landing-3d .opportunity-level-entry dd strong {
    /* On mobile the Entry value matches the other trade-level values exactly —
       same size and weight — rather than leading the band at a larger scale. */
    font-size: clamp(0.88rem, 3.8vw, 1rem);
    font-weight: 720;
  }

  body.landing-3d .opportunity-reasoning li {
    gap: 10px;
    padding: 9px 0;
  }

  body.landing-3d .opportunity-reasoning li p {
    font-size: clamp(0.8rem, 3.4vw, 0.88rem);
    line-height: 1.5;
  }

  body.landing-3d .opportunity-guidance {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.landing-3d .opportunity-panel-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Phone reading order: headline → 2×3 tile grid → "Preview the Dashboard".
     Flattening the lead (display:contents) lifts the headline and the button
     out into the dashboard grid so the button can drop below the matrix via
     `order`; a uniform row-gap spaces the three flattened rows. */
  body.landing-3d .feature-dashboard {
    max-width: none;
    row-gap: clamp(24px, 5.5vw, 32px);
  }

  body.landing-3d .feature-dashboard-lead {
    display: contents;
  }

  /* The button moves below the grid; headline and matrix keep source order. */
  body.landing-3d .dash-portal {
    order: 1;
  }

  /* Spacing is owned by the grid row-gap now, so drop the head/matrix margins
     that would otherwise double up between rows. */
  body.landing-3d .feature-dashboard-head {
    margin-bottom: 0;
  }

  /* Mobile section-title scale, matching How It Works / Features. */
  body.landing-3d .feature-dashboard-head .depth-heading {
    max-width: 13ch;
    font-size: clamp(1.92rem, 8.4vw, 2.45rem);
  }

  /* Cropped mobile preview: the nav rail and monitors card fold away so the
     chart card and trade alerts stay readable at phone widths. */
  body.landing-3d .dashpre {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  body.landing-3d .dashpre-rail,
  body.landing-3d .dashpre-markets,
  body.landing-3d .dashpre-indicators,
  body.landing-3d .dashpre-monitors {
    display: none;
  }

  body.landing-3d .dashpre-chartcard {
    grid-template-columns: minmax(0, 1fr);
  }

  body.landing-3d .dashpre-chart {
    min-height: 168px;
  }

  body.landing-3d .dashpre-axis {
    width: 46px;
  }

  body.landing-3d .dashpre-plot {
    inset: 8px 50px 6px 8px;
  }

  body.landing-3d .dashpre-gridline,
  body.landing-3d .dashpre-priceline {
    right: 46px;
  }

  body.landing-3d .dashpre-times {
    right: 50px;
  }

  /* The seven timeframe chips overflow small phones; crop the longest ones
     like a narrower product window would. */
  body.landing-3d .dashpre-tfs > span:nth-child(2),
  body.landing-3d .dashpre-tfs > span:last-child {
    display: none;
  }

  body.landing-3d .dashpre-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.landing-3d .dashpre-stats > span + span {
    border-left: 0;
  }

  body.landing-3d .dashpre-stats > span:nth-child(even) {
    border-left: 1px solid rgba(207, 224, 255, 0.05);
  }

  body.landing-3d .dashpre-stats > span:nth-child(n + 3) {
    border-top: 1px solid rgba(207, 224, 255, 0.05);
  }

  /* Phone: the six capabilities compress to a 2×3 tile grid — two wide, three
     down — showing just the icon and title. Descriptions drop away. */
  body.landing-3d .feature-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    /* Row spacing to the headline above and the button below is the dashboard
       grid's row-gap now. */
    margin-top: 0;
  }

  /* Each tile stacks its icon over a centered title. */
  body.landing-3d .feature-matrix-item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 10px;
    min-height: 0;
    padding: 20px 14px;
    text-align: center;
  }

  /* Icon + title only — the description is removed on phones. */
  body.landing-3d .feature-matrix-item p {
    display: none;
  }
}

/* Small-phone dashboard toolbar: at <=400px the OHLC legend's right edge
   runs under the last-price tag (measured 13px overlap at 390px), and the
   chip clusters sit shoulder-to-shoulder. Compact the legend clear of the
   tag, let the toolbar wrap as a safety valve, and drop the Area chart-type
   chip (Candles and Line carry the meaning). */
@media (max-width: 400px) {
  body.landing-3d .dashpre-ohlc {
    gap: 5px;
    padding: 3px 6px;
    font-size: 7.5px;
  }

  body.landing-3d .dashpre-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  body.landing-3d .dashpre-tools {
    gap: 6px;
  }

  body.landing-3d .dashpre-tools .dashpre-tool:nth-child(3) {
    display: none;
  }
}

[data-theme="light"] body.landing-3d .feature-matrix-item p {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .feature-matrix-item h3 {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .feature-matrix-icon {
  color: var(--depth-green);
}

/* The quiet cards on light: a faint ink surface inside the ink hairline, so
   every capability still reads as intentionally placed on the pale page. */
[data-theme="light"] body.landing-3d .feature-matrix-item {
  border-color: var(--depth-line);
  background: rgba(16, 28, 24, 0.018);
}

/* Trade Alerts reads the same as the other cards on light too. */

@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] body.landing-3d .feature-matrix-item:hover {
    border-color: rgba(16, 28, 24, 0.105);
  }
}

[data-theme="light"] body.landing-3d .feature-spotlight-copy .depth-copy,
[data-theme="light"] body.landing-3d .opportunity-reasoning li {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .opportunity-panel,
[data-theme="light"] body.landing-3d .opportunity-panel-head,
[data-theme="light"] body.landing-3d .opportunity-reasoning,
[data-theme="light"] body.landing-3d .opportunity-guidance,
[data-theme="light"] body.landing-3d .opportunity-panel-foot {
  border-color: var(--depth-line);
  background: #ffffff;
}

/* The panel's internal hairlines (levels band, alert-meta dividers) are
   near-white in the dark values; on white they must drop to the ink line. */
[data-theme="light"] body.landing-3d .opportunity-levels,
[data-theme="light"] body.landing-3d .opportunity-levels > div + div,
[data-theme="light"] body.landing-3d .opportunity-level-entry {
  border-color: var(--depth-line);
}

[data-theme="light"] body.landing-3d .opportunity-alert-meta > span + span::before {
  background: var(--depth-line);
}

/* The dark theme's inset top-edge light is invisible on white; keep only the
   grounding shadow. */
[data-theme="light"] body.landing-3d .opportunity-panel {
  box-shadow:
    0 20px 42px -22px rgba(16, 28, 24, 0.22),
    0 2px 8px rgba(16, 28, 24, 0.06);
}

[data-theme="light"] body.landing-3d .opportunity-instrument strong,
[data-theme="light"] body.landing-3d .opportunity-alert-meta strong,
[data-theme="light"] body.landing-3d .opportunity-levels dd strong,
[data-theme="light"] body.landing-3d .opportunity-reasoning li strong,
[data-theme="light"] body.landing-3d .opportunity-reasoning-head span:first-child {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .opportunity-alert-meta,
[data-theme="light"] body.landing-3d .opportunity-levels dt,
[data-theme="light"] body.landing-3d .opportunity-levels small,
[data-theme="light"] body.landing-3d .opportunity-reasoning-head,
[data-theme="light"] body.landing-3d .opportunity-panel-foot {
  color: var(--depth-dim);
}

/* The dark theme brightens the strategy name directly on the span, so the
   light theme must override the span too, not just the footer. */
[data-theme="light"] body.landing-3d .opportunity-panel-foot span:first-child {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .opportunity-level-target dd strong,
[data-theme="light"] body.landing-3d .opportunity-level-target small {
  color: var(--depth-green);
}

/* New bright-on-dark voices from the alert panel refresh: status word,
   entry label, generated sentences, and the guidance row. */
[data-theme="light"] body.landing-3d .opportunity-status,
[data-theme="light"] body.landing-3d .opportunity-level-entry dt,
[data-theme="light"] body.landing-3d .opportunity-guidance strong {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .opportunity-instrument-sub,
[data-theme="light"] body.landing-3d .opportunity-reasoning li p,
[data-theme="light"] body.landing-3d .opportunity-guidance p span {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .opportunity-guidance-link {
  color: var(--depth-green);
}

/* The dashboard preview follows the alert panel onto light surfaces: a pale
   page frame holding white cards. The dark theme's inset top-edge light is
   invisible on white; keep only the grounding shadow. */
[data-theme="light"] body.landing-3d .dashpre {
  border-color: var(--depth-line);
  background: #eef1f3;
  box-shadow:
    0 20px 42px -22px rgba(16, 28, 24, 0.22),
    0 2px 8px rgba(16, 28, 24, 0.06);
}

[data-theme="light"] body.landing-3d .dashpre-card {
  border-color: var(--depth-line);
  background: #ffffff;
}

[data-theme="light"] body.landing-3d .dashpre-cardhead,
[data-theme="light"] body.landing-3d .dashpre-create,
[data-theme="light"] body.landing-3d .dashpre-toolbar,
[data-theme="light"] body.landing-3d .dashpre-alerts li + li,
[data-theme="light"] body.landing-3d .dashpre-stats,
[data-theme="light"] body.landing-3d .dashpre-stats > span + span,
[data-theme="light"] body.landing-3d .dashpre-axis,
[data-theme="light"] body.landing-3d .dashpre-gridline {
  border-color: var(--depth-line);
}

[data-theme="light"] body.landing-3d .dashpre-pair strong,
[data-theme="light"] body.landing-3d .dashpre-price strong,
[data-theme="light"] body.landing-3d .dashpre-cardtitle strong,
[data-theme="light"] body.landing-3d .dashpre-create,
[data-theme="light"] body.landing-3d .dashpre-mcopy strong,
[data-theme="light"] body.landing-3d .dashpre-acopy strong,
[data-theme="light"] body.landing-3d .dashpre-mbtn,
[data-theme="light"] body.landing-3d .dashpre-ohlc b,
[data-theme="light"] body.landing-3d .dashpre-stats b {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .dashpre-pair small,
[data-theme="light"] body.landing-3d .dashpre-cardtitle small,
[data-theme="light"] body.landing-3d .dashpre-mcopy small,
[data-theme="light"] body.landing-3d .dashpre-acopy small,
[data-theme="light"] body.landing-3d .dashpre-atf,
[data-theme="light"] body.landing-3d .dashpre-alerthead,
[data-theme="light"] body.landing-3d .dashpre-tfs > span,
[data-theme="light"] body.landing-3d .dashpre-tool,
[data-theme="light"] body.landing-3d .dashpre-ohlc,
[data-theme="light"] body.landing-3d .dashpre-axis i,
[data-theme="light"] body.landing-3d .dashpre-stats small,
[data-theme="light"] body.landing-3d .dashpre-filter {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .dashpre-rail > span {
  color: var(--depth-muted);
}

[data-theme="light"] body.landing-3d .dashpre-rail > span.is-active,
[data-theme="light"] body.landing-3d .dashpre-tfs > span.is-active,
[data-theme="light"] body.landing-3d .dashpre-tool.is-active,
[data-theme="light"] body.landing-3d .dashpre-price b,
[data-theme="light"] body.landing-3d .dashpre-cardtitle strong b,
[data-theme="light"] body.landing-3d .dashpre-create i,
[data-theme="light"] body.landing-3d .dashpre-chip-live,
[data-theme="light"] body.landing-3d .dashpre-apill,
[data-theme="light"] body.landing-3d .dashpre-ohlc b.is-up,
[data-theme="light"] body.landing-3d .dashpre-stats b.is-bullish {
  color: var(--depth-green);
}

[data-theme="light"] body.landing-3d .dashpre-rail > span.is-active,
[data-theme="light"] body.landing-3d .dashpre-tfs > span.is-active,
[data-theme="light"] body.landing-3d .dashpre-tool.is-active {
  border-color: rgba(15, 168, 110, 0.4);
  background: rgba(15, 168, 110, 0.08);
}

[data-theme="light"] body.landing-3d .dashpre-tool {
  border-color: var(--depth-line);
  background: rgba(16, 28, 24, 0.02);
}

[data-theme="light"] body.landing-3d .dashpre-tool.is-active {
  border-color: rgba(15, 168, 110, 0.4);
  background: rgba(15, 168, 110, 0.08);
}

[data-theme="light"] body.landing-3d .dashpre-cardtitle strong b,
[data-theme="light"] body.landing-3d .dashpre-create i {
  background: rgba(15, 168, 110, 0.12);
}

[data-theme="light"] body.landing-3d .dashpre-mdot {
  border-color: rgba(16, 28, 24, 0.3);
}

[data-theme="light"] body.landing-3d .dashpre-monitors li.is-live .dashpre-mdot {
  border-color: rgba(15, 168, 110, 0.5);
  background: var(--depth-green);
  box-shadow: 0 0 0 2px rgba(15, 168, 110, 0.14);
}

[data-theme="light"] body.landing-3d .dashpre-chip-live,
[data-theme="light"] body.landing-3d .dashpre-apill {
  border-color: rgba(15, 168, 110, 0.45);
}

[data-theme="light"] body.landing-3d .dashpre-chip-paused {
  border-color: var(--depth-line);
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .dashpre-mbtn {
  border-color: rgba(16, 28, 24, 0.25);
}

[data-theme="light"] body.landing-3d .dashpre-mbtn-pause {
  border-color: rgba(200, 90, 90, 0.4);
  color: rgba(190, 70, 70, 0.95);
}

[data-theme="light"] body.landing-3d .dashpre-ohlc {
  border-color: var(--depth-line);
  background: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] body.landing-3d .dashpre-candle-up rect {
  fill: var(--depth-green);
}

[data-theme="light"] body.landing-3d .dashpre-candle-dn rect {
  fill: rgba(221, 79, 79, 0.8);
}

[data-theme="light"] body.landing-3d .dashpre-wick-up {
  stroke: rgba(15, 168, 110, 0.6);
}

[data-theme="light"] body.landing-3d .dashpre-wick-dn {
  stroke: rgba(221, 79, 79, 0.55);
}

[data-theme="light"] body.landing-3d .dashpre-vol-up rect {
  fill: rgba(15, 168, 110, 0.3);
}

[data-theme="light"] body.landing-3d .dashpre-vol-dn rect {
  fill: rgba(221, 79, 79, 0.26);
}

[data-theme="light"] body.landing-3d .dashpre-times {
  color: var(--depth-muted);
}

[data-theme="light"] body.landing-3d .dashpre-priceline {
  border-color: rgba(16, 28, 24, 0.35);
}

[data-theme="light"] body.landing-3d .dashpre-pricetag {
  background: var(--depth-green);
  color: #ffffff;
}

@media (max-width: 700px) {
  [data-theme="light"] body.landing-3d .dashpre-stats > span:nth-child(even),
  [data-theme="light"] body.landing-3d .dashpre-stats > span:nth-child(n + 3) {
    border-color: var(--depth-line);
  }
}

/* ── Mini dashboard portal on light ──────────────────────────────────────
   The preview tile follows the alert panel onto light surfaces: a white glass
   card holding ink shapes, so it reads as the same product screen, not a dark
   sticker on the pale page. */
[data-theme="light"] body.landing-3d .dash-portal-window {
  border-color: var(--depth-line);
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 20px 44px -20px rgba(16, 28, 24, 0.24),
    0 2px 8px rgba(16, 28, 24, 0.06);
}

[data-theme="light"] body.landing-3d .dash-portal-window::before {
  background: radial-gradient(ellipse 72% 64% at 50% 54%, rgba(15, 168, 110, 0.06), rgba(16, 28, 24, 0.04) 46%, transparent 74%);
}

[data-theme="light"] body.landing-3d .dash-portal-bar {
  border-bottom-color: var(--depth-line);
}

[data-theme="light"] body.landing-3d .dash-portal-id b,
[data-theme="light"] body.landing-3d .dash-portal-quote b {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .dash-portal-id em {
  background: rgba(16, 28, 24, 0.06);
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .dash-portal-quote em {
  color: var(--depth-green);
}

[data-theme="light"] body.landing-3d .dash-portal-rail i {
  background: rgba(16, 28, 24, 0.06);
}

[data-theme="light"] body.landing-3d .dash-portal-rail i.is-active {
  border-color: rgba(15, 168, 110, 0.4);
  background: rgba(15, 168, 110, 0.14);
}

[data-theme="light"] body.landing-3d .dash-portal-lines i {
  background: rgba(16, 28, 24, 0.05);
}

[data-theme="light"] body.landing-3d .dash-portal-chart {
  border-color: var(--depth-line);
  background: rgba(16, 28, 24, 0.015);
}

[data-theme="light"] body.landing-3d .dp-line,
[data-theme="light"] body.landing-3d .dash-portal:hover .dp-line,
[data-theme="light"] body.landing-3d .dash-portal:focus-visible .dp-line {
  stroke: var(--depth-green);
}

[data-theme="light"] body.landing-3d .dash-portal-stat {
  border-color: var(--depth-line);
  background: rgba(16, 28, 24, 0.02);
}

[data-theme="light"] body.landing-3d .dash-portal-stat i {
  background: rgba(16, 28, 24, 0.16);
}

[data-theme="light"] body.landing-3d .dash-portal-stat b {
  background: rgba(16, 28, 24, 0.28);
}

[data-theme="light"] body.landing-3d .dash-portal-stat:first-child b {
  background: rgba(15, 168, 110, 0.55);
}

[data-theme="light"] body.landing-3d .dash-portal-tag {
  background: var(--depth-green);
  color: #ffffff;
}

/* The CTA pill in the light theme's darker brand green. */
[data-theme="light"] body.landing-3d .dash-portal-label {
  border-color: rgba(15, 168, 110, 0.32);
  background: rgba(15, 168, 110, 0.08);
  color: var(--depth-green);
}

[data-theme="light"] body.landing-3d .dash-portal:hover .dash-portal-label,
[data-theme="light"] body.landing-3d .dash-portal:focus-visible .dash-portal-label {
  border-color: rgba(15, 168, 110, 0.46);
  background: rgba(15, 168, 110, 0.13);
  color: var(--depth-green);
}