html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  overscroll-behavior-x: none;
}

#wallet-connect-modal {
  display: none !important;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.LandingPage_page__Py6p3,
.LandingPage_main__b5hGS,
.shared_snapSection__WhiUd {
  max-width: 100%;
  overflow-x: hidden;
}

.shared_container__HLW1U {
  box-sizing: border-box;
  width: min(100%, 1280px);
  padding-left: clamp(16px, 5vw, 80px);
  padding-right: clamp(16px, 5vw, 80px);
  padding: 24px 0;
}

@media (min-width: 1025px) {
  #faq.shared_snapSection__WhiUd {
    box-sizing: border-box;
    padding-top: 80px;
  }
}

#wallet-step-setup .iss-wallet-hero {
  margin-top: 14px;
}

#issue-request-button[aria-busy="true"],
#issue-request-button[data-wc-busy="1"],
#connect-button[aria-busy="true"],
#connect-button[data-wc-busy="1"] {
  opacity: 0.72;
  cursor: wait;
}

@media (max-width: 1024px) {
  .shared_snapSection__WhiUd {
    min-height: auto;
    align-items: flex-start;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  #home.shared_snapSection__WhiUd {
    padding-top: 84px;
  }
}

@media (max-width: 640px) {
  .shared_container__HLW1U {
    padding-left: 16px;
    padding-right: 16px;
  }

  .HeroSection_heroInner__GEF1J {
    padding-top: 0;
  }

  .HeroSection_heroInner__GEF1J>div,
  .tw-hero-container {
    width: 100%;
    max-width: 100%;
    gap: 26px !important;
  }

  .HeroSection_title__uuKVE {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(26px, 8.5vw, 36px);
    line-height: 1.04;
  }

  .HeroSection_description__C_8AB,
  .tw-hero-desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .HeroSection_actions___d9Iz,
  .tw-hero-payments,
  .tw-hero-payments__logos {
    max-width: 100%;
  }

  .tw-hero-video,
  .HeroSection_media__aqBSh img {
    width: min(100%, 340px);
    height: auto;
  }

  .tw-wallet-modal.iss-modal {
    padding: 12px;
  }

  .tw-wallet-modal .iss-panel {
    width: min(100%, 430px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .iss-stages {
    gap: 4px;
  }

  .iss-stages__item {
    min-width: 0;
    padding: 7px 6px;
    font-size: 10px;
  }

  .iss-connect-desc {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .shared_container__HLW1U {
    padding-left: 14px;
    padding-right: 14px;
  }

  .iss-stages__item span:last-child {
    display: none;
  }

  .iss-stages__item.is-active span:last-child {
    display: inline;
  }
}


@media (max-width: 768px) {
  .MobileBottomNav_dock__yxhYi {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }

  .MobileBottomNav_nav__rPgXE {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .MobileBottomNav_nav__rPgXE>a,
  .MobileBottomNav_nav__rPgXE>button {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .app-mobile-nav-hidden,
  .MobileBottomNav_nav__rPgXE>[hidden],
  .MobileBottomNav_support__PMoPg {
    display: none !important;
  }

  .app-mobile-nav-active {
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }
}


/* Wallet modal perks: 2-column mobile grid */
@media (max-width: 768px) {
  #wallet-connect-modal .iss-perks {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 14px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #wallet-connect-modal .iss-perks>li {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 0px !important;
    margin: 0 !important;
    padding: 10px 9px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  #wallet-connect-modal .iss-perks>li strong {
    display: block !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #wallet-connect-modal .iss-perks>li small {
    display: block !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}


.LandingPage_page__Py6p3 .HeroSection_media__aqBSh>.tw-hero-float-wrap {
  width: min(100%, 560px);
  max-width: 100%;
}

.LandingPage_page__Py6p3 .HeroSection_media__aqBSh>.tw-hero-float-wrap img.tw-hero-video {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1024px) {
  .LandingPage_page__Py6p3 .HeroSection_media__aqBSh>.tw-hero-float-wrap {
    width: min(80%, 480px);
  }
}

@media (max-width: 640px) {
  .LandingPage_page__Py6p3 .HeroSection_media__aqBSh>.tw-hero-float-wrap {
    width: min(100%, 360px);
  }
}

/* Hero worldwide-delivery banner */
.tw-hero-delivery-banner {
  width: 100%;
  max-width: 420px;
  margin: 0 0 18px;
}

.tw-hero-delivery-banner img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .tw-hero-delivery-banner {
    width: min(100%, 680px);
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .tw-hero-delivery-banner {
    margin-bottom: 16px;
  }
}

/* Worldwide-delivery banner on /cards */
.cards-delivery-banner {
  width: 100%;
  margin: 0 0 14px;
}

.cards-delivery-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Hero arrangement fix (desktop) ───────────────────────────────
   The tall card image (/images/new.png) sat in the right column
   spanning BOTH grid rows (~700px), which stretched the left column
   and pushed the description + button far below the heading. Group
   heading + description + button together and cap the image height. */
@media (min-width: 1025px) {
  .tw-hero-container.shared_container__HLW1U {
    grid-template-rows: auto;
    align-items: center;
  }

  .tw-hero-container .tw-hero-text {
    grid-area: 1 / 1;
  }

  .tw-hero-container .HeroSection_description__C_8AB.tw-hero-desc {
    grid-area: 2 / 1;
  }

  .tw-hero-container .HeroSection_actions___d9Iz {
    grid-area: 3 / 1;
  }

  .tw-hero-container .HeroSection_media__aqBSh {
    grid-area: 1 / 2 / 4;
  }

  .tw-hero-container .HeroSection_media__aqBSh > .tw-hero-float-wrap {
    width: min(100%, 440px);
  }

  .tw-hero-container .HeroSection_media__aqBSh > .tw-hero-float-wrap img {
    max-height: 540px;
    width: auto;
    margin: 0 auto;
  }
}

/* ── Hero card pictures (desktop) ─────────────────────────────────
   Small strip of the two card designs under the CTA, so the hero
   shows the actual cards (mirrors the /cards page). Hidden on mobile
   to keep the stacked layout tight. */
.hero-cards-strip {
  grid-area: 4 / 1;
  display: flex;
  gap: 14px;
  margin-top: 22px;
}

.hero-cards-strip img {
  width: 150px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  object-fit: cover;
}

@media (max-width: 1024px) {
  .hero-cards-strip {
    display: none;
  }
}

/* ── Hero HEADING fix, round 14 (2026-10-07) ──────────────────────
   The heading ships with FORCED <br> breaks ("Get your<br>Trust<br>card
   in few minutes"), which wrap it into 3 ragged, uneven lines on both
   mobile and desktop — the recurring "not well arranged" complaint.
   Hide the breaks so the text flows naturally into balanced lines.
   Markup is untouched (only the <br> is display:none). */
.tw-hero-container .HeroSection_title__uuKVE br {
  display: none;
}

/* Round 15 (2026-10-08): now that the forced <br>s are hidden, let the
   heading wrap into BALANCED lines on every breakpoint (desktop, tablet,
   mobile) instead of leaving a short orphan word on the last line. The
   mobile font-size itself is reduced in the <=640px clamp rule above so
   it reliably fits two lines even on devices with wider system fonts. */
.tw-hero-container .HeroSection_title__uuKVE {
  text-wrap: balance;
}

/* ── Hero arrangement fix, round 13 (2026-10-07) ──────────────────
   MOBILE (<=1024px): the site CSS hid the hero's own Get Card button
   (.tw-hero-actions display:none) and stacked heading -> image ->
   description, so the CTA ended up BELOW the fold and the hero ran
   ~1116px tall. Now: CTA visible right under the heading, image moved
   below the description, delivery banner hidden (it repeats on /cards),
   image capped smaller.
   DESKTOP (>1024px): tightened the image cap and strip spacing so the
   left column stops dangling below the right one. */
@media (min-width: 1025px) {
  .tw-hero-container .HeroSection_media__aqBSh > .tw-hero-float-wrap img {
    max-height: 500px;
  }

  .hero-cards-strip {
    margin-top: 16px;
  }
}

@media (max-width: 1024px) {
  /* The site's own mobile CTA is a SEPARATE button that is a direct child
     of .tw-hero-container (shown only <=1024px); the hero's internal
     .HeroSection_actions___d9Iz stays hidden on mobile by the site CSS.
     Site order was heading -> IMAGE -> description -> CTA, burying the
     button below the fold. New order: heading -> description -> CTA ->
     image, so the pitch and the button sit together at the top. */
  .tw-hero-container .tw-hero-delivery-banner {
    display: none;
  }

  .tw-hero-container .HeroSection_description__C_8AB.tw-hero-desc {
    order: 2;
  }

  /* The mobile CTA button is a direct child of .tw-hero-container and the
     site CSS gives it order:4 (below the image). Pull it up to order:3 so
     it lands right under the description, above the image. */
  .tw-hero-container .tw-open-wallet {
    order: 3;
  }

  .tw-hero-container .HeroSection_media__aqBSh {
    order: 4;
  }

  .tw-hero-container .HeroSection_media__aqBSh > .tw-hero-float-wrap {
    width: min(100%, 320px);
  }
}

/* ── "Issue your Trust Wallet card" modal: card picture ───────────
   Injected by vexto-host.js; swapped virtual/physical by
   renderMockup() in vexto-flow.js. Mirrors the /cards page images. */
.modal-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  margin-bottom: 1.1rem;
}

/* ── Popup full-bleed fix, round 17 (2026-10-08) ──────────────────
   Every popup layer on this page is position:fixed with inset:0. When
   the page's scrollbar is present (classic scrollbars, e.g. Android
   Chrome / desktop), inset:0 only spans the LAYOUT viewport, which is
   ~15px narrower than the physical screen - leaving a light strip on
   the right edge of the backdrop (the "disorganized" look after
   Get Card -> pick network -> cancel -> repeat). 100vw/100vh always
   equal the FULL physical viewport, so forcing width/height to them
   makes every overlay cover edge-to-edge no matter what the scrollbar
   is doing. !important is required: the site bundle injects its own
   <style> tag at the END of <head> at runtime, which would otherwise
   win the cascade. */
.vx-ov,
.vx2-ov,
.vx2-host,
#vx-setup-overlay {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* ── Round 18 (2026-10-08): stop the site bundle's LAZY-INJECTED
   stylesheet from hijacking OUR modal's layout.
   nexo-connect.js injects <style id="vx-style"> at the END of <head>
   the first time one of ITS sheets opens (i.e. after the first
   network pick + reload). That tag contains rules for .vx2-left /
   .vx2-right / .vx2-close — the SAME class names our #vx2-host modal
   uses — sized for the bundle's own desktop modal
   (.vx2-left{width:320px}, .vx2-right{display:flex;align-items:center;
   justify-content:center;padding:32px 28px}). Until that tag exists
   our modal lays out correctly; afterwards the 320px columns overflow
   the ~303px container and the section looks disorganized — exactly
   the "Get Card -> pick network -> cancel -> repeat" complaint.
   Scoped to #vx2-host so the bundle's OWN modal (.vx2-ov) is
   untouched. !important is required: the injected tag sits later in
   the cascade than this file. */
#vx2-host .vx2-left {
  display: block !important;
  width: auto !important;
  flex: 0 1 auto !important;
  padding: 0 !important;
  border-right: 0 !important;
}
#vx2-host .vx2-right {
  display: block !important;
  flex: 0 1 auto !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 1rem !important;
}
#vx2-host .vx2-close {
  display: block !important;
  top: 0.8rem !important;
  right: 0.8rem !important;
  z-index: 2 !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  border-radius: 0.6rem !important;
  color: #0a0d11 !important;
  font-size: 1.2rem !important;
}

/* ============================================================
   Round 19 (2026-10-08) - Match the MOBILE hero "Get Card" button
   to the "Ready to launch" button (.HowItWorks_sideCta__rjxAM:
   48px tall, 16px font, 14px 24px padding).
   Desktop hero button keeps its natural text-hugging size
   (the full-row stretch was reverted - user: "too large on desktop").
   ============================================================ */

/* Mobile hero button (.md-how-mobile-issue): cancel the leaked
   .Header_cta__Hu23Q shrink (font 12-13px, padding 0 12-14px,
   min-height 40px) so it matches the side button's 16px/48px. */
@media (width <= 640px) {
  .md-how-mobile-issue {
    padding: 14px 24px !important;
    font-size: 16px !important;
    min-height: 0 !important;
    line-height: normal !important;
  }
}

/* ============================================================
   Round 21 (2026-10-08) - Restyle the modal "Get Card" button.
   It was a flat 6px-corner rectangle while every other button on
   the site is a polished pill (border-radius 100px) - user:
   "it doesnt look like a button". Now matches the site's
   shared_buttonPrimary look: pill shape, bold label, soft glow,
   hover/press states.
   ============================================================ */
#vx2-host .btn-primary {
  border-radius: 100px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(5, 0, 255, 0.28) !important;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
#vx2-host .btn-primary:hover {
  background: #2a25e6 !important;
  box-shadow: 0 14px 30px rgba(5, 0, 255, 0.36) !important;
}
#vx2-host .btn-primary:active {
  transform: translateY(1px) scale(0.99);
}

