/* 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 hidden, IntersectionObserver in
     main.js adds .is-mobile-revealed when they enter the viewport. */
  body.landing-3d .m-reveal {
    opacity: 0;
    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(88px, 10svh, 128px) 0 clamp(56px, 7svh, 88px);
}

/* 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 via IntersectionObserver when the element enters
   the viewport. Delays cascade exactly as before. */
.depth-reveal {
  opacity: 0;
  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;
}

/* Skip rendering off-screen sections entirely. The browser renders each
   section as it approaches the viewport. `auto` in contain-intrinsic-size
   remembers the real size after the first render so the scrollbar doesn't
   jump. This is the single biggest scroll-performance win on a long page. */
body.landing-3d .landing-section:not(.landing-hero-section) {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* 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 {
  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;
}

/* 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-progress,
  body.landing-3d .depth-noise {
    display: none !important;
  }

  /* Mobile keeps the price path wider than the viewport so the movement feels
     continuous without compressing every turn into a narrow screen. */
  body.landing-3d .market-chart-bg {
    display: block !important;
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: min(270vw, 1120px);
    height: 100svh;
    height: var(--mobile-hero-viewport-height, 100dvh);
    min-height: 100svh;
    min-height: var(--mobile-hero-viewport-height, 100dvh);
    opacity: 1;
    transform: translateX(-50%);
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.landing-3d .chart-price-flow {
    opacity: 0.62;
  }

  body.landing-3d .chart-line-main {
    stroke: rgba(35, 209, 139, 0.12);
  }

  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;
    min-height: 100svh;
    padding-top: clamp(116px, 16svh, 150px);
    padding-bottom: clamp(42px, 7svh, 68px);
  }

  /* 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;
    padding-block: clamp(54px, 8svh, 80px);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  body.landing-3d .market-chart-bg {
    display: none !important;
  }
}

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

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

.pricing-mobile-stack {
  display: none;
}

/* Mobile-only savings line under the billing toggle. */
.pricing-savings-note {
  display: none;
}

/* 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;
  }

  /* The measured primary composition owns the full initial viewport, including
     the mobile Market Pulse row anchored to its lower edge. */
  body.landing-3d .landing-hero-section {
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    padding: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  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;
  }

  /* Capture the visible viewport once per orientation. Mobile browser controls
     change `dvh` while scrolling; the measured custom property keeps the hero
     from growing against the gesture. The viewport-unit declarations remain
     as progressive fallbacks before JavaScript initializes. */
  body.landing-3d .depth-hero-primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100svh;
    height: var(--mobile-hero-viewport-height, 100dvh);
    min-height: 100svh;
    min-height: var(--mobile-hero-viewport-height, 100dvh);
    padding:
      calc(clamp(74px, 10svh, 94px) + env(safe-area-inset-top, 0px))
      0
      0;
    box-sizing: border-box;
  }

  /* Center the actual hero message inside the space above the bottom-pinned
     actions. The button group remains outside this centered region. */
  body.landing-3d .depth-hero-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    /* Bias the centered copy slightly downward while the CTA moves upward.
       This shares the reclaimed space above and below the conversion block
       instead of creating one oversized gap on tall phones. */
    translate: 0 clamp(18px, 4.2svh, 36px);
  }

  body.landing-3d .landing-hero-section .depth-kicker {
    order: 1;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(16px, 2.8svh, 22px);
    padding: 5px 10px;
    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(3.06rem, 13vw, 3.9rem);
    letter-spacing: -0.04em;
    line-height: 1;
  }

  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, 2.2svh, 20px);
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.58;
  }

  body.landing-3d .hero-cta-block {
    order: 4;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding-top: clamp(12px, 1.8svh, 18px);
    box-sizing: border-box;
    /* Individual translate composes with the existing reveal transform. The
       fluid offset closes the large tall-phone gap without changing document
       flow or the bottom-anchored ticker. */
    translate: 0 calc(-1 * clamp(44px, 7svh, 60px));
  }

  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 {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 14px 18px;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: center;
    white-space: normal;
  }

  /* 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;
  }

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

  /* 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(20px, 3svh, 28px);
  }

  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;
  }

  body.landing-3d #pricing .pricing-billing-toggle {
    width: 100%;
    margin-bottom: 20px;
  }

  body.landing-3d #pricing .pricing-billing-toggle button {
    min-height: 44px;
    padding: 7px 8px;
    font-size: 0.8rem;
  }

  /* The savings line lives below the toggle on mobile, so the in-toggle
     sub-label is redundant here. */
  body.landing-3d #pricing .pricing-billing-toggle button span {
    display: none;
  }

  body.landing-3d #pricing .depth-pricing-grid {
    display: none !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  body.landing-3d #pricing .pricing-savings-note {
    display: block;
    margin: -6px 0 18px;
    color: var(--depth-green);
    font-size: clamp(0.74rem, 3vw, 0.82rem);
    font-weight: 600;
    text-align: center;
  }

  body.landing-3d #pricing .pricing-mobile-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Simplified card: name + price on one row, a short description, a plain
     "View features" disclosure link, then one full-width CTA. */
  body.landing-3d #pricing .pricing-mobile-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(207, 224, 255, 0.12);
    border-radius: 12px;
    background: rgba(13, 26, 36, 0.82);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2);
    overflow: visible;
    opacity: 1;
    transform: none;
    text-align: left;
  }

  body.landing-3d #pricing .pricing-mobile-card-featured {
    border-color: rgba(35, 209, 139, 0.55);
    background:
      radial-gradient(circle at 88% 0%, rgba(35, 209, 139, 0.16), transparent 42%),
      linear-gradient(150deg, rgba(35, 209, 139, 0.08), rgba(13, 26, 36, 0.9));
  }

  /* Small badge pinned to the card edge so it doesn't add a row of height. */
  body.landing-3d #pricing .pricing-mobile-ribbon {
    position: absolute;
    top: -9px;
    right: 14px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--depth-green);
    color: var(--depth-bg);
    font-family: var(--depth-mono);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
  }

  body.landing-3d #pricing .pricing-mobile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  body.landing-3d #pricing .pricing-mobile-plan {
    margin: 0;
    color: var(--depth-fg);
    font-size: clamp(1.18rem, 5vw, 1.34rem);
    font-weight: 800;
    line-height: 1.1;
  }

  body.landing-3d #pricing .pricing-mobile-price {
    display: flex;
    align-items: baseline;
    gap: 1px;
    flex: 0 0 auto;
    color: var(--depth-fg);
    line-height: 1;
  }

  body.landing-3d #pricing .pricing-mobile-price span {
    font-size: 0.92rem;
    font-weight: 800;
  }

  body.landing-3d #pricing .pricing-mobile-price strong {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
    font-weight: 850;
  }

  body.landing-3d #pricing .pricing-mobile-price em {
    color: rgba(238, 244, 255, 0.56);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 700;
  }

  body.landing-3d #pricing .pricing-mobile-desc {
    margin: 0;
    color: rgba(238, 244, 255, 0.64);
    font-size: clamp(0.82rem, 3.3vw, 0.9rem);
    line-height: 1.4;
  }

  /* "View features" is a plain text link with a chevron — not a button. */
  body.landing-3d #pricing .pricing-mobile-details {
    border: 0;
    background: transparent;
  }

  body.landing-3d #pricing .pricing-mobile-details summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 2px 0;
    color: var(--depth-green);
    cursor: pointer;
    font-size: clamp(0.8rem, 3.2vw, 0.88rem);
    font-weight: 600;
    list-style: none;
  }

  body.landing-3d #pricing .pricing-mobile-details summary::-webkit-details-marker {
    display: none;
  }

  body.landing-3d #pricing .pricing-mobile-details summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
  }

  body.landing-3d #pricing .pricing-mobile-details[open] summary::after {
    transform: translateY(1px) rotate(-135deg);
  }

  body.landing-3d #pricing .pricing-mobile-features {
    display: grid;
    gap: 7px;
    margin: 9px 0 2px;
    padding: 0;
    color: rgba(238, 244, 255, 0.72);
    font-size: clamp(0.83rem, 3.4vw, 0.9rem);
    line-height: 1.4;
    list-style: none;
  }

  body.landing-3d #pricing .pricing-mobile-features li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
  }

  body.landing-3d #pricing .pricing-mobile-features li::before {
    content: "\2713";
    color: var(--depth-green);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.4;
  }

  body.landing-3d #pricing .pricing-mobile-cta {
    width: 100%;
    min-height: 46px;
    margin-top: 2px;
    border-radius: 10px;
    font-size: clamp(0.72rem, 2.9vw, 0.8rem);
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  body.landing-3d #pricing .pricing-card {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: clamp(22px, 6vw, 28px);
  }

  body.landing-3d #pricing .pricing-ribbon {
    margin-bottom: 14px;
  }

  body.landing-3d #pricing .pricing-price {
    margin-top: 12px;
    flex-wrap: wrap;
  }

  body.landing-3d #pricing .price-amount {
    font-size: clamp(3rem, 16vw, 4.4rem);
  }

  body.landing-3d #pricing .pricing-features {
    gap: 10px;
    margin: 24px 0;
  }

  body.landing-3d #pricing .pricing-features li {
    font-size: clamp(0.95rem, 3.8vw, 1.02rem);
    line-height: 1.5;
  }

  /* 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);
    gap: 8px;
  }

  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: 360px;
    margin-top: 28px;
    margin-inline: auto;
  }

  body.landing-3d #access .depth-btn {
    width: 100%;
    min-height: 54px;
    padding-inline: 24px;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    border-radius: 12px;
  }
}

/* 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 #pricing .pricing-mobile-card,
  body.landing-3d #faqs .landing-faq-list {
    text-align: left;
  }
}

/* How It Works: stack the five steps as full-width cards on phones so each
   step is read top to bottom rather than squeezed into narrow columns. */
