/* Landing page mobile styling and responsive overrides. */
/* =====================================================================
   Session 66 — Dedicated mobile landing (≤860px)

   The previous Session 65 attempt tried to flatten the 3D stage and
   stack the desktop scenes. That fought the desktop architecture and
   produced cramped, mis-scaled sections.

   This pass takes the proper approach: index.html now ships TWO
   <main> elements — the existing desktop 3D scene flagged with
   .landing-desktop-only, and a brand-new mobile-only <main
   class="landing-mobile"> with simpler markup (m-* classes). At
   ≤860px we hide the desktop main entirely and show the mobile one,
   styled fresh for the medium. Desktop CSS is untouched.

   The mobile experience intentionally drops several desktop features
   (3D scene transitions, trade radar console preview, feature chart preview,
   dot navigation). The mobile hero now keeps the live Market Pulse visible at
   the bottom of its measured first viewport. The drawer is the primary
   navigation on mobile.
   ===================================================================== */

/* Mobile landing is hidden on desktop. */
.landing-mobile {
  display: none;
}

@media (max-width: 860px) {
  /* --- Document scroll: re-enable normal scrolling on the landing page,
     which body.landing-3d locks to overflow:hidden for the desktop
     fixed-stage experience. --- */
  body.landing-3d {
    --m-page-pad: clamp(22px, 6vw, 28px);
    overflow: visible;
    overflow-x: hidden;
    min-height: auto;
    height: auto;
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* Hide the desktop 3D scene entirely. */
  body.landing-3d .landing-desktop-only {
    display: none !important;
  }

  /* Show the mobile landing. */
  body.landing-3d .landing-mobile {
    display: block;
    color: var(--depth-fg, #eef4ff);
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Restore site footer (hidden by body.landing-3d on desktop). */
  body.landing-3d .site-footer {
    display: block;
  }

  /* Override the desktop landing navbar gradient + clamp padding so
     the slimmed-down mobile navbar in main.css wins. */
  body.landing-3d .navbar {
    background: rgba(6, 17, 22, 0.94);
    border-bottom: 1px solid rgba(207, 224, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
  }

  body.landing-3d .nav-inner {
    padding: 8px 14px;
    min-height: 50px;
  }

  /* Reveal-on-scroll: elements start near-visible (never fully hidden),
     IntersectionObserver in mobile.js adds .is-mobile-revealed once when
     they first enter the viewport and then unobserves. */
  body.landing-3d .m-reveal {
    opacity: 0.01;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  body.landing-3d .m-reveal.is-mobile-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  body.landing-3d .m-section-head.m-reveal {
    opacity: 1;
    transform: none;
  }

  /* ===== Hero ===== */
  .m-hero {
    min-height: 100svh;
    padding: clamp(118px, 15svh, 150px) 0 clamp(28px, 5svh, 48px);
    display: grid;
    grid-template-columns: var(--m-page-pad) minmax(0, 1fr) var(--m-page-pad);
    align-content: start;
    gap: 0;
  }

  .m-hero > * {
    grid-column: 2;
    min-width: 0;
    max-width: calc(100vw - (var(--m-page-pad) * 2));
  }

  .m-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    max-width: calc(100vw - (var(--m-page-pad) * 2));
    margin-bottom: 22px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(35, 209, 139, 0.22);
    background: rgba(35, 209, 139, 0.07);
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(35, 209, 139, 0.92);
  }

  .m-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #23d18b);
    box-shadow: 0 0 0 4px rgba(35, 209, 139, 0.18);
    animation: m-eyebrow-pulse 2.2s ease-in-out infinite;
  }

  @keyframes m-eyebrow-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.4; }
  }

  .m-hero-name {
    margin: 0;
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.05em;
    /* Scaled so "BloqBot" reads as the hero anchor without
       overwhelming the screen. ~58–72px on typical phones. */
    font-size: clamp(3.4rem, 16vw, 4.6rem);
  }

  .m-hero-name span { color: var(--text, #eef4ff); }
  .m-hero-name em {
    color: var(--green, #23d18b);
    font-style: normal;
    text-shadow: 0 0 36px rgba(35, 209, 139, 0.28);
  }

  /* SVG wordmark replaces the inline text on the mobile hero. */
  .m-hero-name img {
    display: block;
    width: clamp(220px, 62vw, 292px);
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 0 20px rgba(35, 209, 139, 0.22));
  }

  .m-hero-slogan {
    margin: 22px 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.55rem, 7vw, 2.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: var(--text, #eef4ff);
    white-space: nowrap;
  }

  .m-hero-copy {
    margin: 12px 0 0;
    width: calc(100vw - (var(--m-page-pad) * 2));
    max-width: calc(100vw - (var(--m-page-pad) * 2));
    overflow-wrap: break-word;
    font-size: clamp(0.98rem, 3.85vw, 1.08rem);
    line-height: 1.62;
    color: rgba(238, 244, 255, 0.74);
  }

  .m-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100vw - (var(--m-page-pad) * 2));
    max-width: calc(100vw - (var(--m-page-pad) * 2));
    min-width: 0;
    margin: 26px 0 0;
  }

  body.landing-3d .nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    min-height: 50px;
  }

  body.landing-3d .nav-burger {
    justify-self: start;
  }

  body.landing-3d .nav-logo {
    justify-self: center;
    align-items: center;
    min-width: 0;
  }

  body.landing-3d .nav-logo-img {
    height: 24px;
  }

  body.landing-3d .nav-center,
  body.landing-3d .nav-right {
    display: none !important;
  }

  /* ===== Universal mobile button ===== */
  .m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
    border: 1px solid transparent;
  }

  .m-hero-actions .m-btn {
    width: 100%;
  }

  .m-btn-primary {
    background: var(--green, #23d18b);
    color: #042514;
  }
  .m-btn-primary:active { transform: scale(0.98); }

  .m-btn-ghost {
    background: transparent;
    border-color: rgba(35, 209, 139, 0.5);
    color: var(--green, #23d18b);
  }
  .m-btn-ghost:active { transform: scale(0.98); }

  .m-btn-full { width: 100%; }

  .m-btn-large {
    padding: 16px 24px;
    font-size: 0.84rem;
  }

  /* ===== Desktop notice ===== */
  .m-desktop-notice {
    margin: clamp(20px, 3svh, 28px) 0 0;
    width: calc(100vw - (var(--m-page-pad) * 2));
    max-width: calc(100vw - (var(--m-page-pad) * 2));
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(18, 184, 121, 0.055));
    border-radius: 14px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  }

  .m-desktop-notice > div {
    min-width: 0;
  }

  .m-notice-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(18, 184, 121, 0.95);
  }

  .m-desktop-notice strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text, #eef4ff);
    margin-bottom: 4px;
  }

  .m-desktop-notice p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(238, 244, 255, 0.68);
  }

  /* ===== Generic section ===== */
  .m-section {
    width: 100vw;
    max-width: 100vw;
    padding: 42px var(--m-page-pad) 32px;
    overflow-x: hidden;
  }

  .m-section-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100vw - (var(--m-page-pad) * 2));
    max-width: calc(100vw - (var(--m-page-pad) * 2));
    margin-bottom: 26px;
  }

  .m-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(35, 209, 139, 0.08);
    color: var(--green, #23d18b);
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .m-h {
    margin: 0;
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--text, #eef4ff);
  }

  .m-h em {
    font-style: normal;
    color: var(--green, #23d18b);
  }

  .m-lead {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.62;
    color: rgba(238, 244, 255, 0.72);
  }

  /* ===== System workflow ===== */
  .m-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .m-flow li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 18px 18px 20px;
    border: 1px solid rgba(238, 244, 255, 0.08);
    background: rgba(13, 26, 36, 0.5);
    border-radius: 16px;
  }

  .m-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(35, 209, 139, 0.1);
    color: var(--green, #23d18b);
    font-family: var(--mono);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .m-flow h3 {
    margin: 0 0 6px;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--text, #eef4ff);
  }

  .m-flow p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(238, 244, 255, 0.66);
  }

  /* ===== Pricing tiers ===== */
  .m-tiers {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .m-tier {
    position: relative;
    padding: 22px 20px 20px;
    border: 1px solid rgba(238, 244, 255, 0.08);
    background: rgba(13, 26, 36, 0.55);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .m-tier-featured {
    border-color: rgba(35, 209, 139, 0.45);
    background: linear-gradient(180deg, rgba(35, 209, 139, 0.06), rgba(13, 26, 36, 0.55));
    box-shadow: 0 18px 50px rgba(35, 209, 139, 0.08);
  }

  .m-tier-ribbon {
    position: absolute;
    top: -10px;
    left: 18px;
    padding: 4px 10px;
    background: var(--green, #23d18b);
    color: #042514;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .m-tier h3 {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(238, 244, 255, 0.6);
  }

  .m-tier-price {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--text, #eef4ff);
  }
  .m-tier-price span { font-size: 1.2rem; font-weight: 600; }
  .m-tier-price strong {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .m-tier-price em {
    font-style: normal;
    font-size: 0.86rem;
    color: rgba(238, 244, 255, 0.6);
    margin-left: 4px;
  }

  .m-tier-yearly {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: rgba(238, 244, 255, 0.55);
  }

  .m-tier ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .m-tier ul li {
    position: relative;
    padding-left: 22px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(238, 244, 255, 0.78);
  }

  .m-tier ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 6px;
    border-left: 2px solid var(--green, #23d18b);
    border-bottom: 2px solid var(--green, #23d18b);
    transform: rotate(-45deg);
  }

  /* ===== CTA section ===== */
  .m-section-cta {
    padding: 56px 22px 72px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .m-cta-h {
    margin: 0;
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--text, #eef4ff);
    max-width: 22ch;
  }

  .m-cta-h em {
    font-style: normal;
    color: var(--green, #23d18b);
  }

  .m-section-cta .m-lead {
    max-width: 32ch;
  }

  .m-section-cta .m-btn {
    margin-top: 8px;
  }
}

/* Honor reduced-motion users on mobile reveals. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  body.landing-3d .m-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .m-eyebrow-dot {
    animation: none;
  }

}

/* =====================================================================
   Scroll landing — replaces the 3D stage/scene system.
   Each section fills (at minimum) the viewport and scrolls normally.
   ===================================================================== */

/* Hide the old mobile-only and desktop-only halves if they exist
   (belt-and-suspenders for any cached template version). */
.landing-desktop-only { display: none !important; }
.landing-mobile        { display: none !important; }

/* The new unified page container */
.landing-page {
  position: relative;
  overflow-x: hidden;
  background: var(--depth-bg);
}

/* Every section fills at least the viewport and centers its content */
.landing-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(100px, 11.5svh, 148px) 0 clamp(72px, 9svh, 112px);
}

/* Hero has no bottom padding — the partners strip sits flush at the base */
.landing-hero-section {
  padding-bottom: 0;
}

/* Re-apply the .depth-inner content width inside scroll sections */
.landing-section .depth-inner {
  position: relative;
  z-index: 3;
  width: min(100% - clamp(34px, 8vw, 160px), 1440px);
  max-height: none;
  overflow: visible;
  /* Landing sections don't use 3D depth transforms — flatten the stacking
     context so the browser doesn't maintain a 3D rendering layer per section. */
  transform-style: flat;
}

/* Hero layout: single column centred on smaller screens, two columns on wide */
.landing-section .depth-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0;
  gap: 0;
}

@media (min-width: 900px) {
  .landing-section .depth-hero-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.8fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
  }
}

/* Scroll-reveal animation — replaces the scene-activated approach.
   JS adds .is-revealed once via IntersectionObserver when the element enters
   the viewport (the observer unobserves after the first reveal, so elements
   never re-hide). The pre-reveal state is near-visible (opacity 0.01) with
   the final layout box already in place — never display:none or
   visibility:hidden — so content stays present for screenshots, crawlers,
   and link previews. */
.depth-reveal {
  opacity: 0.01;
  transform: translateY(20px);
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

.depth-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* NOTE: sections previously used `content-visibility: auto` (with
   contain-intrinsic-size) here as a scroll perf optimization. Removed
   deliberately: it made the browser skip rendering sections once they left
   the viewport, which read as sections "unloading"/blanking during scrolls.
   Sections must stay painted permanently after load. (Per-panel
   `contain: layout paint` in landing.css is unaffected and keeps repaints
   bounded.) Do not reintroduce without accepting that skip-render behavior. */

/* Staggered delays */
.depth-delay-1  { transition-delay: 0.08s; }
.depth-delay-2  { transition-delay: 0.16s; }
.depth-delay-3  { transition-delay: 0.24s; }
.depth-delay-4  { transition-delay: 0.32s; }
.depth-delay-5  { transition-delay: 0.40s; }
.depth-delay-6  { transition-delay: 0.48s; }

/* Progress bar at the top re-purposed as a page scroll progress bar */
.depth-progress,
body.landing-3d #scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
  height: 2px;
  background: var(--depth-green);
  box-shadow: 0 0 10px var(--depth-green), 0 0 28px var(--depth-green-glow);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

@media (min-width: 701px) {
  body.landing-3d .depth-progress,
  body.landing-3d #scroll-progress {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body.landing-3d #scroll-progress {
    display: block;
  }
}

/* Hide custom cursor — not needed for a standard scroll page */
.depth-cursor,
.depth-cursor-ring {
  display: none !important;
}

/* Reduced motion: skip reveal transitions */
@media (prefers-reduced-motion: reduce) {
  .depth-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* On narrow screens, let sections breathe more vertically */
@media (max-width: 700px) {
  .landing-section {
    padding: clamp(80px, 9svh, 110px) 0 clamp(48px, 6svh, 72px);
    min-height: 100svh;
  }
}

/* Current mobile landing markup uses the desktop depth-* elements. These rules
   make that single markup path behave like a purpose-built mobile hero without
   relying on fixed offsets from one monitor or phone size. */
@media (max-width: 700px) {
  body.landing-3d {
    --mobile-page-gutter: clamp(22px, 6vw, 30px);
  }

  body.landing-3d .landing-page {
    background:
      radial-gradient(circle at 68% 0%, rgba(35, 209, 139, 0.12), transparent 34svh),
      linear-gradient(180deg, #071a22 0%, var(--depth-bg) 58%, #07131b 100%);
  }

  body.landing-3d .depth-noise {
    display: none !important;
  }

  body.landing-3d .landing-section .depth-inner {
    width: min(calc(100% - (var(--mobile-page-gutter) * 2)), 560px);
  }

  body.landing-3d .landing-hero-section {
    justify-content: flex-start;
    /* Content-based — the hero must never be sized to the viewport height (see
       .depth-hero-primary). The section grows to fit its content. */
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The hero news strip is desktop-only: the mobile hero is a tall scrolling
     column, so an absolutely-positioned bottom bar would overlap its content. */
  body.landing-3d .landing-hero-section .news-strip {
    display: none;
  }

  body.landing-3d .depth-hero-layout {
    display: block;
    width: 100%;
  }

  body.landing-3d .depth-hero-copy {
    display: grid;
    gap: clamp(14px, 3.8svh, 24px);
    justify-items: stretch;
    text-align: left;
  }

  body.landing-3d .depth-kicker {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    white-space: normal;
  }

  body.landing-3d .depth-hero-name {
    margin: clamp(10px, 2svh, 18px) 0 0;
    line-height: 1;
  }

  body.landing-3d .depth-hero-name img {
    width: clamp(236px, 68vw, 316px);
    max-width: 100%;
    height: auto;
  }

  body.landing-3d .depth-hero-copy::after {
    content: "Trade With Edge.";
    order: 2;
    display: block;
    margin-top: clamp(2px, 1svh, 8px);
    color: var(--depth-fg);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.5rem, 6.8vw, 2.15rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
  }

  body.landing-3d .depth-hero-copy .depth-copy {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1rem, 4.1vw, 1.12rem);
    line-height: 1.62;
  }

  body.landing-3d .depth-actions {
    order: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin: clamp(8px, 2.4svh, 18px) 0 0;
  }

  body.landing-3d .depth-actions .depth-btn {
    width: 100%;
    min-height: 54px;
    justify-content: center;
  }

  /* Non-hero sections size to their content (min-height: auto) with a single
     shared vertical rhythm. Keeping top and bottom equal here prevents the
     doubled-up gap that appeared between Features and Pricing, where two
     large section paddings stacked into ~200px of empty space. */
  body.landing-3d .landing-section:not(.landing-hero-section) {
    min-height: auto;
    /* Width-based, never viewport-height (see --mobile-section-space). */
    padding-block: clamp(54px, 14vw, 80px);
  }
}

@media (max-width: 380px) {
  body.landing-3d {
    --mobile-page-gutter: 20px;
  }

  body.landing-3d .depth-hero-name img {
    width: min(100%, 262px);
  }
}

/* Current mobile hero contract. Keep this block last so it wins over older
   accumulated landing rules while the legacy CSS is still being pruned. */
@media (max-width: 700px) {
  body.landing-3d {
    --mobile-page-gutter: clamp(24px, 7vw, 32px);
  }

  body.landing-3d .landing-page,
  body.landing-3d .landing-section {
    max-width: 100%;
    overflow-x: clip;
    /* Opt out of iOS Safari scroll-anchoring on the landing wrappers. When the
       bottom toolbar collapses/expands the layout viewport resizes; Safari then
       tries to preserve scroll position by re-anchoring, which shifts the stacked
       sections and reads as a jump. Mobile-only; desktop is unaffected. */
    overflow-anchor: none;
  }

  /* CONTENT-DRIVEN hero height (mobile). Previously min-height:100vh (upgraded to
     100svh via the @supports block below). Even though svh is static, a
     full-viewport hero still interacts with iOS scroll-anchoring as the bottom
     toolbar animates, so the hero is now sized purely by its content — no
     viewport-height unit at all. The hero content (eyebrow, headline, copy, chart
     card, CTA, ticker) is already taller than the viewport, so dropping the
     min-height changes nothing visually while removing the last viewport-height
     dependency. Inner padding/gaps are vw/rem-based on .depth-hero-primary.
     Do NOT reintroduce vh/svh/lvh/dvh or a JS innerHeight measurement here. */
  body.landing-3d .landing-hero-section {
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    padding: 0;
    overflow-x: clip;
    overflow-y: visible;
    /* Also opt this section out of scroll-anchoring (belt-and-braces with the
       .landing-page/.landing-section rule above). */
    overflow-anchor: none;
  }

  body.landing-3d .landing-section .depth-inner {
    width: calc(100vw - (var(--mobile-page-gutter) * 2));
    max-width: 560px;
    min-width: 0;
    margin-inline: auto;
  }

  body.landing-3d .depth-hero-layout,
  body.landing-3d .depth-hero-copy {
    width: 100%;
    min-width: 0;
    transform: none !important;
    transform-style: flat;
  }

  body.landing-3d .landing-hero-section .depth-inner,
  body.landing-3d .depth-hero-layout,
  body.landing-3d .depth-hero-copy {
    overflow: visible;
  }

  body.landing-3d .depth-hero-copy {
    display: block;
    text-align: left;
  }

  /* Desktop hero selectors carry enough specificity to keep the badge and
     constrained paragraph left-aligned on wider phones. Re-center the entire
     mobile message on one axis instead of centering each child incidentally. */
  body.landing-3d .landing-hero-section .depth-hero-copy,
  body.landing-3d .landing-hero-section .depth-hero-content,
  body.landing-3d .landing-hero-section .hero-cta-block {
    text-align: center;
  }

  /* CONTENT-BASED sizing — the mobile hero must NOT depend on viewport height in
     any form (no vh/svh/lvh/dvh, no JS-measured height). On iOS Safari the
     visual viewport changes as the address/toolbars collapse and expand while
     scrolling; any viewport-height sizing makes the hero grow/shrink and smoosh
     the chart mid-gesture. Instead the hero is exactly as tall as its content,
     with explicit padding and width-derived gaps, so scrolling never resizes it.
     `display:flex` here is only to reorder children via `order`; there is no
     flex-grow distribution and no justify-content: space-between. */
  body.landing-3d .depth-hero-primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    height: auto;
    /* Explicit top/bottom padding, vw-based only. env(safe-area-inset-top) was
       REMOVED here: on iOS Safari that inset flips between ~0 and the notch height
       as the top address bar collapses during scroll, which grew this in-flow hero
       and shoved every section below it — the "toolbar jump". The clamp alone
       clears the fixed navbar with room to spare (and the fixed navbar already
       covers the notch). Never put env(safe-area-inset-*) on an in-flow element
       whose height feeds the page height. */
    /* Top padding gives the eyebrow a roomier intro below the fixed navbar.
       Bottom padding is 0 so the full-bleed Market Pulse strip (the last child)
       sits flush against the very bottom of the hero section. */
    padding:
      clamp(80px, 21vw, 102px)
      0
      0;
    box-sizing: border-box;
  }

  /* The copy packs at the top in normal flow; no flex-grow so it can't stretch
     or redistribute when the viewport changes. */
  body.landing-3d .depth-hero-content {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    translate: none;
  }

  body.landing-3d .landing-hero-section .depth-kicker {
    order: 1;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(16px, 4.5vw, 22px);
    padding: 0;
    box-sizing: border-box;
    justify-content: center;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }

  body.landing-3d .depth-hero-headline {
    order: 2;
    max-width: 11.5ch;
    margin: 0;
    font-size: clamp(2.5rem, 10.6vw, 3.2rem);
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  body.landing-3d .depth-hero-headline .hero-headline-accent {
    /* Keep the accent inline so the phrase wraps naturally; never force the
       "With AI" accent onto its own line on mobile. */
    display: inline;
  }

  body.landing-3d .depth-hero-name {
    order: 2;
    margin: 0;
    text-indent: 0;
  }

  body.landing-3d .depth-hero-name img {
    width: min(90%, clamp(252px, 75.6vw, 313px));
    height: auto;
  }

  body.landing-3d .depth-hero-copy::after {
    content: none;
    display: none;
  }

  body.landing-3d .depth-slogan {
    order: 3;
    display: block;
    margin: clamp(18px, 3svh, 26px) 0 clamp(8px, 1.4svh, 12px);
    max-width: 100%;
    color: var(--depth-fg);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.19rem, 5.22vw, 1.53rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: normal;
  }

  body.landing-3d .depth-hero-copy .depth-copy {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(0.95rem, 3.8vw, 1.06rem);
    line-height: 1.58;
    overflow-wrap: break-word;
  }

  body.landing-3d .landing-hero-section .hero-product-copy {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(14px, 3.6vw, 20px);
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.58;
  }

  /* Order: copy (1) → product card (2) → CTA/login (3) → ticker (5). Everything
     is in normal document flow; the CTA sits directly under the graphic. */
  body.landing-3d .hero-cta-block {
    order: 3;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    /* Card → CTA gap (vw, never vh) so it never shifts on Safari toolbar change.
       NOTE: the effective value is set by the later `.hero-cta-block` rule below. */
    padding-top: clamp(16px, 4.4vw, 22px);
    box-sizing: border-box;
    translate: none;
  }

  /* Compact chart card region. Fixed, WIDTH-derived height (vw) — never viewport
     height — so the card keeps the same size while the iOS Safari address/tool
     bars collapse and expand during vertical scroll (vw only changes on
     rotation). Normal document flow, no flex-grow. */
  body.landing-3d .hero-mobile-visual {
    order: 2;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    flex: 0 0 auto;
    /* Chart card height. The card fills this box 1:1 (no scale transform), so
       this IS the rendered height — ~188px at 390px. */
    height: clamp(174px, 48.2vw, 223px);
    /* Gap above the chart card is kept equal to the chart→CTA gap below it
       (.hero-cta-block padding-top) so the product-preview zone sits with even
       spacing on both sides. */
    margin-top: clamp(26px, 6.6vw, 34px);
  }

  body.landing-3d .hero-cta-block .depth-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  body.landing-3d .hero-cta-block .depth-actions .depth-btn {
    /* Full width of the actions column — shares the same left/right edges as the
       chart card above and the hero text (eyebrow, headline, subtext). */
    width: 100%;
    justify-self: center;
    min-width: 0;
    /* Ultra-premium proportions: a grounded 53px seat (trimmed ~5% from the
       standard 56px landing button) with the same 12px radius. */
    min-height: 53px;
    padding: 14px 20px;
    box-sizing: border-box;
    border-radius: 12px;
    /* Restrained 13.6px label at weight 700 with quiet tracking — refined, not
       shouty. Fixed px, not rem: the landing root font is fluid on mobile, so rem
       here would render several px small. */
    font-size: 13.6px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: normal;
  }

  /* Sleek CTA for the mobile hero — a BloqBot-green wash over the dark surface:
     a green-tinted fill fading down, a green hairline edge, a green inner
     light-catch, and a soft green glow, so it carries the brand hue while
     staying a premium dark button (not a loud solid green). Overrides
     landing-hero.css's !important `.hero-cta-block .depth-btn-primary`. */
  body.landing-3d .hero-cta-block .depth-actions .depth-btn-primary {
    background:
      linear-gradient(180deg, rgba(35, 209, 139, 0.08), rgba(35, 209, 139, 0.02) 58%),
      linear-gradient(180deg, #06171f, #05121b) !important;
    border-color: rgba(35, 209, 139, 0.22) !important;
    border-radius: 12px !important;
    color: rgba(236, 243, 250, 0.95) !important;
    box-shadow:
      0 14px 32px -16px rgba(0, 0, 0, 0.6),
      0 6px 20px -16px rgba(35, 209, 139, 0.22),
      inset 0 1px 0 rgba(35, 209, 139, 0.08) !important;
  }

  body.landing-3d .hero-cta-block .depth-actions .depth-btn-primary:hover {
    background:
      linear-gradient(180deg, rgba(35, 209, 139, 0.12), rgba(35, 209, 139, 0.03) 58%),
      linear-gradient(180deg, #09212c, #07161f) !important;
    border-color: rgba(35, 209, 139, 0.32) !important;
    box-shadow:
      0 18px 40px -16px rgba(0, 0, 0, 0.62),
      0 8px 24px -14px rgba(35, 209, 139, 0.3),
      inset 0 1px 0 rgba(35, 209, 139, 0.12) !important;
  }

  /* Mobile keeps the hero focused on copy and CTAs; the product preview remains
     a desktop-only proof point where there is room for a two-column hero. */
  body.landing-3d .hero-setup-preview {
    display: none;
  }

  /* Pricing cards need natural height on mobile. Desktop flex sizing forces
     each tier to the same short card height, which clips feature lists. */
  /* Pricing matches the shared non-hero top rhythm so the Features → Pricing
     transition is no longer doubled up. A slightly larger bottom keeps the last
     card breathing before the Access/CTA section. */
  body.landing-3d #pricing {
    justify-content: flex-start;
    min-height: auto;
    overflow: visible;
    padding: clamp(48px, 6.5svh, 68px) 0 clamp(54px, 7.5svh, 76px);
  }

  body.landing-3d #pricing .depth-pricing-scene {
    width: calc(100vw - (var(--mobile-page-gutter) * 2));
    max-width: 560px;
    padding-top: 0;
  }

  body.landing-3d #pricing .depth-section-head {
    margin-bottom: clamp(18px, 2.6svh, 24px);
    text-align: center;
  }

  body.landing-3d #pricing .depth-section-head .depth-tag {
    justify-content: center;
  }

  body.landing-3d #pricing .depth-section-head .depth-heading,
  body.landing-3d #pricing .depth-section-head .depth-copy {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  body.landing-3d #pricing .depth-heading {
    font-size: clamp(2.05rem, 8.6vw, 2.7rem);
    line-height: 1.05;
  }

  body.landing-3d #pricing .depth-copy {
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.58;
  }

  /* FAQ is a utility section on mobile, so keep the list close to the intro
     and avoid hiding it behind reveal timing. */
  body.landing-3d #faqs {
    min-height: auto;
    padding: clamp(48px, 6.5svh, 66px) 0 clamp(54px, 7.5svh, 76px);
  }

  body.landing-3d #faqs .depth-faq-scene {
    display: block;
    width: calc(100vw - (var(--mobile-page-gutter) * 2));
    max-width: 560px;
    padding-top: 0;
  }

  body.landing-3d #faqs .depth-section-head {
    margin-bottom: 18px;
  }

  body.landing-3d #faqs .depth-heading {
    font-size: clamp(2.05rem, 8.6vw, 2.7rem);
    line-height: 1.05;
  }

  body.landing-3d #faqs .depth-copy {
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.58;
  }

  body.landing-3d #faqs .landing-faq-list.depth-reveal,
  body.landing-3d #faqs .landing-faq-cta.depth-reveal {
    opacity: 1;
    transform: none;
  }

  body.landing-3d #faqs .landing-faq-list {
    grid-template-columns: minmax(0, 1fr);
    /* One continuous list: item margins own the rhythm, no seam where the
       desktop columns used to meet. */
    gap: 0;
  }

  body.landing-3d #faqs .landing-faq-cta {
    margin-top: 26px;
    padding: 22px 18px;
    gap: 12px;
  }

  body.landing-3d #faqs .landing-faq-item summary {
    min-height: 50px;
    padding-inline: 14px;
    font-size: 0.9rem;
    line-height: 1.25;
  }

  body.landing-3d #faqs .landing-faq-answer {
    padding: 0 14px 14px;
    font-size: 0.86rem;
    line-height: 1.52;
  }

  /* The final invitation is a compact close, not another full mobile page. */
  body.landing-3d #access {
    min-height: auto;
    padding: clamp(50px, 7svh, 70px) 0 clamp(54px, 8svh, 78px);
  }

  body.landing-3d #access .depth-cta-inner {
    width: calc(100vw - (var(--mobile-page-gutter) * 2));
    max-width: 560px;
    transform: none;
  }

  body.landing-3d #access .depth-cta-heading {
    max-width: 13ch;
    font-size: clamp(2.4rem, 9.6vw, 3rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
  }

  body.landing-3d #access .depth-copy {
    max-width: 100%;
    margin-top: 20px;
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.58;
  }

  body.landing-3d #access .depth-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 220px;
    margin-top: 28px;
    margin-inline: auto;
  }

  body.landing-3d #access .depth-btn {
    width: 100%;
    min-height: 54px;
    padding-inline: 24px;
    /* Match the hero CTA's label exactly — larger, confident, tighter tracking
       instead of the small, wide-spaced treatment this button had before. */
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.028em;
    white-space: normal;
    border-radius: 12px;
  }

  /* The flexed CTA column orders actions late (the shared mobile rule sets
     .depth-actions { order: 4 }), which floated the reassurance line above
     the button. The reassurance always closes the section, under the button. */
  body.landing-3d #access .depth-cta-reassurance {
    order: 5;
  }
}

