/* Mobile sample A, "Tidy": the same sections and content as full2.html, fixed for phones.
   Everything is inside a phone-only media query, so the desktop page is unchanged. */
@media (max-width: 700px) {
  /* hero: headline on three clean lines, a smaller globe, the live numbers sitting on it */
  .hero h1 { font-size: 42px; line-height: 1.02; margin: 14px 0 14px }
  .hero h1 em { display: block }
  .hero .lead { font-size: 16px; line-height: 1.55 }
  .hero .in { padding: 96px 18px 330px }
  .hero .in > div { min-width: 0; width: 100% } /* the swipeable chip row must not widen the hero text */
  .hero > canvas, .hero > canvas.globe { height: 360px }
  .hero .ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .hero .ctas .btn { justify-content: center; padding: 13px 10px }
  /* the feature chips repeat what the rest of the page says, so phones skip them */
  .hero .chips { display: none }
  .live { bottom: 22px } .live .stat { min-width: 0; padding: 10px 14px } .live .stat .v { font-size: 19px }
  #tA { bottom: 96px }

  /* "Change nothing": smaller headline, tighter cards */
  .msec { padding: 56px 0 10px } .msec h2 { font-size: 31px; line-height: 1.08 }
  .msec .sub { font-size: 15.5px }
  .msec .a { gap: 10px } .msec .mcol { padding: 18px } .msec .mcol .big { font-size: 38px; margin: 6px 0 12px }
  .msec .rows > * { padding: 8px 12px; font-size: 13.5px }

  /* subscription calculator */
  .subsec h2 { font-size: 31px }
  /* the chart stays inside the page margin (long labels used to widen it past the screen edge) */
  .subsec > .wrap > * { min-width: 0 }
  .scols .last b { font-size: 15px }

  /* the five pieces: no empty space under each picture */
  .bento2 h2.big2 { font-size: 31px; line-height: 1.08 } .bento2 .bhead .sub { font-size: 15.5px }
  .tiles { gap: 12px }
  .tile .th h3 { font-size: 20px } .tile .th p { font-size: 14px }
  .t-co .tv { height: 300px !important } .t-va .tv { height: 280px !important }
  .t-ro .tv, .t-re .tv, .t-an .tv { height: 280px !important }

  /* routing: a shorter diagram */
  .flowsec2 .side h2 { font-size: 34px } .v2 .flow { height: 340px }

  /* "What's holding your store back?": tabs fade out at the edge so it reads as swipeable */
  .probsec h2.big2 { font-size: 31px }
  .probsec .probs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }
  /* the row keeps the page margin when it snaps, and has room for the shadow so it isn't cut off in a hard line */
  .probsec .probs { scroll-padding-inline: 18px; padding: 6px 18px 26px; margin-bottom: -12px }
  .probsec .probs button.on { box-shadow: 0 8px 16px -6px rgba(15,76,94,.35) }
  .probsec .pbig b { font-size: 40px }
  .probsec .pgrid { gap: 6px } .probsec .pgrid > * { padding: 8px 10px; font-size: 12px }

  /* apply: smaller heading, the trust row in one tidy block */
  .ea { padding: 56px 0 } .ea h2 { font-size: 38px } .ea .sub { font-size: 15.5px }
  .ea .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px } .ea .trust span { font-size: 12.5px }

  /* footer: less empty space around the big wordmark */
  .fa { padding-top: 50px } .fa .word { margin-top: 30px }
}

/* Smooth joins between sections, at every screen size.
   These sections clipped everything at their edges, which cut the card shadows off in a hard line;
   now they clip only sideways (decorations still can't widen the page) and the shadows fade out naturally. */
.hero, .msec, .subsec, .flowsec2 { overflow: visible; overflow-x: clip }
/* the hero's grey gradient now ends in the page colour instead of stopping at its bottom edge */
.hero { background: linear-gradient(180deg, rgba(246,248,250,0) 72%, #f6f8fa 100%), radial-gradient(110% 90% at 60% 0%, #ffffff 0%, #f1f4f6 60%, #e9edf0 100%) }
.hero > canvas { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent) }

/* Phones: no frosted-glass blur. Blurring what's behind the header and the notification cards has to be redone
   every frame while the globe moves underneath, which is what makes phones stutter; near-solid backgrounds look the same. */
@media (max-width: 900px) {
  .hero *, .nav, .nav *, .glass, .btn.ghost, .burger, .mmenu, .fc, .win, .filmsec .ctl button { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
  .nav.scrolled, .nav.open { background: rgba(246,248,250,.97) }
  .glass { background: rgba(255,255,255,.96) }
  .btn.ghost, .burger { background: #fff }
  .mmenu { background: #fff }
}