/*
 * VATAX / homepage-only / phone layout (2026-10-21)
 * This file is intentionally linked AFTER the existing compiled/public CSS.
 * No HTML, content, SEO markup, scripts, portals, tablet or desktop rules change.
 * Keep selectors scoped to the public index page to prevent cross-page leakage.
 */
@media screen and (max-width: 760px) {
  html body#vtx-homepage section.classic-home-hero.vtx-home-hero-enhanced.vtx-gcc-home-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 0 56px !important;
    overflow: hidden !important;
    text-align: center !important;
    isolation: isolate;
    background-position: center 30% !important;
    background-size: cover !important;
  }

  /* The animated GCC statement is a short introductory badge, not a full hero. */
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero > .vtx-gcc-animated-pill.vtx-home-pill-clean {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: calc(100% - 32px) !important;
    max-width: 440px !important;
    min-height: 0 !important;
    margin: 0 auto 18px !important;
    padding: 11px 14px !important;
    border-radius: 22px !important;
    font-size: clamp(14px, 3.85vw, 17px) !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    animation: none !important;
    background: rgba(255, 255, 255, 0.11) !important;
    border: 1px solid rgba(255, 255, 255, 0.21) !important;
    box-shadow: 0 8px 24px rgba(0, 18, 24, 0.11) !important;
  }

  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero > .container.classic-hero-grid {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "copy" "card" !important;
    direction: inherit !important;
    width: 100% !important;
    max-width: 470px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    row-gap: 20px !important;
    column-gap: 0 !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero .classic-hero-copy {
    grid-area: copy !important;
    justify-self: stretch !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  html body#vtx-homepage section.classic-home-hero.vtx-home-hero-enhanced.vtx-gcc-home-hero .classic-hero-copy h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: clamp(26px, 7.3vw, 32px) !important;
    line-height: 1.32 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-wrap: balance !important;
    overflow-wrap: break-word !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-home-hero-enhanced.vtx-gcc-home-hero .classic-hero-copy h1 > span {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 0 !important;
    font-size: clamp(20px, 5.45vw, 25px) !important;
    line-height: 1.43 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero .classic-hero-copy > p {
    width: 100% !important;
    max-width: 36ch !important;
    min-width: 0 !important;
    margin: 0 auto 16px !important;
    font-size: clamp(12.5px, 3.4vw, 14px) !important;
    line-height: 1.85 !important;
    color: rgba(255, 255, 255, 0.94) !important;
    text-align: center !important;
    text-wrap: pretty !important;
  }

  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero .classic-hero-copy .hero-actions.hero-actions-single {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero .hero-actions .vtx-main-start-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Keep the compass under the CTA in the SAME hero, with no cropping. */
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero article.vtx-hero-tool-card.vtx-home-compass-card {
    grid-area: card !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 22px 18px 23px !important;
    gap: 9px !important;
    border-radius: 23px !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    background: linear-gradient(150deg,rgba(255,255,255,.985),rgba(240,250,250,.965)) !important;
    box-shadow: 0 16px 36px rgba(1, 24, 29, .19) !important;
    overflow: visible !important;
    text-align: center !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero article.vtx-home-compass-card > .vtx-hero-tool-icon {
    align-self: center !important;
    flex: 0 0 54px !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    margin: 0 0 4px !important;
    border-radius: 18px !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero article.vtx-home-compass-card > h3.vtx-compass-title {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-self: center !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    column-gap: .32em !important;
    font-size: clamp(21px, 6vw, 25px) !important;
    line-height: 1.38 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero article.vtx-home-compass-card > strong,
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero article.vtx-home-compass-card > p {
    display: block !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    text-align: center !important;
    text-wrap: pretty !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero article.vtx-home-compass-card > p {
    font-size: 12.5px !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero article.vtx-home-compass-card > .vtx-hero-compass-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin: 9px 0 0 !important;
    padding: 10px 16px !important;
    border-radius: 13px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Decorative wave stays behind the card and cannot clip its CTA. */
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero > .hero-wave {
    position: absolute !important;
    inset-inline: 0 !important;
    bottom: -2px !important;
    z-index: 1 !important;
    height: 50px !important;
    max-height: 50px !important;
    pointer-events: none !important;
  }

  /* Only on this homepage's phone view: make the floating helper a compact
     accessible launcher so it no longer masks compass descriptions/actions. */
  html body#vtx-homepage .askvatax-widget.askvatax-widget[data-askvatax] {
    width: 52px !important;
    min-width: 0 !important;
    max-width: 52px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  html[dir="rtl"] body#vtx-homepage .askvatax-widget[data-askvatax] {
    left: 12px !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 12px !important;
  }
  html[dir="ltr"] body#vtx-homepage .askvatax-widget[data-askvatax] {
    right: 12px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 12px !important;
  }
  html body#vtx-homepage .askvatax-widget[data-askvatax] .askvatax-fab {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 5px !important;
    gap: 0 !important;
    border-radius: 50% !important;
  }
  html body#vtx-homepage .askvatax-widget[data-askvatax] .askvatax-fab-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
  }
  html body#vtx-homepage .askvatax-widget[data-askvatax] .askvatax-fab-text {
    /* Keep the existing accessible name in DOM; only visually collapse it. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  html body#vtx-homepage .askvatax-widget[data-askvatax] .askvatax-panel,
  html body#vtx-homepage .askvatax-widget[data-askvatax].is-open .askvatax-panel {
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    bottom: 64px !important;
  }
  html[dir="rtl"] body#vtx-homepage .askvatax-widget[data-askvatax] .askvatax-panel {
    left: 0 !important;
    right: auto !important;
  }
  html[dir="ltr"] body#vtx-homepage .askvatax-widget[data-askvatax] .askvatax-panel {
    right: 0 !important;
    left: auto !important;
  }
}

@media screen and (max-width: 360px) {
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero > .container.classic-hero-grid {
    padding-inline: 12px !important;
    row-gap: 17px !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-gcc-home-hero > .vtx-gcc-animated-pill.vtx-home-pill-clean {
    width: calc(100% - 24px) !important;
    margin-bottom: 16px !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-home-hero-enhanced.vtx-gcc-home-hero .classic-hero-copy h1 {
    font-size: 26px !important;
  }
  html body#vtx-homepage section.classic-home-hero.vtx-home-hero-enhanced.vtx-gcc-home-hero .classic-hero-copy h1 > span {
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  html body#vtx-homepage section.classic-home-hero .vtx-gcc-animated-pill.vtx-home-pill-clean {
    animation: none !important;
  }
}