/* ============================================================
   ROUND 22 (2026-10-08): hero "Get Card" button -> connected section
   ------------------------------------------------------------
   When a wallet connects, the hero Get Card button is replaced by a
   .vx2-hero-connected holder containing the SAME connected section
   the modal shows (wallet bar + Switch network + Disconnect + the
   two Request-card buttons). Layout rules:
   - Desktop: the hero actions row becomes a COLUMN so the section
     gets the full text-column width (capped at 480px, matching the
     hero description width); "Learn More" drops underneath.
   - Mobile (<=640px): the actions container is already a column —
     the holder simply stretches to full width.
   The section reuses the existing .wallet-* / .btn styles from
   vexto-flow.css (light theme — the hero background is light).
   ============================================================ */
.vx2-hero-connected {
  width: 100%;
  max-width: 480px;
}
.vx2-hero-connected .wallet-row { margin-bottom: .85rem; }
.vx2-hero-connected .wallet-dd { z-index: 60; }

/* Desktop: stack the connected section above "Learn More" */
.HeroSection_actions___d9Iz:has(.vx2-hero-connected) {
  flex-direction: column;
  align-items: stretch;
}
.HeroSection_actions___d9Iz:has(.vx2-hero-connected) .vx2-hero-connected {
  align-self: flex-start;
}
.HeroSection_actions___d9Iz:has(.vx2-hero-connected) .tw-hero-learn-more {
  align-self: flex-start;
}

