/* VELAEA INDEX MOBILE APP TILES + CENTERED POPUP V3 SINGLE-MOTION
   One motion owner:
   - index-glass-hero.css/js own all entrance physics/transforms.
   - this file owns only final mobile geometry, card skin and popup UI.
   - no transform/transition is applied to .vh-float or .vh-card here. */

@media (max-width:640px){
  html body.index-page .hero.section-soft.velaea-policy-hero .hero-art.hero-art-image.vh-host{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }

  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles{
    height:378px!important;
    min-height:378px!important;
    isolation:isolate!important;
  }

  /* Final geometry only. Original spring animates the card surface into these slots. */
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float{
    position:absolute!important;
    width:46.5%!important;
    height:126px!important;
    min-height:126px!important;
    margin:0!important;
    z-index:20!important;
    pointer-events:auto!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.trust,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.community{left:2%!important;right:auto!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.portfolio,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.lab{left:51.5%!important;right:auto!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.trust,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.portfolio{top:6px!important;bottom:auto!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.community,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.lab{top:140px!important;bottom:auto!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market{
    left:2%!important;right:auto!important;top:274px!important;bottom:auto!important;
    width:96%!important;height:88px!important;min-height:88px!important;
  }

  /* Skin only — transform is intentionally absent. */
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-card,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-small{
    box-sizing:border-box!important;
    width:100%!important;
    height:126px!important;
    min-height:126px!important;
    max-height:126px!important;
    padding:12px 12px 10px!important;
    overflow:hidden!important;
    border-radius:18px!important;
    border:1px solid rgba(112,204,255,.20)!important;
    background:
      radial-gradient(circle at 86% 4%,rgba(99,216,255,.13),transparent 34%),
      radial-gradient(circle at 8% 104%,rgba(151,121,255,.10),transparent 36%),
      radial-gradient(circle at 62% 118%,rgba(242,199,106,.10),transparent 42%),
      linear-gradient(155deg,rgba(10,28,47,.93),rgba(3,12,22,.975))!important;
    color:#f5f8ff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.20)!important;
    backdrop-filter:blur(14px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.08)!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market .vh-card,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market .vh-small{
    height:88px!important;min-height:88px!important;max-height:88px!important;padding:11px 13px 9px!important;
  }

  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-icon,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-action b{display:none!important}

  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small{
    display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;gap:0!important;align-content:start!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small-head{
    min-height:0!important;margin:0!important;padding:0!important;color:rgba(255,220,130,.82)!important;
    font-size:8px!important;line-height:1.22!important;letter-spacing:.095em!important;font-weight:700!important;white-space:normal!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small h3{
    display:-webkit-box!important;margin:7px 0 4px!important;max-height:3.48em!important;overflow:hidden!important;
    color:#f7f9ff!important;font-size:clamp(11.6px,3.35vw,13.4px)!important;line-height:1.16!important;font-weight:700!important;
    letter-spacing:-.012em!important;overflow-wrap:anywhere!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small p{
    display:-webkit-box!important;min-height:0!important;max-height:2.76em!important;margin:0!important;overflow:hidden!important;
    color:rgba(231,239,250,.80)!important;opacity:.78!important;font-size:clamp(8.2px,2.45vw,9.6px)!important;line-height:1.38!important;
    overflow-wrap:anywhere!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-action{
    align-self:end!important;min-height:0!important;margin:4px 0 0!important;padding:4px 0 0!important;
    color:#f2c76a!important;background:transparent!important;font-size:8.6px!important;line-height:1.2!important;font-weight:700!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-action::after{content:none!important;display:none!important}

  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market .vh-small{
    grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:10px!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market .vh-small-head{grid-column:1!important;grid-row:1!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market h3{
    grid-column:1!important;grid-row:2!important;margin-top:6px!important;-webkit-line-clamp:2!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market p{display:none!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market .vh-action{
    grid-column:2!important;grid-row:1/3!important;align-self:center!important;margin:0!important;padding:0!important;
  }

  /* Remove every legacy expanded/front visual in app mode. */
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles.has-front .vh-float:not(.is-front) .vh-card,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.is-front .vh-card,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float[data-tap-preview="true"] .vh-card,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.is-click-clear .vh-card{
    opacity:1!important;filter:none!important;
  }

  /* Use the REAL clock already in the hero; no duplicate fake clock layers. */
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock{
    opacity:.34!important;
    filter:saturate(1.18) brightness(1.08) drop-shadow(0 0 18px rgba(80,192,240,.18))!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock-ring.outer{
    opacity:.82!important;box-shadow:0 0 18px rgba(99,216,255,.24),0 0 34px rgba(242,199,106,.10)!important;
  }
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock-ring.mid{opacity:.60!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock-ring.inner{opacity:.48!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock-spark-track.primary,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock-spark-track.secondary,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock-spark-track.trail{
    opacity:.90!important;
  }

  /* LIGHT */
  html[data-theme="light"] body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-card,
  html[data-theme="light"] body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-small,
  body.light-mode.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-card,
  body.light-mode.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-small{
    background:
      radial-gradient(circle at 86% 10%,rgba(88,204,248,.17),transparent 31%),
      radial-gradient(circle at 10% 94%,rgba(154,126,244,.09),transparent 33%),
      linear-gradient(155deg,rgba(255,255,255,.998),rgba(242,249,253,.997))!important;
    background-color:#f8fbfd!important;color:#0a2138!important;border-color:rgba(55,133,175,.22)!important;
    box-shadow:inset 0 1px 0 #fff,0 9px 22px rgba(31,70,98,.10)!important;
  }
  html[data-theme="light"] body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small-head,
  body.light-mode.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small-head{color:#8a6415!important;opacity:1!important}
  html[data-theme="light"] body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small h3,
  body.light-mode.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small h3{color:#0a2138!important;opacity:1!important}
  html[data-theme="light"] body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small p,
  body.light-mode.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-small p{color:#425a6f!important;opacity:1!important}
  html[data-theme="light"] body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-action,
  body.light-mode.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-action{color:#8d6512!important;opacity:1!important}
  html[data-theme="light"] body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock,
  body.light-mode.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-clock{
    opacity:.28!important;filter:saturate(1.12) brightness(.92) drop-shadow(0 0 12px rgba(55,150,198,.14))!important;
  }
}

@media(max-width:339px){
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles{height:354px!important;min-height:354px!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float{width:47%!important;height:122px!important;min-height:122px!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.trust,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.community{left:1.5%!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.portfolio,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.lab{left:51.5%!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.community,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.lab{top:134px!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market{top:262px!important;height:80px!important;min-height:80px!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-card,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float .vh-small{height:122px!important;min-height:122px!important;max-height:122px!important;padding:10px!important}
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market .vh-card,
  html body.index-page .hero.section-soft.velaea-policy-hero .vh-stage.vh-mobile-app-tiles .vh-float.market .vh-small{height:80px!important;min-height:80px!important;max-height:80px!important}
}

/* Center popup */
@media(max-width:640px){
  .vh-mobile-detail-overlay{
    position:fixed!important;inset:0!important;z-index:2147482500!important;display:grid!important;place-items:center!important;
    padding:max(18px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom))!important;
    background:rgba(0,5,12,.64)!important;backdrop-filter:blur(0)!important;-webkit-backdrop-filter:blur(0)!important;
    opacity:0!important;pointer-events:none!important;transition:opacity .24s ease,backdrop-filter .28s ease!important;
  }
  .vh-mobile-detail-overlay[hidden]{display:none!important}
  .vh-mobile-detail-overlay.is-open{opacity:1!important;pointer-events:auto!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
  .vh-mobile-detail-dialog{
    box-sizing:border-box!important;width:min(88vw,348px)!important;max-height:min(72vh,590px)!important;overflow:hidden!important;
    border-radius:24px!important;border:1px solid rgba(99,216,255,.22)!important;
    background:
      radial-gradient(circle at 92% 0,rgba(99,216,255,.15),transparent 30%),
      radial-gradient(circle at 8% 100%,rgba(152,124,255,.10),transparent 31%),
      linear-gradient(180deg,rgba(8,25,43,.995),rgba(3,11,20,.998))!important;
    color:#fff!important;box-shadow:0 24px 80px rgba(0,0,0,.55)!important;
    opacity:0!important;transform:translate3d(0,13px,0) scale(.91)!important;filter:blur(6px)!important;
    transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .22s ease,filter .28s ease!important;
  }
  .vh-mobile-detail-overlay.is-open .vh-mobile-detail-dialog{opacity:1!important;transform:translate3d(0,0,0) scale(1)!important;filter:none!important}
  .vh-mobile-detail-scroll{box-sizing:border-box!important;max-height:min(72vh,590px)!important;overflow:auto!important;padding:18px 16px 16px!important;overscroll-behavior:contain!important}
  .vh-mobile-detail-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important}
  .vh-mobile-detail-eyebrow{margin:0 0 5px!important;color:#f2c76a!important;font-size:9px!important;line-height:1.25!important;font-weight:700!important;letter-spacing:.12em!important}
  .vh-mobile-detail-title{margin:0!important;color:#fff!important;font-size:clamp(18px,5.25vw,22px)!important;line-height:1.15!important;font-weight:750!important;overflow-wrap:anywhere!important}
  .vh-mobile-detail-copy{margin:13px 0 16px!important;color:rgba(239,246,255,.76)!important;font-size:12px!important;line-height:1.62!important;overflow-wrap:anywhere!important}
  .vh-mobile-detail-close{flex:0 0 auto!important;width:34px!important;height:34px!important;border-radius:11px!important;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.045)!important;color:#fff!important;font-size:18px!important}
  .vh-mobile-detail-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .vh-mobile-detail-primary{width:100%!important;min-height:42px!important;border:0!important;border-radius:13px!important;background:linear-gradient(135deg,#f5d675,#d9a942)!important;color:#1a1306!important;font-size:11px!important;font-weight:800!important;padding:0 14px!important}

  html[data-theme="light"] .vh-mobile-detail-overlay,body.light-mode .vh-mobile-detail-overlay{background:rgba(226,237,246,.70)!important}
  html[data-theme="light"] .vh-mobile-detail-dialog,body.light-mode .vh-mobile-detail-dialog{
    border-color:rgba(45,137,181,.23)!important;
    background:
      radial-gradient(circle at 92% 0,rgba(77,197,246,.18),transparent 30%),
      radial-gradient(circle at 8% 100%,rgba(153,121,255,.09),transparent 31%),
      linear-gradient(180deg,rgba(255,255,255,.998),rgba(244,250,254,.998))!important;
    color:#0a2037!important;box-shadow:0 26px 76px rgba(32,72,101,.20)!important;
  }
  html[data-theme="light"] .vh-mobile-detail-title,body.light-mode .vh-mobile-detail-title{color:#0a2037!important}
  html[data-theme="light"] .vh-mobile-detail-copy,body.light-mode .vh-mobile-detail-copy{color:#435b70!important}
  html[data-theme="light"] .vh-mobile-detail-close,body.light-mode .vh-mobile-detail-close{border-color:rgba(34,93,129,.16)!important;background:rgba(255,255,255,.82)!important;color:#17324a!important}
}

@media(prefers-reduced-motion:reduce){
  .vh-mobile-detail-overlay,.vh-mobile-detail-dialog{transition:none!important}
}