/* Publrr — mobile layer. Every rule lives inside a max-width query,
   so desktop rendering is byte-for-byte unchanged. */

.plr-burger{display:none}

@media (max-width:900px){
  html,body{overflow-x:hidden}
  body{min-width:0!important}
  #root,#root>main{min-width:0!important;width:100%!important;max-width:100%!important}

  /* ── Nav ───────────────────────────────────────────── */
  .plr-nav{padding:0 18px!important;height:60px!important}
  .plr-nav-center,.plr-nav-actions{display:none!important}
  .plr-burger{display:flex!important;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}
  .plr-burger span{display:block;width:22px;height:2px;border-radius:2px;background:#121212;margin:0 auto;transition:transform .2s ease,opacity .15s ease}
  .plr-mobile-menu{position:fixed;top:60px;left:0;right:0;max-height:calc(100vh - 60px);overflow-y:auto;background:#fff;border-top:1px solid var(--color-neutral-200);box-shadow:0 24px 48px -12px rgba(9,6,22,.18);padding:8px 18px 24px;display:flex;flex-direction:column;z-index:299}
  .plr-mm-group{display:flex;flex-direction:column;padding:14px 0;border-bottom:1px solid var(--color-neutral-200)}
  .plr-mm-head{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-400);margin-bottom:8px}
  .plr-mm-head-link{font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--color-ink);margin:0;text-decoration:none;min-height:44px;display:flex;align-items:center}
  .plr-mm-link{font-family:var(--font-ui);font-size:16px;color:var(--color-neutral-800);text-decoration:none;min-height:44px;display:flex;align-items:center}
  .plr-mm-foot{display:flex;flex-direction:column;gap:10px;padding-top:20px}
  .plr-mm-login{font-family:var(--font-ui);font-size:16px;font-weight:500;color:var(--color-neutral-700);text-decoration:none;min-height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-neutral-300);border-radius:8px}
  .plr-mm-cta{font-family:var(--font-ui);font-size:16px;font-weight:600;color:#fff;background:var(--color-primary);text-decoration:none;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:8px}

  /* ── Hero ──────────────────────────────────────────── */
  .plr-hero{padding-top:86px!important;padding-bottom:36px!important}
  .plr-hero-art{display:none!important}
  .plr-hero-h1{font-size:34px!important;line-height:1.14!important;letter-spacing:-.02em!important}
  .plr-hero-form{flex-direction:column!important;width:100%!important;align-items:stretch!important}
  .plr-hero-input{width:100%!important;min-height:48px}
  .plr-hero-form button,.plr-hero-form a{width:100%!important;justify-content:center!important;min-height:48px}

  /* ── Structural collapse ───────────────────────────────
     These pages are built with inline styles and per-page
     class names, so mobile overrides key off the declarations
     themselves and apply to React and static pages alike. */
  main [style*="grid-template-columns"],main [style*="flex: 0 0"],
  [class*="-grid"],[class*="-layout"],[class*="-row"],[class*="-cols"],
  .l-row,.faq-layout,.brand-content,.why-card,.testimonial,.hero-grid,.footer-top,
  .steps-inner,.testimonial-card,.final-inner,.why-inner,.pricing-inner,.hero-inner{grid-template-columns:1fr!important}
  main [style*="flex: 0 0"]{flex:none!important;width:100%!important;max-width:100%!important}
  main aside{width:auto!important;max-width:100%!important}
  main [style*="max-width: 1152px"],main [style*="max-width: 1280px"],main [style*="max-width: 1200px"]{padding-left:20px!important;padding-right:20px!important}
  main section{padding-left:0!important;padding-right:0!important}
  img,svg,image-slot{max-width:100%}
  .wrap,.container,.shell,.section-inner{padding-left:20px!important;padding-right:20px!important;max-width:100%!important}

  /* Big display type steps down proportionally */
  [style*="font-size: 92px"]{font-size:52px!important}
  [style*="font-size: 72px"]{font-size:38px!important}
  [style*="font-size: 64px"]{font-size:36px!important}
  [style*="font-size: 60px"]{font-size:34px!important}
  [style*="font-size: 48px"]{font-size:30px!important}
  [style*="font-size: 45px"]{font-size:29px!important}
  [style*="font-size: 44px"]{font-size:29px!important}
  [style*="font-size: 40px"]{font-size:28px!important}
  [style*="font-size: 38px"]{font-size:27px!important}
  [style*="font-size: 34px"]{font-size:25px!important}

  /* Generous desktop padding is unusable at 390px */
  [style*="padding: 112px"]{padding:56px 22px!important}
  [style*="padding: 96px"]{padding:52px 20px!important}
  [style*="padding: 80px"]{padding:44px 20px!important}
  [style*="padding: 44px 48px"]{padding:28px 22px!important}
  [style*="padding: 0 40px"]{padding:0 20px!important}

  /* Tap targets */
  main a[style*="padding: 12px 24px"],main button{min-height:44px}
}

@media (max-width:640px){
  .plr-hero-h1{font-size:29px!important}
  [style*="font-size: 92px"]{font-size:44px!important}
  main [style*="gap: 64px"]{gap:28px!important}
  main [style*="gap: 48px"]{gap:24px!important}
  main [style*="gap: 32px"]{gap:20px!important}
}

