/* ASIANXT — shared mobile / tablet responsive styles */

.wf-ft-agent{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}

@media (max-width: 900px) {
  /* ── Main landing nav ── */
  #site-nav.nav-main {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    padding: 10px 16px 0 !important;
    align-items: center;
  }

  #site-nav.nav-main .lp-nav-cta {
    margin-left: auto;
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  #site-nav.nav-main .nav-links {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    overflow-x: auto;
    gap: 18px;
    padding: 12px 0 14px;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #site-nav.nav-main .nav-links::-webkit-scrollbar {
    display: none;
  }

  #site-nav.nav-main .nav-links .lp-tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
  }

  /* ── Agent page nav ── */
  #site-nav.nav-agent {
    height: auto !important;
    min-height: 52px;
    padding: 10px 18px !important;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
  }

  #site-nav.nav-agent .back-link {
    margin-left: 14px !important;
    font-size: 12px !important;
  }

  #site-nav.nav-agent .nav-agent-meta {
    margin-left: auto !important;
    text-align: right;
  }

  /* ── Landing hero ── */
  #lp-hero {
    padding: 92px 20px 64px !important;
    min-height: auto !important;
  }

  #lp-hero .hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 10px !important;
  }

  #lp-hero .hero-ctas a {
    width: 100%;
    max-width: 300px;
    text-align: center;
    box-sizing: border-box;
  }

  #lp-hero .hero-line-1 {
    flex-wrap: wrap;
    justify-content: center !important;
  }

  #lp-hero #hero-type-2 {
    font-size: clamp(42px, 11vw, 128px) !important;
  }

  #lp-hero .hero-agents {
    margin-top: 48px !important;
    padding-top: 20px !important;
  }

  #lp-hero .hero-agent-name {
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  /* ── Agent sections (landing) ── */
  section[id^="agent-"] {
    padding: 64px 20px !important;
    scroll-margin-top: 72px !important;
  }

  section[id^="agent-"] > .agent-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  section[id^="agent-"] .agent-copy p {
    max-width: none !important;
  }

  section[id^="agent-"] .mock-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  section[id^="agent-"] .mock-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mock-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mock-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Agent page heroes ── */
  #sw-hero,
  #ls-hero,
  #clip-hero,
  #deal-hero,
  #vault-hero {
    padding: 88px 24px 56px !important;
    min-height: auto !important;
  }

  /* ── Agent page sections ── */
  .page-section {
    padding: 64px 24px !important;
  }

  .page-section-tight {
    padding: 56px 24px !important;
  }

  .page-section-stats {
    padding: 48px 24px !important;
  }

  /* ── Demo / section toolbars ── */
  .demo-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .demo-toolbar-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Multi-column grids ── */
  .grid-4-cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-3-cols {
    grid-template-columns: 1fr !important;
  }

  .grid-4-flow {
    grid-template-columns: 1fr !important;
  }

  .grid-4-flow > div {
    border-left: none !important;
  }

  .grid-2-cols {
    grid-template-columns: 1fr !important;
  }

  .grid-asymmetric {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── Storyforge demo panel ── */
  .sw-demo-body {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .sw-demo-feed {
    border-right: none !important;
  }

  .sw-demo-sidebar {
    width: 100% !important;
    border-top: 1px solid #ECECEC;
  }

  /* ── LingoSphere compare ── */
  .ls-compare-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ── Scrollable data tables ── */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table-wrap > div {
    min-width: 520px;
  }

  /* ── Footer ── */
  .wf-ft-hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .wf-ft-bar {
    padding: 16px 20px 28px !important;
  }

  .wf-ft-bar nav {
    gap: 14px 18px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* ── Inline workflow steps (Sigwire) ── */
  .wf-step-row {
    grid-template-columns: 44px 1fr !important;
    gap: 16px !important;
  }

  .wf-step-row .wf-step-dot {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 520px) {
  #site-nav.nav-main .nav-links .lp-tab {
    font-size: 11px;
  }

  #site-nav.nav-main .lp-nav-cta {
    display: none !important;
  }

  section[id^="agent-"] .mock-grid-4,
  section[id^="agent-"] .mock-grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .grid-4-cols {
    grid-template-columns: 1fr !important;
  }

  #lp-hero #hero-sub {
    font-size: clamp(18px, 5vw, 28px) !important;
  }

  .mono-flow-badge {
    flex-wrap: wrap !important;
    justify-content: center;
    text-align: center;
  }

  #site-nav.nav-agent .back-link {
    margin-left: 8px !important;
    font-size: 11px !important;
  }
}