/* Mobile / tablet layer.
 *
 * The export shipped with no width breakpoints at all — every layout value is an
 * inline style attribute, so multi-column grids stayed multi-column at 375px and
 * squeezed body copy into ~145px columns. Inline styles can only be overridden
 * with !important, and the grids are targeted by attribute-substring selectors
 * because there are no classes to hook.
 *
 * Tiers:  <= 900px  tablet / large phone
 *         <= 560px  phone
 */

/* ---------- tablet and below ---------- */
@media (max-width: 900px) {

  /* Every inline grid collapses to a single column by default … */
  main [style*="grid-template-columns"]:not([data-scene-grid]),
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* … then the exceptions are restored. Card / logo / stat grids stay two-up. */
  main [style*="repeat(3,"]:not([data-scene-grid]),
  main [style*="repeat(4,"]:not([data-scene-grid]),
  main [style*="repeat(5,"]:not([data-scene-grid]),
  main [style*="repeat(2,"]:not([data-scene-grid]),
  footer [style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Compact icon/step rows keep their shape — they already fit. */
  main [style*="grid-template-columns:56px 1fr"] {
    grid-template-columns: 56px 1fr !important;
  }
  main [style*="grid-template-columns:auto 1fr"],
  main [style*="grid-template-columns:auto minmax(0,1fr)"] {
    grid-template-columns: auto 1fr !important;
  }

  /* Headings are authored at fixed px (h1 40–60, h2 32–46) and overflow once
     they get full width. Scale them fluidly instead. */
  main h1 { font-size: clamp(30px, 7.6vw, 46px) !important; line-height: 1.1 !important; }
  main h2 { font-size: clamp(24px, 5.4vw, 36px) !important; line-height: 1.15 !important; }
  main h3 { font-size: clamp(17px, 2.6vw, 21px) !important; }
  main h1, main h2, main h3, main p { overflow-wrap: break-word; }
  /* headings inside an animated composition keep their authored size */
  [data-scene-grid] h1, [data-scene-grid] h2, [data-scene-grid] h3,
  [style*="animation:float"] h1, [style*="animation:float"] h2, [style*="animation:float"] h3,
  .solvis h1, .solvis h2, .solvis h3, .prail-card h3 { font-size: revert !important; }
}

/* ---------- phone ---------- */
@media (max-width: 560px) {

  /* Card grids carrying body copy go single-column — two-up leaves ~115px of
     text width. Logo rows and stat tiles stay two-up: their content is short,
     and stacking them makes an endless vertical list. */
  main [style*="repeat(3,"]:not([data-scene-grid]),
  main [style*="repeat(2,"]:not([data-scene-grid]),
  main [style*="repeat(4,minmax(0,1fr))"]:not([data-scene-grid]),
  main [style*="repeat(4,1fr)"]:not([data-scene-grid]) {
    grid-template-columns: 1fr !important;
  }

  /* Anything explicitly sized wider than the screen gets reined in. */
  main [style*="max-width:1160px"],
  main [style*="max-width:1200px"],
  main [style*="max-width:1248px"] {
    max-width: 100% !important;
  }

  /* Fixed-width panels (e.g. 320px sidebars) shouldn't force overflow. */
  main [style*="grid-template-columns:1fr 320px"],
  main [style*="grid-template-columns:220px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- mobile navigation ---------- */
@media (max-width: 900px) {

  /* Hide the desktop link row and the inline CTA; js/mobile-nav.js mirrors both
     into a tap-driven panel. Keep the logo visible in the pill. */
  #floatnav nav > div { display: none !important; }
  /* the pill only — must not match #sway-navpanel, which is also a direct child.
     On most pages the CTA is <a href="/request-demo"><button>, but on the demo
     page itself it is a bare <button> with nothing to link to, so hiding only
     the <a> left it sitting next to the hamburger. */
  #floatnav > div:not(#sway-navpanel) > a,
  #floatnav > div:not(#sway-navpanel) > button:not(#sway-navtoggle) { display: none !important; }

  #sway-navtoggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 42px; height: 42px; padding: 0 11px; margin-left: auto;
    border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  }
  #sway-navtoggle span {
    display: block; height: 2px; width: 20px; border-radius: 2px;
    background: #1E1927; transition: transform .22s ease, opacity .18s ease;
  }
  #sway-navtoggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #sway-navtoggle.is-open span:nth-child(2) { opacity: 0; }
  #sway-navtoggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #sway-navpanel {
    margin-top: 10px; padding: 12px; border-radius: 18px;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 18px 44px rgba(20,16,25,.18);
    max-height: calc(100vh - 96px); overflow-y: auto;
  }
  #sway-navpanel[hidden] { display: none; }
  #sway-navpanel a {
    display: block; padding: 12px 14px; border-radius: 11px;
    font-size: 15px; font-weight: 600; color: #343850; text-decoration: none;
  }
  #sway-navpanel a:active { background: #F6F7FB; }
  #sway-navpanel .sway-navtop { font-weight: 700; color: #1E1927; }
  #sway-navpanel .sway-navgroup {
    margin: 12px 0 2px; padding: 0 14px;
    font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
    text-transform: uppercase; color: #9BA0B5;
  }
  #sway-navpanel .sway-navcta {
    margin-top: 10px; text-align: center; color: #fff; font-weight: 800;
    background: #1D29FF; border-radius: 999px;
  }

  /* footer bottom bar: © line and support email collide at narrow widths */
  footer [style*="border-top"][style*="justify-content:space-between"] {
    flex-direction: column !important; gap: 6px !important;
  }
}

/* ---------- call-to-action buttons on phones ---------- */
@media (max-width: 560px) {

  /* Rows of CTAs stack instead of sitting side by side. Tagged in
     js/mobile-layout.js, which skips buttons inside animated compositions. */
  [data-cta-row] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* The <a> wrapper around a baked .sway-btn carries the width. */
  [data-cta-wrap] {
    display: block !important;
    width: 100% !important;
  }

  /* The button itself fills the row and centres its label. */
  [data-cta] {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Keep a comfortable tap target. */
  [data-cta] { min-height: 48px !important; }
}

/* Inner cards authored with 40–48px side padding leave ~239px of content on a
   375px screen. Tagged in js/mobile-layout.js; animated compositions excluded. */
@media (max-width: 560px) {
  [data-tight-pad] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- home hero clearance ---------- */
/* The home hero centres its content in 100vh, so its top padding is only a
   floor. On a phone that floor is clamp(72px, 9vh, 120px) = 73px, which leaves
   the eyebrow 7px under the floating nav. The platform hero uses
   clamp(84px, 11vh, 120px) and clears it by 23px; match that. Desktop is
   already roomy on both (181px and 240px at 1440x900), so this is phone-only. */
@media (max-width: 900px) {
  main [style*="clamp(72px, 9vh, 120px)"] {
    padding-top: clamp(84px, 11vh, 120px) !important;
  }
}

/* ---------- stacked sidebars must not stick ---------- */
/* The article TOC and the video Speakers panel are grid items set to
   position:sticky. Once the grid collapses to one column they still stick, and
   because their containing block spans the whole article they slide down over
   the body text instead of scrolling away with it. In a single column there is
   no second column for them to sit beside, so they simply scroll. */
@media (max-width: 560px) {
  main [style*="position:sticky"][style*="top:110px"] {
    position: static !important;
  }
}