/* ── Flex layout rows ───────────────────────────────────
   The block above collapses CSS *grids*, but these pages also
   build two-column sections with plain `display:flex`. Those
   stayed side-by-side on mobile: headings wrapped one word per
   line and the artwork overlapped the copy. Stack them.

   Their children need resetting too — a child with
   `flex: 1 1 0%` sizes along the main axis, so once the parent
   becomes a column that child starts driving *height* instead
   of width (it ballooned one section to 1377px). Pinning the
   children to `flex:none;width:100%` restores content sizing. */
@media (max-width:900px){
  main [style*="display: flex"][style*="max-width: 1152px"],
  main [style*="display: flex"][style*="max-width: 1180px"],
  main [style*="display: flex"][style*="max-width: 1200px"],
  main [style*="display: flex"][style*="max-width: 1280px"],
  main [style*="display: flex"][style*="gap: 48px"],
  main [style*="display: flex"][style*="gap: 56px"],
  main [style*="display: flex"][style*="gap: 64px"],
  main [style*="display: flex"][style*="gap: 80px"],
  main [style*="display: flex"][style*="gap: 96px"],
  footer [style*="display: flex"][style*="max-width: 1152px"],
  footer [style*="display: flex"][style*="max-width: 1280px"],
  footer [style*="display: flex"][style*="gap: 48px"],
  footer [style*="display: flex"][style*="gap: 64px"]{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  main [style*="display: flex"][style*="max-width: 1152px"] > *,
  main [style*="display: flex"][style*="max-width: 1180px"] > *,
  main [style*="display: flex"][style*="max-width: 1200px"] > *,
  main [style*="display: flex"][style*="max-width: 1280px"] > *,
  main [style*="display: flex"][style*="gap: 48px"] > *,
  main [style*="display: flex"][style*="gap: 56px"] > *,
  main [style*="display: flex"][style*="gap: 64px"] > *,
  main [style*="display: flex"][style*="gap: 80px"] > *,
  main [style*="display: flex"][style*="gap: 96px"] > *,
  footer [style*="display: flex"][style*="max-width: 1152px"] > *,
  footer [style*="display: flex"][style*="max-width: 1280px"] > *,
  footer [style*="display: flex"][style*="gap: 48px"] > *,
  footer [style*="display: flex"][style*="gap: 64px"] > *{
    flex:none!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* The base layer only freed `main aside`; the footer's
     promo rail is a fixed 400px and ran off the screen. */
  main aside,footer aside{width:100%!important;max-width:100%!important;flex-shrink:1!important}

  /* Decorative press wall: three 170px columns don't fit a
     phone, so the cards were sliced. Show one, full width. */
  main [style*="height: 480px"] > div:nth-child(n+2){display:none!important}
  main [style*="height: 480px"] > div{width:100%!important;flex:1 1 auto!important}

  /* Desktop padding starved the footer: 60px on the footer plus
     64px on the inner card left only 142px of usable width on a
     390px screen, so every column was a one-word ladder. */
  footer{padding-left:16px!important;padding-right:16px!important}
  [style*="padding: 64px"]{padding:26px 18px!important}
  [style*="padding: 56px"]{padding:26px 18px!important}
  [style*="border-radius: 54px"]{border-radius:22px!important}

  /* The static pages (blog, faq, for-publishers, case study)
     lay out with real CSS classes, not inline styles, so the
     attribute selectors above never reached them. Their flex
     rows ran off-screen — most visibly the footer rail. */
  .footer-top,.faq-layout,.brand-content,.l-row,.hero-grid,.steps-inner,
  .why-inner,.pricing-inner,.hero-inner,.final-inner,.testimonial,
  .why-card,.blog-layout,.article-layout{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:24px!important;
  }
  .footer-top > *,.faq-layout > *,.brand-content > *,.l-row > *,.hero-grid > *,
  .steps-inner > *,.why-inner > *,.pricing-inner > *,.hero-inner > *,.final-inner > *{
    width:100%!important;
    max-width:100%!important;
    flex:none!important;
  }
}

/* ── Corrections ────────────────────────────────────────
   Two problems the rules above created or missed. */
@media (max-width:900px){
  /* 1. REGRESSION FIX. The logo marquee's groups carry an
     inline `gap: 64px`, so the stacking rule above turned a
     horizontal scroller into a vertical list — the "Trusted by
     2,000+" logos ran down the page and the row grew from 36px
     to 447px tall. Marquees scroll sideways by design and must
     never stack. These selectors are deliberately heavier than
     the stacking rule so they win on specificity, not order. */
  main [class*="marquee"] > [style*="display: flex"][style*="gap"],
  main [class*="chiprow"] > [style*="display: flex"][style*="gap"],
  main .plr-track > [style*="display: flex"][style*="gap"]{
    flex-direction:row!important;
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
  }
  main [class*="marquee"],main [class*="chiprow"],main .plr-track{flex-direction:row!important}

  /* 2. Action rows. Pairs of buttons sit in tight-gap flex rows
     that never wrapped, so the second button ("Talk to our team",
     the testimonial's case-study link) ran off the screen edge.
     Let them wrap onto a second line. */
  main [style*="display: flex"][style*="gap: 12px"],
  main [style*="display: flex"][style*="gap: 16px"],
  main [style*="display: flex"][style*="gap: 24px"]{flex-wrap:wrap!important}
}