/* Outcome-first landing hero and illustrative trade-setup preview. */
body.landing-3d .landing-hero-section .depth-hero-layout {
  width: min(100% - clamp(48px, 8vw, 128px), 1280px);
  /* Give the value proposition enough measure to carry true hero-scale type
     while keeping the product preview legible as supporting proof. */
  grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.9fr);
  justify-content: center;
  gap: clamp(38px, 4.5vw, 68px);
  padding-top: 0;
  overflow: visible;
}

body.landing-3d .landing-hero-section .depth-hero-copy {
  width: 100%;
  max-width: 760px;
  margin: 0;
  text-align: left;
  transform: none;
}

body.landing-3d .landing-hero-section .depth-kicker {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 0;
}

.depth-hero-headline {
  max-width: 12.5ch;
  margin: 0;
  color: var(--depth-fg);
  /* Match the shared section-headline treatment while retaining a larger
     hero-scale size for the page's primary promise. */
  font-family: 'Inter', system-ui, sans-serif;
  /* The primary promise leads the page while the controlled measure keeps the
     phrase balanced beside the product preview. */
  font-size: clamp(4rem, 5.15vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: var(--landing-section-title-leading);
  /* Balance the single phrase across two even lines rather than a long line
     followed by a short orphan. */
  text-wrap: balance;
}

.depth-hero-headline .hero-headline-accent {
  color: var(--depth-green);
  text-shadow: 0 0 36px rgba(35, 209, 139, 0.14);
}

body.landing-3d .landing-hero-section .hero-product-copy {
  /* Moderate measure (~520–620px) so the supporting line reads cleanly. */
  max-width: 56ch;
  margin: clamp(24px, 3vh, 34px) 0 0;
  color: rgba(238, 244, 255, 0.78);
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.58;
}

.hero-cta-block {
  /* Sits close to the paragraph so the CTAs feel connected, not floating. */
  margin-top: clamp(26px, 3.6vh, 38px);
}

body.landing-3d .landing-hero-section .hero-cta-block .depth-actions {
  justify-content: flex-start;
  margin-top: 0;
}

.hero-setup-preview {
  position: relative;
  justify-self: end;
  /* The focused opportunity card remains secondary to the headline, but gets
     enough width for its analysis and key levels to read at a glance.
     The third term prevents the card from overflowing the viewport vertically:
     derived from the SVG aspect ratio (560/680) so height = width × 1.214
     always fits within 100svh minus section padding (~240px, including the
     small bottom offset reserved for the news strip). */
  width: min(100%, 550px, calc((100svh - 240px) * 560 / 680));
  margin: 0;
  box-sizing: border-box;
  /* The SVG draws its own rounded panel + shadow; don't clip it with an outer
     frame/radius (that produced the dark rectangle around the card). */
  overflow: visible;
}

.hero-setup-preview svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 680;
  /* Inlined, so its text inherits the page's loaded Inter — the same family the
     dashboard uses (--font-sans). Keeps the graphic on-theme rather than falling
     back to a system font as an <img> would. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.landing-3d .landing-hero-section {
  /* Nudge the content upward by adding a small offset to the bottom padding so the
     card clears the news strip with comfortable breathing room. */
  padding-bottom: calc(clamp(80px, 11svh, 130px) + 20px);
}

body.landing-3d .landing-hero-section .market-chart-bg {
  opacity: 0.7;
}

@media (max-width: 1050px) and (min-width: 701px) {
  body.landing-3d .landing-hero-section .depth-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.72fr);
    gap: clamp(28px, 4vw, 44px);
  }

  .depth-hero-headline {
    /* Narrower copy column here (the preview card keeps its min width), so the
       balanced two-line headline needs a smaller scale to stay two lines. */
    max-width: 12ch;
    font-size: clamp(3.35rem, 5.6vw, 4.15rem);
  }

  .hero-setup-preview {
    width: min(100%, 420px);
  }
}

/* Compact desktop still has room for a readable product proof. Give the card a
   wider track here without squeezing the narrow-tablet range below 861px. */
@media (max-width: 1050px) and (min-width: 861px) {
  body.landing-3d .landing-hero-section .depth-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.86fr);
  }

  .hero-setup-preview {
    width: min(100%, 440px);
  }
}