/* ============================================================
   Allingo — Mobile / responsive refinements
   Loaded AFTER sections.css, so these rules win on conflict.
   Main breakpoint: <= 720px (phones). A few tablet tweaks at 900.
   ============================================================ */

@media (max-width: 720px) {

  /* contact-method cards: icon beside the text instead of stacked */
  .contact-method {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 15px;
    padding: 18px;
  }
  .contact-method .cm-ic { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; align-self: center; }
  .contact-method .cm-lbl { display: none; }
  .contact-method .cm-val { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 2px; }
  .contact-method .cm-sub { grid-column: 2; grid-row: 2; align-self: start; }

  /* ---------- HERO ---------- */
  .hero { padding-top: 16px; padding-bottom: 24px; }
  /* animated scroll-down cue — hints there's more below the fold */
  .scroll-cue {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    color: var(--text-mut);
    animation: scrollCue 1.6s ease-in-out infinite;
  }
  .scroll-cue svg { width: 28px; height: 28px; }
  @keyframes scrollCue {
    0%, 100% { transform: translateY(0); opacity: .45; }
    50% { transform: translateY(7px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }
  /* On mobile the globe sits flush right on the first fold (blue CTA collapsed).
     As you scroll and #headerCta expands in from zero width, the globe is
     pushed smoothly to the left — a single, fluid horizontal motion. */
  .header-cta { gap: 0; }
  #headerCta {
    height: 40px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    max-width: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition:
      max-width .5s cubic-bezier(.22, .61, .36, 1),
      margin-left .5s cubic-bezier(.22, .61, .36, 1),
      padding .5s cubic-bezier(.22, .61, .36, 1),
      opacity .32s ease .06s;
  }
  #headerCta.show {
    max-width: 180px;
    margin-left: 10px;
    padding-left: 16px;
    padding-right: 16px;
    opacity: 1;
    pointer-events: auto;
  }
  /* gentle easing on the globe so its reflow tracks the button fluidly */
  .lang-switch { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
  @media (prefers-reduced-motion: reduce) {
    #headerCta { transition: opacity .2s ease; }
  }
  .howit-banner { display: none; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px) !important; margin-bottom: 18px; }
  .hero-sub { font-size: 16.5px; }
  .hero-cta .btn-lg { width: 100%; }
  .hero-cta { gap: 14px; }
  /* pull the copy up onto the mock shape; gradient keeps the text readable over it */
  .hero-copy {
    margin-top: -144px;
    position: relative;
    z-index: 2;
    padding-top: 84px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.6) 44px, #fff 78px, #fff 100%);
  }
  .trust-strip { display: none; }

  /* hero dashboard mock — keep it a compact, readable dashboard */
  .hero-mock-wrap { margin-top: 4px; }
  /* on mobile, show only the Recent-orders card; hide the KPI strip above it */
  .hero-mock-wrap .kpi-row { display: none; }
  .hero-mock-wrap .app-top { display: none; }
  .hero-mock-wrap .app { min-height: 0; }
  .app-top { padding: 10px 12px; gap: 9px; }
  .app-top .app-search { display: none; }
  .app-top .crumb { font-size: 12px; }
  .app-body { padding: 12px; gap: 11px; }

  /* KPI strips inside any mock stay 3-up but compact */
  .hero-mock-wrap .kpi-row,
  .tab-visual .kpi-row { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .hero-mock-wrap .kpi,
  .tab-visual .kpi { padding: 9px 9px; }
  .hero-mock-wrap .kpi .lbl,
  .tab-visual .kpi .lbl { font-size: 9.5px; margin-bottom: 4px; }
  .hero-mock-wrap .kpi .val,
  .tab-visual .kpi .val { font-size: 15px; }
  .hero-mock-wrap .kpi .chg,
  .tab-visual .kpi .chg { font-size: 9.5px; }

  /* order table — drop the destination column so it fits cleanly */
  .otable { font-size: 11.5px; }
  .otable th, .otable td { padding: 8px 10px; }
  .otable th:nth-child(2), .otable td:nth-child(2) { display: none; }

  /* ---------- PROBLEM (before / after) ---------- */
  .compare { gap: 4px; }
  .ba-side { min-height: 0; padding: 14px 4px; }
  .ba-before .messy { min-height: 240px; }
  .ba-dash { padding: 12px; }
  .ba-kpis { gap: 8px; }
  .ba-kpi { padding: 9px 9px; }
  .ba-kpi b { font-size: 16px; }

  /* ---------- HOW IT WORKS → swipe carousel ---------- */
  .stepper {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 18px calc(var(--gut) * -1) 0;
    padding: 4px var(--gut) 18px;
    padding-left: calc(var(--gut) + 6px);
    scroll-padding-left: calc(var(--gut) + 6px);
    scrollbar-width: none;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .step {
    scroll-snap-align: start;
    flex: 0 0 78%;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
  }
  .step-line,
  .step:not(:last-child)::after { display: none; }
  .step-top { margin-bottom: 14px; }
  .step-shot { height: 88px; }
  .howit-banner { margin-top: 26px; }

  /* section-head action links → icon only, pinned right */
  .partner-head { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .partner-head .section-head { flex: 1; min-width: 0; }
  .partner-head .link-arrow { font-size: 0; gap: 0; flex: none; }
  .partner-head .link-arrow svg { width: 24px; height: 24px; }

  /* hide selected section-head lead paragraphs on mobile */
  #product .section-head .lead,
  .section-head--center .lead { display: none; }

  /* ---------- PRODUCT TABS ---------- */
  .tabs-head {
    width: 100vw;
    max-width: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 24px 0 22px calc(var(--gut) * -1);
    padding: 6px var(--gut);
    box-sizing: border-box;
  }
  .tabs-head::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; font-size: 14px; }

  /* stack panel: visual first, copy below */
  .tab-panel.on { gap: 22px; }
  .tab-panel.on .tab-visual { order: 1; }
  .tab-panel.on .tab-info { order: 2; }
  .tab-info h3 { font-size: 22px; }
  .tab-info p { font-size: 15.5px; }

  /* batch compare table inside the mock — tighten so it never overflows */
  .tab-visual .mock [style*="padding:18px"],
  .tab-visual .mock > div > div[style*="padding:18px"] { padding: 12px !important; }
  .cmp-row { font-size: 11.5px; padding: 9px 11px; gap: 7px; }
  .cmp-row.head { padding: 8px 11px; font-size: 9px; }
  .cmp-list.batch .cmp-row { grid-template-columns: 1.4fr 1.3fr .7fr; }
  /* hide the ETA column in the cramped batch view */
  .cmp-list.batch .cmp-row > .eta,
  .cmp-list.batch .cmp-row.head > span:nth-child(3) { display: none; }
  .cmp-list.batch .cmp-row .best-flag { display: none; }
  .carrier-chip { font-size: 11px; gap: 5px; }
  .cmono { width: 18px; height: 18px; font-size: 9px; }

  /* dashboard bar chart inside tabs — shorter */
  .tab-visual .mock [style*="height:130px"] { height: 104px !important; }

  /* ---------- USE CASES → swipe carousel ---------- */
  .usecase-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 14px calc(var(--gut) * -1) 0;
    padding: 4px var(--gut) 18px;
    padding-left: calc(var(--gut) + 6px);
    scroll-padding-left: calc(var(--gut) + 6px);
    scrollbar-width: none;
  }
  .usecase-grid::-webkit-scrollbar { display: none; }
  .uc { scroll-snap-align: start; flex: 0 0 76%; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .uc .uic { margin-bottom: 0; }
  .uc h3 { margin-bottom: 0; }
  .uc .out { grid-column: 1 / -1; margin-top: 12px; }

  /* ---------- COVERAGE ---------- */
  .coverage-grid { gap: 30px; }
  .map-panel { aspect-ratio: 3 / 2.4; }
  .coverage-stats { gap: 12px; }

  /* ---------- PRICING ---------- */
  .po-title { font-size: clamp(46px, 14vw, 66px); }
  .po-sub { width: auto !important; }

  /* ---------- CASE STUDY SLIDER ---------- */
  .case-slider .case-grid { grid-template-columns: 1fr; }
  .case-slider .case-left, .case-slider .case-right { min-height: 0; }
  .case-left { padding: 28px 24px; }
  .case-right { padding: 28px 24px; gap: 18px; }
  .case-logo { display: none; }
  .case-quote { font-size: 19px; }
  /* 3 metrics side by side instead of stacked */
  .case-right .case-fade { flex-direction: row; gap: 14px; justify-content: space-between; }
  .case-right .case-metric { flex: 1; min-width: 0; }
  .case-right .case-divider { display: none; }
  .case-metric .v { font-size: 26px; }
  .case-metric .k { font-size: 13px; margin-top: 6px; }
  .case-metric .ba { font-size: 10px; }

  /* ---------- swipe hint affordance ---------- */
  .m-swipe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .m-swipe svg { width: 15px; height: 15px; }
}

/* tablet: ease the dense 5-up rows before the phone carousel kicks in */
@media (min-width: 721px) and (max-width: 980px) {
  .usecase-grid { grid-template-columns: repeat(3, 1fr); }

  /* HOW IT WORKS → use the mobile swipe carousel on tablet too */
  .stepper {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 18px calc(var(--gut) * -1) 0;
    padding: 4px var(--gut) 20px;
    padding-left: calc(var(--gut) + 6px);
    scroll-padding-left: calc(var(--gut) + 6px);
    scrollbar-width: none;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .step {
    scroll-snap-align: start;
    flex: 0 0 58%;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
  }
  .step-line,
  .step:not(:last-child)::after { display: none; }

  /* match the compact mobile header CTA size on tablet */
  #headerCta { height: 40px; padding: 0 16px; font-size: 14px; }
}

/* hide the swipe hint on larger screens (it only matters for carousels) */
@media (min-width: 721px) { .m-swipe { display: none; } }