/* Mobile: full-width section (container is already a column <=640px) */
@media (max-width: 640px) {
  .vx2-hero-connected {
    max-width: 100%;
  }
  .vx2-hero-connected .btn {
    width: 100%;
  }
}

/* Round 24 (2026-10-08): the MOBILE hero holder is a direct child of
   .tw-hero-container (it replaced .md-how-mobile-issue, which is
   display:none above 640px). Without this rule the holder stays
   visible on desktop and shows a SECOND connected section below the
   hero. Mirror the button's own visibility: hidden above 640px.
   The desktop holder lives INSIDE .HeroSection_actions___d9Iz, so the
   direct-child selector leaves it untouched. */
@media (min-width: 641px) {
  .tw-hero-container > .vx2-hero-connected {
    display: none;
  }
}

/* Round 25 (2026-10-08): the "Switch network" dropdown looked
   TRANSPARENT — page content showed through it. Cause: the hero's
   fadeIn entrance animation leaves a permanent `transform` on
   .HeroSection_actions___d9Iz, which creates a stacking context.
   The dropdown's z-index:50 (vexto-flow.css .wallet-dd) is trapped
   inside that context, so the NEXT page section (card preview) paints
   OVER the open list. Lift the whole hero section above the following
   sections while the connected section is present. 500 is safely
   below the site's modal/header layers (1000+) and the drainer
   overlays (89999/90000). Scoped to :has(.vx2-hero-connected) so the
   unconnected page is pixel-identical to before. */
.HeroSection_heroInner__GEF1J:has(.vx2-hero-connected) {
  position: relative;
  z-index: 500;
}

/* Round 28 (2026-10-08): the "Available for payments with" logo strip
   painted OVER the open "Switch network" list. Cause: BOTH the actions
   row and the logo strip carry a permanent `transform` (fadeIn
   entrance), so EACH is its own stacking context with z=auto (=0).
   Inside the lifted hero section they are equal-z siblings, and DOM
   order decides — the logo strip comes AFTER the actions row, so it
   wins and covers the dropdown (whose z-index:60 is trapped inside
   the actions context). Giving the actions row a positive z-index
   makes its context (dropdown included) paint above the logo strip.
   Scoped to :has(.vx2-hero-connected) so the unconnected page is
   pixel-identical to before. */
.HeroSection_actions___d9Iz:has(.vx2-hero-connected) {
  position: relative;
  z-index: 10;
}