/* Centered composition experiment for small screens. Keep the outer section
   rhythm centered while preserving readable alignment inside utility cards. */
@media (max-width: 700px) {
  /* Equivalent section intros use one mobile hierarchy even when the cards or
     controls below them live in different section-specific stylesheets. */
  body.landing-3d .landing-section .depth-section-head {
    width: 100%;
    max-width: 560px;
    margin-bottom: clamp(28px, 7vw, 38px);
  }

  body.landing-3d .landing-section .depth-section-head .depth-tag {
    margin-bottom: clamp(14px, 4vw, 20px);
  }

  body.landing-3d .landing-section .depth-section-head .depth-heading {
    width: 100%;
    max-width: 22ch;
    font-size: clamp(2.05rem, 8.6vw, 2.7rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
  }

  body.landing-3d .landing-section .depth-section-head .depth-copy {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(16px, 4.5vw, 22px);
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.58;
  }

  body.landing-3d .depth-hero-copy {
    align-items: center;
    text-align: center;
  }

  body.landing-3d .depth-kicker,
  body.landing-3d .depth-tag {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d .depth-hero-name,
  body.landing-3d .depth-hero-headline,
  body.landing-3d .depth-slogan,
  body.landing-3d .depth-copy,
  body.landing-3d .depth-section-head,
  body.landing-3d .depth-cta-inner {
    text-align: center;
  }

  body.landing-3d .depth-hero-name img,
  body.landing-3d .depth-copy,
  body.landing-3d .depth-section-head .depth-copy {
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d .depth-hero-copy .depth-copy {
    max-width: 100%;
  }

  body.landing-3d .depth-actions {
    max-width: 420px;
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d #faqs .landing-faq-list {
    text-align: left;
  }
}

/* =====================================================================
   Mobile marketing & UX optimization
   Readability floors, full-width CTA tap-targets, rhythm polish.
   All changes are mobile-only (≤ 700px) with ≤ 400px refinements.
   ===================================================================== */

@media (max-width: 700px) {

  /* ── Readability: lift text that falls below comfortable reading size ─ */
  /* How It Works mobile type is owned by the landing-journey block below. */
  /* faq answer base: 0.86rem = 13.8px */
  body.landing-3d #faqs .landing-faq-answer {
    font-size: clamp(0.92rem, 3.75vw, 1rem);
  }

  /* ── Section divider lines ────────────────────────────────────────── */
  /* Desktop dividers use left:50% + translateX(-50%) on a 1180px element
     which overhangs narrow viewports. Pin them to the mobile gutter. */
  body.landing-3d .landing-page > .landing-section:not(:first-child)::before {
    width: calc(100% - (var(--mobile-page-gutter) * 2));
    left: var(--mobile-page-gutter);
    transform: none;
  }

  /* ── FAQ conversion panel: proper tap targets ─────────────────────── */
}

/* ── Extra-small screens (≤ 400px) ───────────────────────────────────── */
@media (max-width: 400px) {
  /* Step down hero headline before "Find Your Next Crypto Trade" drops
     to one word per line on sub-370px phones. */
  body.landing-3d .depth-hero-headline {
    font-size: clamp(2.24rem, 9.4vw, 2.56rem);
  }
}

/* Mobile landing journey
   --------------------------------------------------------------------------
   This is the authoritative phone layout. It gives the page one consistent
   reading rhythm: a centered outcome-first hero, left-aligned product sections,
   compact grouped content, and vertically stacked comparisons. Desktop remains
   owned by landing.css and section modules. */

@media (max-width: 700px) {
  body.landing-3d {
    --mobile-page-gutter: clamp(20px, 6.4vw, 28px);
    /* Section top/bottom spacing — the gap between the hero/ticker and How It
       Works (and every mobile section boundary). WIDTH-based (vw), never a
       viewport-height unit: svh/dvh here made the section top shift as the iOS
       Safari toolbar collapsed/expanded during scroll. Values chosen to match
       the previous svh output so the layout looks the same. */
    --mobile-section-space: clamp(48px, 12vw, 64px);
  }

  body.landing-3d .landing-copy-desktop,
  body.landing-3d .landing-mobile-hide {
    display: none;
  }

  body.landing-3d .landing-copy-mobile {
    display: inline;
  }

  body.landing-3d .hero-existing-user {
    display: block;
    /* A quiet footnote under the CTA — not a competing second action. Both the
       prompt and the link are dimmed well below their previous treatment (the
       link was full-white weight-800 with a green underline). Sits just under
       the CTA as one conversion unit (vw gap, never vh). */
    /* Gap above the login line matches the chart→button gap (.hero-cta-block
       padding-top) so the button is evenly spaced from the card above and the
       login line below. */
    margin: clamp(18px, 4.75vw, 27px) 0 0;
    color: rgba(238, 244, 255, 0.4);
    font-size: clamp(0.72rem, 2.95vw, 0.8rem);
    line-height: 1.4;
    text-align: center;
  }

  body.landing-3d .hero-existing-user a {
    margin-left: 0.3em;
    /* Slightly brighter than the prompt so it still reads as the action, but
       lighter weight and no accent underline — subtle, never louder than the
       primary CTA. */
    color: rgba(238, 244, 255, 0.6);
    font-weight: 600;
    letter-spacing: 0.01em;
    /* Subtle underline so it reads as a link — a faint neutral rule set a little
       below the text, not the loud green accent underline it had before. */
    text-decoration: underline;
    text-decoration-color: rgba(238, 244, 255, 0.28);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-bottom: 0;
    transition: color 160ms ease, text-decoration-color 160ms ease;
  }

  body.landing-3d .hero-existing-user a:hover,
  body.landing-3d .hero-existing-user a:focus-visible {
    color: rgba(238, 244, 255, 0.86);
    text-decoration-color: rgba(238, 244, 255, 0.5);
  }

  body.landing-3d .landing-section:not(.landing-hero-section) {
    align-items: stretch;
    padding: var(--mobile-section-space) 0;
    scroll-margin-top: 52px;
  }

  body.landing-3d .landing-section .depth-inner {
    width: min(calc(100% - (var(--mobile-page-gutter) * 2)), 560px);
  }

  /* The mobile hero follows the desktop's left-aligned editorial hierarchy.
     Actions remain full-width and anchored near the bottom of the usable
     viewport by initMobileHeroViewport(). */
  body.landing-3d .landing-hero-section .depth-hero-copy,
  body.landing-3d .landing-hero-section .depth-hero-content,
  body.landing-3d .landing-hero-section .hero-cta-block {
    text-align: left;
  }

  body.landing-3d .landing-hero-section .depth-hero-headline {
    max-width: 12ch;
    margin-inline: 0;
    /* Pre-fit fallback; initHeroHeadlineFit() then sizes the widest line to its
       target ratio (0.61). Stepped down again here to track the smaller fit. */
    font-size: clamp(2.44rem, 10.4vw, 3.15rem);
    line-height: 0.9;
    text-align: left;
  }

  /* Subtext sits under the headline with a comfortable gap; the larger gap below
     it (on .hero-mobile-visual) still separates it from the chart.
     Typography is matched EXACTLY to the Features section subtext
     (.feature-spotlight-copy .depth-copy on mobile): Inter, weight 300, same
     size, line-height, and muted cool-white colour — so the two section intros
     read identically. */
  body.landing-3d .landing-hero-section .hero-product-copy {
    width: 100%;
    /* Full content width — the subtext wraps at the same right edge as the
       headline and the chart card below it, not held short of them.
       text-wrap:balance is intentionally omitted: it equalises line lengths,
       which held the lines well short of this width (wrapping too early). */
    max-width: 100%;
    margin-top: 30px;
    margin-right: 0;
    margin-left: 0;
    color: rgba(210, 225, 235, 0.68);
    font-size: clamp(0.94rem, 3.85vw, 1.02rem);
    font-weight: 300;
    line-height: 1.56;
    letter-spacing: normal;
    text-align: left;
    text-wrap: pretty;
  }

  body.landing-3d .landing-hero-section .depth-kicker {
    justify-content: flex-start;
    margin-right: 0;
    /* Extra room below the eyebrow so it reads as a distinct premium label,
       separated from the headline rather than part of the same lockup. */
    margin-bottom: 30px;
    margin-left: 0;
    padding: 0;
    text-align: left;
    /* Eyebrow dialed down ~10% on mobile (label + dash gap) so the intro lockup
       reads a touch more refined than the desktop 12px kicker. */
    gap: 12.6px;
    font-size: 10.8px;
  }

  /* Match the ~10% shrink on the eyebrow's green dash marker. */
  body.landing-3d .landing-hero-section .depth-kicker .live-dot {
    width: 20px;
  }

  /* The CTA sits under the chart card (order: card → CTA). Gap tightened so the
     button relates to the card above it rather than floating (vw, never vh). This
     is the effective card→CTA gap (overrides the earlier `.hero-cta-block` rule). */
  body.landing-3d .hero-cta-block {
    padding-top: clamp(12px, 3vw, 20px);
  }

  /* Market Pulse is the last row of the hero, in normal document flow (not
     pinned to a viewport bottom). Full-bleed width via width-based units only. */
  body.landing-3d .landing-hero-section .desktop-market-pulse {
    display: none;
  }

  body.landing-3d .landing-hero-section .mobile-market-pulse {
    position: relative;
    inset: auto;
    order: 5;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 100vw;
    /* A clean, slim ticker band with the pills vertically centered. Width-derived
       height (vw), never viewport height. env(safe-area-inset-bottom) REMOVED: it
       flips between ~0 and the home-indicator height as the bottom toolbar hides,
       which resized this in-flow strip and shifted the sections below it. The
       strip sits mid-page (more sections follow), so it needs no inset. */
    height: clamp(48px, 12.8vw, 54px);
    min-height: clamp(48px, 12.8vw, 54px);
    /* A clear gap below the conversion block (Trader Login line) so the strip
       reads as a separate supporting band rather than being jammed against it. */
    margin-top: clamp(42px, 10.5vw, 52px);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: 0;
    box-sizing: border-box;
    /* Restrained neutral hairline instead of a green accent — a quiet market
       band that supports rather than competes with the product card. Softened a
       touch, and the band fades in over its top ~18px so it eases in below the
       conversion block rather than entering as a hard slab. */
    border-top: 1px solid rgba(150, 175, 205, 0.09);
    background: linear-gradient(to bottom, rgba(4, 11, 20, 0), rgba(4, 11, 20, 0.96) 18px);
  }

  /* Mobile needs the market itself, not another heading. Removing the fixed
     label gives the moving ticker pills the full viewport width. */
  body.landing-3d .mobile-market-pulse .news-strip-label {
    display: none;
  }

  body.landing-3d .mobile-market-pulse .news-strip-track {
    --ticker-gap: 9px;
    min-height: 100%;
    padding-left: calc(var(--mobile-page-gutter) + 8px);
  }

  body.landing-3d .mobile-market-pulse .news-strip-overflow::before,
  body.landing-3d .mobile-market-pulse .news-strip-overflow::after {
    /* Wide enough that pills dissolve at the viewport edges instead of
       cutting off mid-glyph. */
    width: 40px;
  }

  body.landing-3d .mobile-market-pulse .news-item {
    min-height: 30px;
    gap: 7px;
    padding: 4px 10px;
    box-sizing: border-box;
    border-radius: 8px;
  }

  body.landing-3d .mobile-market-pulse .pulse-logo {
    width: 18px;
    height: 18px;
  }

  /* Give every ticker value the logo's height and centerline. Explicit line
     boxes prevent prices and percentage changes from sitting a few pixels
     above or below one another across fonts and mobile browsers. */
  body.landing-3d .mobile-market-pulse .pulse-logo,
  body.landing-3d .mobile-market-pulse .pulse-item strong,
  body.landing-3d .mobile-market-pulse .pulse-item .pulse-price,
  body.landing-3d .mobile-market-pulse .pulse-item .pulse-change {
    align-self: center;
  }

  body.landing-3d .mobile-market-pulse .pulse-item strong,
  body.landing-3d .mobile-market-pulse .pulse-item .pulse-price,
  body.landing-3d .mobile-market-pulse .pulse-item .pulse-change {
    display: inline-flex;
    align-items: center;
    height: 18px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  body.landing-3d .mobile-market-pulse .pulse-item strong,
  body.landing-3d .mobile-market-pulse .pulse-item .pulse-change {
    font-size: 0.72rem;
  }

  body.landing-3d .mobile-market-pulse .pulse-item .pulse-price {
    font-size: 0.78rem;
  }

  /* Height-aware density modes respond to the stable measured viewport rather
     than a device-name breakpoint. */
  body.landing-3d .depth-hero-primary.is-compact-mobile-hero {
    padding-top: clamp(64px, 8svh, 78px);
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .depth-kicker {
    margin-bottom: 12px;
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .depth-hero-headline {
    font-size: clamp(2.82rem, 12.24vw, 3.54rem);
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .hero-product-copy {
    margin-top: 10px;
    font-size: clamp(0.88rem, 3.6vw, 0.98rem);
    line-height: 1.48;
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .hero-cta-block {
    padding-top: 10px;
    translate: none;
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .depth-hero-content {
    translate: none;
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .hero-cta-block .depth-actions {
    gap: 8px;
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .hero-cta-block .depth-btn {
    min-height: 48px;
    padding-block: 11px;
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .mobile-market-pulse {
    height: 50px;
    min-height: 50px;
    margin-top: 10px;
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .hero-mobile-visual {
    margin-top: 16px;
    max-height: clamp(210px, 30svh, 246px);
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero {
    padding-top: 58px;
    padding-bottom: 0;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .depth-kicker {
    margin-bottom: 8px;
    padding: 0;
    font-size: 0.64rem;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .depth-hero-headline {
    font-size: clamp(2.58rem, 11.52vw, 3.14rem);
    line-height: 0.99;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .hero-product-copy {
    margin-top: 8px;
    font-size: clamp(0.82rem, 3.4vw, 0.92rem);
    line-height: 1.4;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .hero-cta-block {
    padding-top: 8px;
    translate: none;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .depth-hero-content {
    translate: none;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .hero-cta-block .depth-btn {
    min-height: 44px;
    padding-block: 9px;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .mobile-market-pulse {
    height: 48px;
    min-height: 48px;
    margin-top: 8px;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .hero-existing-user {
    margin-top: 10px;
    font-size: 0.72rem;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .hero-mobile-visual {
    min-height: 104px;
    margin-top: 8px;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .hmv-plot {
    min-height: 88px;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .hero-mobile-visual {
    max-height: 150px;
  }

  /* Product sections switch to left alignment for faster scanning. The hero
     and conversion buttons remain centered where that hierarchy is useful. */
  body.landing-3d .landing-section .depth-section-head,
  body.landing-3d .depth-faq-head {
    width: 100%;
    max-width: none;
    margin: 0 0 clamp(26px, 6.5vw, 34px);
    text-align: left;
  }

  body.landing-3d .landing-section .depth-section-head .depth-tag {
    justify-content: flex-start;
    margin: 0 0 14px;
  }

  body.landing-3d .landing-section .depth-section-head .depth-heading {
    width: 100%;
    max-width: 15ch;
    margin: 0;
    font-size: clamp(2rem, 8.9vw, 2.62rem);
    letter-spacing: -0.04em;
    line-height: 1.04;
    text-align: left;
    text-wrap: balance;
  }

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

  body.landing-3d #how-it-works {
    padding: clamp(44px, 10.5vw, 56px) 0 clamp(46px, 11.2vw, 60px);
    background:
      radial-gradient(ellipse 72% 30% at 50% 100%, rgba(84, 116, 136, 0.035), transparent 70%),
      radial-gradient(ellipse 86% 36% at 50% 0%, rgba(35, 209, 139, 0.028), transparent 72%);
  }

  body.landing-3d #how-it-works .depth-grid-bg {
    opacity: 0.18;
  }

  body.landing-3d .how-it-works-inner {
    /* Same phone width contract as .feature-showcase-inner so the two
       sections share edges on mobile too. */
    width: calc(100vw - (var(--mobile-page-gutter) * 2));
    max-width: 560px;
  }

  body.landing-3d .how-process-shell {
    gap: clamp(17px, 4.7vw, 22px);
  }

  body.landing-3d .how-editorial {
    max-width: none;
  }

  body.landing-3d .how-editorial .depth-tag {
    margin-bottom: 12px;
  }

  body.landing-3d .how-editorial .depth-heading {
    max-width: 15.75ch;
    font-size: clamp(1.92rem, 8.15vw, 2.38rem);
    line-height: 1.02;
    letter-spacing: -0.044em;
  }

  body.landing-3d .how-trust {
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: -2px 0 0;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(207, 222, 232, 0.68);
    font-size: clamp(0.8rem, 3.25vw, 0.86rem);
    font-weight: 470;
    line-height: 1.44;
  }

  body.landing-3d .how-trust-icon {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    margin-top: 0;
    stroke: rgba(35, 209, 139, 0.86);
    stroke-width: 1.65;
    filter: drop-shadow(0 0 10px rgba(35, 209, 139, 0.18));
  }

  body.landing-3d .how-trust strong {
    color: rgba(238, 244, 255, 0.94);
    font-weight: 760;
  }

  /* The How It Works rail intentionally has NO phone-specific styling here: it
     inherits the calm desktop treatment (shared surface, flat 5px green dots,
     quiet mono numerals, hairline seams) and the single-column stack from
     landing.css's `@media (max-width: 960px)` block, so the mobile steps read
     identically to the desktop three-up — just flowing top-to-bottom. Do NOT
     reintroduce a techy variant (glowing dots, vertical accent lines, gradient
     border, backdrop blur) — it broke the match with desktop. */

  /* ── Curated mobile FAQ: swap the desktop two-column list for the mobile
     variant (three titled clusters in one elevated glass panel). Desktop is
     never touched — this switch is width-scoped and id-specific. ─────────── */
  body.landing-3d #faqs .landing-faq-desktop {
    display: none;
  }

  body.landing-3d #faqs .landing-faq-mobile {
    display: block;
  }

  body.landing-3d #faqs .faq-head-dt {
    display: none;
  }

  body.landing-3d #faqs .faq-head-mb {
    display: inline;
  }

  body.landing-3d #faqs .depth-section-head {
    margin-bottom: 22px;
  }

  /* One subtle elevated panel: a touch lighter than the page, hairline
     blue-white border, generous radius, a soft top sheen and a low drop
     shadow. Reads as an expensive SaaS surface, not a stack of cards. */
  body.landing-3d #faqs .landing-faq-panel {
    padding: 4px 18px 6px;
    border: 1px solid rgba(160, 190, 220, 0.14);
    border-radius: 22px;
    background-color: rgba(255, 255, 255, 0.024);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0) 46%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 20px 44px -26px rgba(0, 0, 0, 0.62);
  }

  body.landing-3d #faqs .landing-faq-group {
    display: block;
    min-width: 0;
  }

  /* Small premium cluster label in the BloqBot green, with extra breathing
     room above and below to separate each section. */
  body.landing-3d #faqs .landing-faq-group-title {
    display: block;
    margin: 0;
    padding: 26px 2px 12px;
    color: rgba(35, 209, 139, 0.92);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* First cluster hugs the panel top a little tighter than the labels that
     follow, which open a new section. */
  body.landing-3d #faqs .landing-faq-group:first-child .landing-faq-group-title {
    padding-top: 14px;
  }

  body.landing-3d #faqs .landing-faq-items {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* Thin dividers separate questions inside the panel — no card surfaces. */
  body.landing-3d #faqs .landing-faq-item {
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(170, 198, 230, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.landing-3d #faqs .landing-faq-item summary {
    min-height: 0;
    gap: 14px;
    padding: 15px 2px;
    color: rgba(238, 244, 255, 0.9);
    /* 16px, weight 600 — compact rows that stay easy to scan. */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
  }

  body.landing-3d #faqs .landing-faq-item summary span {
    min-width: 0;
  }

  /* Smaller, quieter chevron. */
  body.landing-3d #faqs .landing-faq-item summary svg {
    width: 12px;
    height: 12px;
    stroke: rgba(238, 244, 255, 0.4);
    stroke-width: 1.7;
  }

  /* Open question stays in strong ink; the chevron carries the accent. */
  body.landing-3d #faqs .landing-faq-item[open] summary {
    color: var(--text-strong);
  }

  body.landing-3d #faqs .landing-faq-item[open] summary svg {
    stroke: rgba(35, 209, 139, 0.82);
  }

  body.landing-3d #faqs .landing-faq-answer {
    padding: 0 2px 20px;
    color: rgba(238, 244, 255, 0.66);
    /* 15–16px, muted, relaxed leading. */
    font-size: clamp(0.9375rem, 3.6vw, 1rem);
    line-height: 1.55;
  }

  body.landing-3d #faqs .landing-faq-cta {
    margin-top: clamp(24px, 6vw, 30px);
    padding: 0;
    border-top: 0;
    text-align: center;
  }

  body.landing-3d #faqs .landing-faq-cta-copy {
    font-size: clamp(0.84rem, 3.45vw, 0.92rem);
  }

  /* Landing footer keeps the full information architecture readable. Fixed
     bottom padding (was `24px + env(safe-area-inset-bottom)`) — the env inset
     changes with the bottom toolbar and, being the last in-flow element, that
     grew the page height mid-scroll (<<PAGE RESIZED>>). 34px is enough to clear
     the home indicator on every device, and stays constant. */
  body.landing-3d .site-footer {
    padding: 36px 0 34px;
  }

  body.landing-3d .footer-inner {
    width: min(calc(100% - (var(--mobile-page-gutter) * 2)), 560px);
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  body.landing-3d .footer-intro {
    display: grid;
    gap: 10px;
  }

  body.landing-3d .footer-wordmark-img {
    width: 104px;
    margin: 0;
  }

  body.landing-3d .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid rgba(207, 224, 255, 0.1);
  }

  body.landing-3d .footer-nav-group {
    display: grid;
    gap: 8px;
  }

  body.landing-3d .footer-nav-group a {
    min-height: 26px;
    padding: 2px 0;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: left;
  }

  body.landing-3d .footer-copy {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(207, 224, 255, 0.1);
    font-size: 0.68rem;
    line-height: 1.35;
    text-align: left;
  }

}

/* Hero headline: lock the line structure on mobile (Find Your / Next Crypto /
   Trade With AI) so the JS fitter scales the font against a fixed layout rather
   than letting the text rewrap into one word per line. Full-width block lines;
   the fitter (initHeroHeadlineFit) then sizes the widest line to ~70% width. */
@media (max-width: 860px) {
  body.landing-3d .landing-hero-section .depth-hero-headline {
    max-width: 100%;
  }

  body.landing-3d .depth-hero-headline .hero-headline-line {
    display: block;
    white-space: nowrap;
  }
}

/* ── Compact mobile product visual ─────────────────────────────────────────
   Phone-only glass card that communicates the product at a glance: calm market
   movement + a single AI trade alert. Reuses the desktop Escapement panel's
   visual language (dark glass, hairline seam, top light-catch, sentence-case
   Inter, #23d18b accent) but is purpose-built and lightweight — a sparse SVG
   candle stream plus one restrained alert pill, no heavy canvas engine and no
   take-profit/stop/price clutter. The `.hero-mobile-visual` region
   flex/order/sizing lives in the primary block above; this styles the card. */
@media (max-width: 700px) {
  body.landing-3d .hmv-card {
    /* Trade-side accent: green for long, red for short (JS toggles .is-short).
       Everything tinted by the current setup reads from these two tokens. */
    --hmv-accent: #2ed69a;
    --hmv-glow: rgba(35, 209, 139, 0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    /* Soft, elegant hairline seam — quieter than the desktop panel and kept low
       so the border reads as refined glass, never a bright outline. */
    border: 1px solid rgba(150, 178, 210, 0.1);
    border-radius: 18px;
    /* Subtle internal glow from the top center over the dark glass body, so the
       card feels lit from within without any neon. Tint follows the setup side. */
    background:
      radial-gradient(130% 88% at 50% -12%, var(--hmv-glow), transparent 58%),
      linear-gradient(180deg, rgba(14, 24, 36, 0.92), rgba(6, 12, 20, 0.95) 60%, rgba(4, 9, 15, 0.96));
    /* Clean, grounded depth — a soft contact shadow plus one broad ambient,
       feathered rather than pooled. */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 20px 48px -12px rgba(0, 0, 0, 0.5),
      0 8px 20px -8px rgba(0, 0, 0, 0.34);
    color: rgba(222, 238, 230, 0.9);
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: left;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body.landing-3d .hmv-card.is-short {
    --hmv-accent: #ef6470;
    --hmv-glow: rgba(239, 100, 112, 0.05);
  }

  /* Top-edge light-catch ring — the lit dimension of expensive dark glass. */
  body.landing-3d .hmv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      180deg,
      rgba(190, 212, 236, 0.19),
      rgba(150, 176, 202, 0.03) 32%,
      transparent 56%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  body.landing-3d .hmv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(140, 162, 184, 0.08);
    background: rgba(6, 12, 19, 0.5);
  }

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

  body.landing-3d .hmv-coin {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

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

  body.landing-3d .hmv-pair {
    color: rgba(222, 238, 230, 0.92);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.15;
  }

  body.landing-3d .hmv-tf {
    color: rgba(222, 238, 230, 0.5);
    font-size: 0.62rem;
    font-weight: 400;
    line-height: 1.15;
  }

  /* Live indicator — seated in the plot's bottom-left corner and kept subtle so
     it supports the signal message rather than competing. A soft dark halo keeps
     it legible over any candle behind it. */
  body.landing-3d .hmv-live {
    position: absolute;
    left: 13px;
    bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(222, 238, 230, 0.46);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(3, 8, 14, 0.9);
    pointer-events: none;
  }

  body.landing-3d .hmv-live i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #23d18b;
    box-shadow: 0 0 6px rgba(35, 209, 139, 0.45);
    animation: hmv-pulse 2.1s ease-in-out infinite;
  }

  /* Trade-lifecycle status — right-aligned in the header, a steady green dot +
     small sentence-case text. No divider. */
  body.landing-3d .hmv-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: rgba(222, 238, 230, 0.74);
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    white-space: nowrap;
  }

  body.landing-3d .hmv-status i {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #23d18b;
    box-shadow: 0 0 6px rgba(35, 209, 139, 0.5);
  }

  body.landing-3d .hmv-plot {
    position: relative;
    /* Fills the card's fixed height (see .hero-mobile-visual); the low min keeps
       the header + stats from being clipped on the smallest phones. */
    flex: 1 1 auto;
    min-height: 82px;
    /* Faint side-tinted underglow — the internal glow reads on the plot too,
       kept very low so it never looks neon. */
    background:
      radial-gradient(90% 130% at 82% 118%, var(--hmv-glow), transparent 62%),
      rgba(4, 9, 15, 0.42);
  }

  /* Edge-only inset shading recesses the plot inside the shell. */
  body.landing-3d .hmv-plot::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow:
      inset 0 10px 18px -14px rgba(0, 0, 0, 0.56),
      inset 0 -10px 18px -14px rgba(0, 0, 0, 0.44);
    pointer-events: none;
  }

  /* Full-plot grid background — spans the whole card (behind the masked price
     chart), with only a soft top feather so it tucks under the header. */
  body.landing-3d .hmv-grid-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask: linear-gradient(to bottom, transparent 0, #000 7%);
            mask: linear-gradient(to bottom, transparent 0, #000 7%);
  }

  /* Barely-there scrolling time axis under every other grid line. */
  body.landing-3d .hmv-grid-svg .hmv-time {
    fill: rgba(154, 182, 214, 0.28);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 6.5px;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
  }

  /* Subtle $ price axis on the right, one per horizontal grid line. */
  body.landing-3d .hmv-grid-svg .hmv-money {
    fill: rgba(154, 182, 214, 0.3);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 6.5px;
    text-anchor: end;
    font-variant-numeric: tabular-nums;
  }

  body.landing-3d .hmv-chart {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Feather the top headroom and only the very left edge, so the line runs all
       the way to the left edge and fades off there. The live dot sits at ~90%;
       the line ends there and the ~10% strip beyond it stays blank "future". */
    -webkit-mask:
      linear-gradient(to bottom, transparent 0, #000 9%),
      linear-gradient(to right, transparent 0, #000 2%);
    -webkit-mask-composite: source-in;
    mask:
      linear-gradient(to bottom, transparent 0, #000 9%),
      linear-gradient(to right, transparent 0, #000 2%);
    mask-composite: intersect;
  }

  /* Candles: green up / red down bodies with dimmer wicks, rendered and
     advanced by initHeroMobileCandles(). Fills are set inline by the script. */
  body.landing-3d .hmv-candles line {
    vector-effect: non-scaling-stroke;
  }

  /* Hold the whole stream slightly back so the candles read as a calm, subtler
     teaser rather than a saturated trading terminal. */
  body.landing-3d .hmv-candles {
    opacity: 0.82;
  }

  /* Subtle expanding-ring "ping" pulsed at the live dot when a target is hit.
     The scale/opacity animation is driven per-hit via the Web Animations API in
     initHeroMobileCandles(); these are just the resting styles (transform-box +
     origin so the WAAPI scale grows from the dot's centre). */
  body.landing-3d .hmv-ping {
    stroke: rgba(46, 214, 154, 0.7);
    stroke-width: 1.2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }

  /* Signal message — the trade side + confidence as a single clean line at the
     top-left of the plot, just under the header. No box, frame, or backing wash;
     a text-shadow keeps it legible over the candles. */
  body.landing-3d .hmv-signal {
    position: absolute;
    left: 13px;
    top: 10px;
    z-index: 3;
    color: rgba(222, 238, 230, 0.72);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(3, 8, 14, 0.9);
    pointer-events: none;
    opacity: 0;
    /* Fade the whole description in/out (JS toggles .is-shown): in when a setup
       is found, out a little after the realized gain is shown. */
    transition: opacity 480ms ease;
  }

  body.landing-3d .hmv-signal.is-shown {
    opacity: 1;
  }

  /* Status title crossfade + width slide. The label fades/rises out and in on a
     phase change (.hmv-swap), while its box width transitions between the old and
     new label widths — because the status is right-anchored, that width change is
     what glides the green dot smoothly to its new spot instead of snapping it.
     JS (setStatus) pins the widths and sequences the fade/slide/fade. */
  body.landing-3d .hmv-status-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    transition:
      opacity 280ms ease-in-out,
      transform 280ms ease-in-out,
      width 380ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform, width;
  }

  body.landing-3d .hmv-status-text.hmv-swap {
    opacity: 0;
    transform: translateY(-2px);
  }

  /* Side/confidence read — a matching gentle opacity crossfade. */
  body.landing-3d .hmv-signal span {
    transition: opacity 340ms ease-in-out;
  }

  body.landing-3d .hmv-signal span.hmv-swap {
    opacity: 0;
  }

  /* Target price level — a very subtle dashed green hairline occupying the right
     ~30% of the chart, with a dimmed all-caps "TARGET" label just above it toward
     the right. JS sets `top` (the price level); the reveal is choreographed: the
     container (word) fades in (.is-visible), then the line draws itself right→left
     by growing its width (.is-drawn), with a soft faded leading edge (mask). The
     word shares the line's life — both fade in and out together. */
  body.landing-3d .hmv-level {
    position: absolute;
    right: 0;
    width: 30%;
    top: 50%;
    height: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 320ms ease, top 520ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  body.landing-3d .hmv-level.is-visible {
    opacity: 1;
  }

  body.landing-3d .hmv-level-line {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    border-top: 1px dashed rgba(46, 214, 154, 0.32);   /* subtle green target line */
    /* Fade BOTH ends: the trailing (right) end fades out over the right ~24% so it
       never crosses the $ y-axis numbers, and the leading (left) end fades as it
       draws in. Solid only through the middle. */
    -webkit-mask: linear-gradient(to left, transparent 24%, #000 42%, #000 68%, transparent 100%);
            mask: linear-gradient(to left, transparent 24%, #000 42%, #000 68%, transparent 100%);
    transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.landing-3d .hmv-level.is-drawn .hmv-level-line {
    width: 100%;
  }

  /* Level labels — toward the right of the chart but pulled in from the edge so
     they keep a clean gap from the $ y-axis numbers, and sitting on the OUTER side
     of their line. This base rule is the TARGET-LONG case (green, above the line);
     the modifiers below flip the side per entry/target and long/short. Each shares
     its line's life (fades with .is-visible). */
  body.landing-3d .hmv-level-tag {
    position: absolute;
    right: 34px;              /* toward the right, clear of the $ y-axis labels */
    bottom: 3px;              /* long target: just above the line */
    white-space: nowrap;
    font-size: 0.46rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(46, 214, 154, 0.55);
    text-shadow: 0 1px 2px rgba(3, 8, 14, 0.9);
  }

  /* Short target: below its line. */
  body.landing-3d .hmv-level-target.is-short .hmv-level-tag {
    bottom: auto;
    top: 3px;
  }

  /* Entry line — a neutral (not green) twin of the target line, at the entry price.
     Its label sits on the opposite outer side from the target: below the line for a
     long, above for a short. */
  body.landing-3d .hmv-level-entry .hmv-level-line {
    border-top-color: rgba(198, 210, 224, 0.3);
  }
  body.landing-3d .hmv-level-entry .hmv-level-tag {
    bottom: auto;
    top: 3px;                 /* long entry: below the line */
    color: rgba(206, 218, 230, 0.5);
  }
  body.landing-3d .hmv-level-entry.is-short .hmv-level-tag {
    top: auto;
    bottom: 3px;              /* short entry: above the line */
  }

  /* Trade side — identical typography to the confidence read: same neutral
     colour and weight, never bolder or more vivid. */
  body.landing-3d .hmv-dir {
    color: inherit;
    font-weight: inherit;
  }

  @keyframes hmv-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  body.landing-3d .hmv-signal,
  body.landing-3d .hmv-live i {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Show the target line without the plot-in growth. */
  body.landing-3d .hmv-level,
  body.landing-3d .hmv-level-line {
    transition: none !important;
  }
}

/* The site's custom 8px scrollbar (site-core.css ::-webkit-scrollbar) renders a
   hard vertical thumb/handle on the right edge on mobile. Native mobile scroll
   uses overlay bars, so remove the styled page scrollbar here — content still
   scrolls normally, just without the desktop-style handle. */
@media (max-width: 700px) {
  html,
  body.landing-3d {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  body.landing-3d::-webkit-scrollbar,
  body.landing-3d ::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

/* iOS Safari mobile hero — intentionally NO viewport-height upgrade.
   This block previously upgraded the mobile hero to `min-height: 100svh`. That
   was removed: even though svh is static per orientation, a full-viewport hero
   still interacts with iOS scroll-anchoring as the bottom toolbar animates and
   could shift. The hero is now content-driven (min-height:auto, in the ≤700 block
   above) and never depends on the viewport height. Do NOT reintroduce
   svh/vh/lvh/dvh or a JS window.innerHeight measurement on the mobile hero — any
   of them brings the toolbar jump back. Mobile-only; the desktop hero is
   untouched (desktop hero sizing lives in landing.css). */

/* Hero CTAs — clean tap on touch (no flash, no jiggle).
   On a touch device a tap applies :hover before the link navigates, so the hero
   buttons briefly lifted (translateY from landing.css `.depth-btn:hover`) and
   the primary flashed a brighter fill (the :hover rule ~line 1123 above) —
   together reading as a jiggle rather than a clean click. On a no-hover pointer,
   hold the CTAs in their resting state and drop the OS tap-highlight box so a tap
   is just a smooth navigation. A mouse (hover:hover) still gets the lift.
   Scoped to ≤700px so the mirrored resting fill below matches the mobile hero's
   actual resting rule (the desktop hero uses a different fill). */
@media (max-width: 700px) and (hover: none) {
  body.landing-3d .hero-cta-block .depth-actions .depth-btn {
    -webkit-tap-highlight-color: transparent;
  }

  body.landing-3d .hero-cta-block .depth-actions .depth-btn:hover {
    transform: none;
  }

  /* Mirror the resting primary fill (see the .depth-btn-primary rule above) so a
     tap does not flash a brighter background. */
  body.landing-3d .hero-cta-block .depth-actions .depth-btn-primary:hover {
    background:
      linear-gradient(180deg, rgba(35, 209, 139, 0.08), rgba(35, 209, 139, 0.02) 58%),
      linear-gradient(180deg, #06171f, #05121b) !important;
    border-color: rgba(35, 209, 139, 0.22) !important;
    box-shadow:
      0 14px 32px -16px rgba(0, 0, 0, 0.6),
      0 6px 20px -16px rgba(35, 209, 139, 0.22),
      inset 0 1px 0 rgba(35, 209, 139, 0.08) !important;
  }
}