@media (max-width: 760px) {
  body.landing-3d .how-steps {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    max-width: 460px;
    margin-inline: auto;
  }

  body.landing-3d .how-step {
    height: auto;
    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-step-copy base: clamp(0.92rem, 0.95vw, 1rem) → 14.7px at 390px */
  body.landing-3d .how-step-copy {
    font-size: clamp(0.96rem, 3.9vw, 1.05rem);
    line-height: 1.58;
  }

  /* how-trust base: clamp(0.82rem, 0.86vw, 0.92rem) → 13px at 390px.
     Security copy needs to read clearly — it's a conversion trust signal. */
  body.landing-3d .how-trust {
    font-size: clamp(0.92rem, 3.75vw, 1rem);
    margin-top: clamp(26px, 5vw, 36px);
  }

  /* 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;
  }

  /* ── How It Works: step card padding ────────────────────────────────  */
  body.landing-3d .how-step {
    padding: clamp(16px, 4.5vw, 22px);
  }

  /* ── 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.7rem, 11.5vw, 3.12rem);
  }
}

/* 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);
    --mobile-section-space: clamp(54px, 7.5svh, 72px);
  }

  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;
    margin: clamp(16px, 2.4svh, 20px) 0 0;
    color: rgba(238, 244, 255, 0.58);
    font-size: clamp(0.78rem, 3.25vw, 0.88rem);
    line-height: 1.4;
    text-align: center;
  }

  body.landing-3d .hero-existing-user a {
    margin-left: 0.22em;
    color: var(--depth-fg);
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 209, 139, 0.48);
    transition: color 160ms ease, border-color 160ms ease;
  }

  body.landing-3d .hero-existing-user a:hover,
  body.landing-3d .hero-existing-user a:focus-visible {
    color: var(--depth-green);
    border-color: var(--depth-green);
  }

  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;
    font-size: clamp(3.18rem, 13.6vw, 4.08rem);
    line-height: 1;
    text-align: left;
  }

  body.landing-3d .landing-hero-section .hero-product-copy {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(14px, 2.2svh, 20px);
    margin-right: 0;
    margin-left: 0;
    font-size: clamp(0.96rem, 3.9vw, 1.04rem);
    line-height: 1.58;
    text-align: left;
  }

  body.landing-3d .landing-hero-section .depth-kicker {
    justify-content: flex-start;
    margin-right: 0;
    margin-bottom: clamp(16px, 2.8svh, 22px);
    margin-left: 0;
    padding: 5px 10px;
    text-align: left;
  }

  body.landing-3d .hero-cta-block {
    padding-top: clamp(12px, 1.8svh, 18px);
  }

  /* Market Pulse is the final row of the dynamic hero viewport. Full-bleed
     width and zero bottom margin keep its lower edge aligned with the actual
     visible window rather than an assumed phone height. */
  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;
    flex: 0 0 auto;
    width: 100vw;
    height: calc(clamp(84px, 10.5svh, 92px) + env(safe-area-inset-bottom, 0px));
    min-height: calc(clamp(84px, 10.5svh, 92px) + env(safe-area-inset-bottom, 0px));
    margin-top: clamp(14px, 2svh, 18px);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding:
      9px
      0
      calc(9px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    border-top: 1px solid rgba(35, 209, 139, 0.2);
    background: rgba(6, 17, 22, 0.96);
  }

  /* 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 {
    width: 16px;
  }

  body.landing-3d .mobile-market-pulse .news-item {
    min-height: 42px;
    gap: 7px;
    padding: 7px 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: calc(clamp(64px, 8svh, 78px) + env(safe-area-inset-top, 0px));
  }

  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: 0 calc(-1 * clamp(34px, 7svh, 46px));
  }

  body.landing-3d .depth-hero-primary.is-compact-mobile-hero .depth-hero-content {
    translate: 0 clamp(10px, 2.6svh, 18px);
  }

  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: calc(84px + env(safe-area-inset-bottom, 0px));
    min-height: calc(84px + env(safe-area-inset-bottom, 0px));
    margin-top: 10px;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero {
    padding-top: calc(58px + env(safe-area-inset-top, 0px));
    padding-bottom: 0;
  }

  body.landing-3d .depth-hero-primary.is-tight-mobile-hero .depth-kicker {
    margin-bottom: 8px;
    padding: 5px 9px;
    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: 0 calc(-1 * clamp(12px, 3svh, 16px));
  }

  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: calc(84px + env(safe-area-inset-bottom, 0px));
    min-height: calc(84px + env(safe-area-inset-bottom, 0px));
    margin-top: 8px;
  }

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

  /* 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 .feature-showcase-head,
  body.landing-3d .how-it-works-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;
  }

  /* How It Works uses a compact visual grid on phones. Steps 1-4 form a clear
     left-to-right sequence, while the final action spans the full row. */
  body.landing-3d .how-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
    /* Slightly more breathing room between cards. */
    gap: clamp(12px, 3.2vw, 16px);
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
  }

  /* Vertical card: number badge on its own line above the title, then a short
     description below. Avoids the badge/title sharing a cramped narrow row. */
  body.landing-3d .how-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    height: 100%;
    padding: 17px;
    border: 1px solid rgba(207, 224, 255, 0.12);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(16, 34, 48, 0.74), rgba(9, 24, 33, 0.84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    text-align: left;
  }

  body.landing-3d .how-step:last-child {
    grid-column: 1 / -1;
  }

  body.landing-3d .how-step::before {
    display: block;
  }

  body.landing-3d .how-step-top {
    display: contents;
  }

  body.landing-3d .how-step-num {
    display: grid;
    place-items: center;
    width: clamp(22px, 6vw, 24px);
    aspect-ratio: 1;
    border: 1px solid rgba(35, 209, 139, 0.3);
    border-radius: 50%;
    background: rgba(35, 209, 139, 0.07);
    color: rgba(35, 209, 139, 0.82);
    font-size: clamp(0.56rem, 2.4vw, 0.63rem);
    line-height: 1;
  }

  body.landing-3d .how-step-icon {
    display: none;
  }

  /* Tight gap below the badge so the stack doesn't waste vertical space. */
  body.landing-3d .how-step-title {
    margin: 8px 0 0;
    font-size: clamp(0.92rem, 3.8vw, 1.02rem);
    line-height: 1.2;
  }

  body.landing-3d .how-step-copy {
    margin: 4px 0 0;
    color: rgba(238, 244, 255, 0.66);
    font-size: clamp(0.78rem, 3.15vw, 0.86rem);
    line-height: 1.4;
  }

  body.landing-3d .how-trust {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 24px 0 0;
    padding: 0;
    border-top: 0;
    color: rgba(238, 244, 255, 0.62);
    font-size: clamp(0.84rem, 3.45vw, 0.92rem);
    line-height: 1.5;
    text-align: left;
  }

  body.landing-3d .how-trust-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin: 0;
  }

  body.landing-3d .how-trust-icon svg {
    width: 24px;
    height: 24px;
  }

  /* Compact security callout: bold title line, then the muted reassurance. */
  body.landing-3d .how-trust-title {
    display: block;
    margin-bottom: 2px;
    color: var(--depth-fg);
    font-weight: 700;
  }

  /* Pricing stays vertically stacked on phones. Each card exposes its audience
     and CTA immediately, with optional plan details in a native disclosure. */
  body.landing-3d #pricing .depth-section-head {
    margin-bottom: 20px;
  }

  body.landing-3d #pricing .pricing-billing-toggle {
    margin: 0 0 20px;
  }

  body.landing-3d #pricing .pricing-mobile-stack {
    gap: 12px;
    padding: 0;
  }

  body.landing-3d #pricing .pricing-mobile-card {
    min-height: 0;
    padding: 16px;
    border-radius: 12px;
  }

  /* FAQ questions are divided into three intent-based surfaces so the section
     reads as a short set of choices rather than one uninterrupted support list. */
  body.landing-3d #faqs .depth-section-head {
    margin-bottom: 22px;
  }

  body.landing-3d #faqs .landing-faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 6vw, 30px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.landing-3d #faqs .landing-faq-group {
    display: grid;
    gap: 9px;
    min-width: 0;
  }

  body.landing-3d #faqs .landing-faq-group-title {
    display: block;
    margin: 0;
    color: rgba(238, 244, 255, 0.48);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  body.landing-3d #faqs .landing-faq-items {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(207, 224, 255, 0.11);
    border-radius: 10px;
    background: rgba(13, 26, 36, 0.72);
  }

  body.landing-3d #faqs .landing-faq-item {
    border: 0;
    border-bottom: 1px solid rgba(207, 224, 255, 0.09);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.landing-3d #faqs .landing-faq-item:last-child {
    border-bottom: 0;
  }

  body.landing-3d #faqs .landing-faq-item summary {
    min-height: 48px;
    gap: 12px;
    padding: 11px 14px;
    font-size: clamp(0.84rem, 3.45vw, 0.92rem);
    line-height: 1.3;
  }

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

  body.landing-3d #faqs .landing-faq-item summary svg {
    width: 13px;
    height: 13px;
    stroke: rgba(238, 244, 255, 0.48);
  }

  body.landing-3d #faqs .landing-faq-item[open] summary {
    color: var(--depth-green);
  }

  body.landing-3d #faqs .landing-faq-item[open] summary svg {
    stroke: var(--depth-green);
  }

  body.landing-3d #faqs .landing-faq-answer {
    padding: 0 14px 14px;
    font-size: clamp(0.86rem, 3.45vw, 0.94rem);
    line-height: 1.5;
  }

  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);
  }

  /* Finish with the same compact two-row footer used across public pages. */
  body.landing-3d .site-footer {
    padding: 20px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  }

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

  body.landing-3d .footer-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

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

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

  body.landing-3d .footer-nav a {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 32px;
    padding: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
  }

  body.landing-3d .footer-copy {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    padding: 0;
    border-top: 0;
    font-size: 0.68rem;
    line-height: 1.35;
    text-align: right;
  }

}

/* 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 ~80% 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;
  }
}