/* Responsive layer for every case-study page (linked by polish.py into each page's <head>).
   The pages were drawn at 1280px, much of it in inline styles, so below 1280px this file
   loosens fixed widths, collapses grids, scales type and stacks rows. Desktop (>= 1280px) is
   untouched. Breakpoints: 1100px (small laptop / tablet landscape), 820px (tablet), 560px (phone). */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video { max-width: 100%; }

/* The page container follows the screen instead of a fixed 1280px */
.page { width: auto !important; max-width: 1280px; }
.page > div[style*="width: 1280px"], .page > div[id^="part-"] { width: auto !important; max-width: 1280px; min-height: 0 !important; }

/* ============ <= 1100px ============ */
@media (max-width: 1100px) {
  /* gutters */
  [style*="padding"][style*=" 56px"], [style*="padding: 56px"] { padding-left: 32px !important; padding-right: 32px !important; }
  [style*="margin"][style*=" 56px"] { margin-left: 32px !important; margin-right: 32px !important; }
  .lead, .arrows, .pos, .pays, .plans, .gs, .bento, .gp-icons, .gp-pays, .steps, .split, .band, .wide, .grow, .h-panel, .h-tabs { padding-left: 32px; padding-right: 32px; }
  .steps, .split, .band, .bento, .gp-icons { margin-left: 32px !important; margin-right: 32px !important; padding-left: 0; padding-right: 0; }
  .track-wrap { padding-left: 32px !important; }
  .dark { padding-left: 32px !important; padding-right: 32px !important; }
  .cmp { margin-left: 32px !important; margin-right: 32px !important; width: calc(100% - 64px) !important; }

  /* type */
  h1[style*="font-size: 74px"], [style*="font-size: 74px"] { font-size: 56px !important; }
  [style*="font-size: 96px"], [style*="font-size: 88px"] { font-size: 68px !important; }
  [style*="font-size: 210px"] { font-size: 140px !important; }
  [style*="font-size: 150px"] { font-size: 110px !important; }
  .lead h2, [style*="font-size: 64px"], [style*="font-size: 62px"] { font-size: 50px !important; }

  /* hero: picture and text side by side, smaller picture */
  [style*="display: flex"][style*="gap: 70px"] { gap: 40px !important; }
  [style*="width: 620px"][style*="height: 620px"], [style*="width: 620px"][style*="height: 680px"] { width: 46% !important; height: auto !important; aspect-ratio: 1 / 1; }

  /* grids */
  .perks { gap: 50px 28px !important; }
  .perk img { height: 340px !important; }
  .stats b, [style*="font-size: 76px"] { font-size: 56px !important; }
  .always { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 40px !important; }
  .gp-icons { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; row-gap: 30px !important; }
  .gp-pays { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .plans { gap: 16px !important; }
  .gs { grid-template-columns: minmax(0, 1fr) 460px !important; gap: 40px !important; }

  /* steps slider */
  .steps { height: auto !important; min-height: 560px; }
  .steps-pic { width: 46% !important; }
  .steps-pic img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; position: relative !important; }
  .steps-txt { padding: 50px 0 50px 50px !important; }

  /* footer: 5 link columns become 3 */
  div[style*="#C10016"] > div[style*="repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 36px !important; }
  img[style*="width: 1180px"] { width: calc(100% - 64px) !important; height: auto !important; margin-left: 32px !important; }

  /* home */
  .hero h1 { font-size: 54px !important; }
  .hcard { width: 340px !important; height: 427px !important; }
  .hpay a { width: 360px !important; height: 540px !important; }
  .story { width: min(935px, 86vw) !important; grid-template-columns: 1fr 320px !important; }
  .story > img { width: 320px !important; min-height: 380px !important; }
  .tp { height: 560px !important; }
  .tp .o { padding: 48px !important; }
  .hai .grid { gap: 14px !important; }
  .hai b { font-size: 34px !important; }
  .gp { height: 620px !important; }
  .gp h2 { font-size: 46px !important; }
}

/* ============ <= 820px (tablet portrait) ============ */
@media (max-width: 820px) {
  [style*="padding"][style*=" 56px"], [style*="padding: 56px"] { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="margin"][style*=" 56px"] { margin-left: 20px !important; margin-right: 20px !important; }
  .lead, .arrows, .pos, .pays, .plans, .gs, .gp-pays, .wide { padding-left: 24px !important; padding-right: 24px !important; }
  .steps, .split, .band, .bento, .gp-icons { margin-left: 20px !important; margin-right: 20px !important; }
  .track-wrap { padding-left: 24px !important; }
  .dark { padding: 80px 24px 90px !important; gap: 56px !important; }
  .w { padding: 0 24px !important; }

  /* every two-column heading row stacks */
  .lead { grid-template-columns: 1fr !important; gap: 18px !important; }
  .lead h2, [style*="font-size: 64px"], [style*="font-size: 62px"], .hd2 { font-size: 40px !important; }
  .lead p, [style*="font-size: 25px"] { font-size: 19px !important; }
  [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"]:not(.pays):not(.perks), [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; }

  /* hero stacks: text first, picture below */
  [style*="display: flex"][style*="gap: 70px"] { flex-direction: column-reverse !important; align-items: stretch !important; gap: 32px !important; }
  [style*="width: 620px"] { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; }
  h1[style*="font-size: 74px"], [style*="font-size: 74px"] { font-size: 46px !important; }
  [style*="font-size: 96px"], [style*="font-size: 88px"] { font-size: 52px !important; }
  [style*="font-size: 56px"] { font-size: 40px !important; }
  [style*="font-size: 52px"], [style*="font-size: 54px"], [style*="font-size: 50px"] { font-size: 36px !important; }
  [style*="font-size: 210px"] { font-size: 96px !important; }
  [style*="font-size: 150px"] { font-size: 80px !important; }
  [style*="font-size: 44px"], [style*="font-size: 48px"] { font-size: 32px !important; }

  /* fixed-size blocks become fluid */
  [style*="width: 660px"], [style*="width: 980px"] { width: 84vw !important; height: auto !important; }
  [style*="width: 980px"] > div { flex-direction: column !important; gap: 24px !important; }
  [style*="width: 980px"] img[style*="width: 360px"] { width: 100% !important; height: 240px !important; }
  [style*="height: 657px"], .band { height: auto !important; aspect-ratio: 16 / 10; }
  [style*="height: 900px"] { height: auto !important; min-height: 640px; }
  [style*="height: 520px"]:not(img) { height: auto !important; min-height: 0 !important; }
  [style*="height: 520px"] > [style*="position: absolute"][style*="left: 84px"],
  [style*="height: 520px"] > [style*="position: absolute"][style*="left: 70px"] { position: relative !important; left: auto !important; top: auto !important; padding: 44px 28px 28px; }
  [style*="height: 520px"] > img[style*="position: absolute"] { position: relative !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; display: block; }
  [style*="height: 560px"]:not(img):not(.pay) { height: auto !important; }
  [style*="height: 460px"]:not(.pay) { height: 300px !important; }

  /* grids of cards */
  .stats, [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"], [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 36px !important; }
  .perks, .perks.three { grid-template-columns: 1fr !important; gap: 48px !important; }
  .perk img, .perks.three .perk img { height: 300px !important; }
  .perk div { padding: 22px 4px 0 !important; }
  .pays { grid-template-columns: 1fr !important; }
  .pay, .pay.full { grid-column: auto !important; height: 360px !important; }
  .over b { font-size: 28px !important; }
  .split { grid-template-columns: 1fr !important; }
  .split img { height: 380px !important; }
  .pos { flex-wrap: wrap !important; justify-content: center !important; gap: 28px 40px !important; padding-top: 60px !important; padding-bottom: 60px !important; }
  .pos img, .pos span { height: 34px !important; }
  .pos span { font-size: 28px !important; }
  .plans { grid-template-columns: 1fr !important; max-width: 520px; margin: 0 auto; }
  .always { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cmp { font-size: 14px !important; }
  .cmp th, .cmp td { padding: 14px 6px !important; }
  .cmp td { width: auto !important; }
  .cmp thead th { font-size: 17px !important; }
  .gs { grid-template-columns: 1fr !important; }
  .gs h1 { font-size: 48px !important; }
  .gp-form { grid-template-columns: 1fr !important; }
  .gp-form .txt { padding: 70px 24px !important; }
  .gp-form h2 { font-size: 38px !important; }
  .gp-form > img { min-height: 360px !important; }
  .gp-hero h1 { font-size: 52px !important; }
  .gp-icons { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .gp-pays { grid-template-columns: 1fr 1fr !important; }
  .bento { grid-template-columns: 1fr !important; }
  .bento article, .bento article.wide, .bento article.full { grid-column: auto !important; }
  .bento img, .bento article.wide img, .bento article.full img { height: 300px !important; }
  .testi { width: 84vw !important; }
  .testi-big { font-size: 38px !important; }
  .testi-row { flex-direction: column !important; gap: 18px !important; }

  /* steps slider stacks: picture on top */
  .steps { flex-direction: column-reverse !important; border-radius: 32px !important; min-height: 0; }
  .steps-pic { width: 100% !important; display: flex; justify-content: center; padding-top: 24px; }
  .steps-pic img { width: min(420px, 90%) !important; }
  .steps-txt { padding: 28px 28px 36px !important; }
  .steps h3 { font-size: 32px !important; }
  .steps p { min-height: 0 !important; }

  /* cards in sideways carousels keep their swipe, a little smaller */
  .feat, .feat img, .card, .gp-card { width: 280px !important; }
  .feat img { height: 510px !important; }
  .card, .gp-card { height: 510px !important; }

  /* footer */
  div[style*="#C10016"] > div[style*="repeat(5"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding-top: 64px !important; }
  div[style*="#C10016"] > div[style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  div[style*="#C10016"] > div[style*="display: flex; gap: 28px"], div[style*="#C10016"] > div[style*="display: flex; gap: 28px;"] { flex-wrap: wrap !important; gap: 14px 22px !important; }
  img[style*="width: 1180px"] { width: calc(100% - 48px) !important; margin-left: 24px !important; }

  /* home */
  .hero { padding-top: 64px !important; }
  .hero h1 { font-size: 44px !important; }
  .hero p { font-size: 17px !important; }
  .hcards { margin-top: 48px !important; }
  .hcard { width: 280px !important; height: 352px !important; }
  .hpay { padding: 90px 0 100px !important; }
  .hpay .grid { margin-top: 48px !important; padding-left: 24px !important; }
  .hpay a { width: 300px !important; height: 460px !important; }
  .logos { padding: 80px 0 !important; }
  .logos img { height: 52px !important; margin-right: 48px !important; }
  .stories { padding: 80px 0 90px !important; }
  .strack > div { padding-left: 24px !important; }
  .story { grid-template-columns: 1fr !important; width: 84vw !important; padding: 28px !important; gap: 24px !important; min-height: 0 !important; }
  .story > img { width: 100% !important; min-height: 0 !important; height: 260px !important; order: -1; }
  .story blockquote { font-size: 22px !important; }
  .hai { padding: 90px 0 100px !important; }
  .hai .grid { grid-template-columns: 1fr !important; max-width: 480px; margin-left: auto; margin-right: auto; }
  .tabs { padding-top: 90px !important; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 22px !important; margin-top: 40px !important; }
  .tp { height: 520px !important; }
  .tp h3 { font-size: 34px !important; }
  .tp .o { padding: 32px 28px !important; }
  .tp .st { flex-wrap: wrap; gap: 20px 32px !important; }
  .partners { padding: 90px 0 !important; margin-top: 90px !important; }
  .partners .mq > div > img, .partners .mq > div > div { width: 190px !important; height: 111px !important; }
  .gp { height: auto !important; }
  .gp > img { position: relative !important; height: 360px !important; object-position: 70% center; }
  .gp .w { height: auto !important; padding-top: 40px !important; padding-bottom: 70px !important; }
  .gp h2 { font-size: 38px !important; }

  /* legal pages */
  .lg { padding: 50px 24px 100px !important; }
  .lg h1 { font-size: 52px !important; }
}

/* ============ <= 560px (phone) ============ */
@media (max-width: 560px) {
  [style*="padding"][style*=" 56px"], [style*="padding: 56px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="margin"][style*=" 56px"] { margin-left: 16px !important; margin-right: 16px !important; }
  .lead, .arrows, .pos, .pays, .plans, .gs, .gp-pays, .wide { padding-left: 20px !important; padding-right: 20px !important; }
  .steps, .split, .band, .bento, .gp-icons { margin-left: 16px !important; margin-right: 16px !important; }
  .track-wrap, .strack > div, .hpay .grid { padding-left: 20px !important; }
  .dark { padding: 64px 20px 72px !important; }
  .w { padding: 0 20px !important; }

  .lead h2, [style*="font-size: 64px"], [style*="font-size: 62px"], .hd2 { font-size: 32px !important; }
  h1[style*="font-size: 74px"], [style*="font-size: 74px"] { font-size: 38px !important; }
  [style*="font-size: 96px"], [style*="font-size: 88px"] { font-size: 40px !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 54px"], [style*="font-size: 50px"] { font-size: 32px !important; }
  [style*="font-size: 44px"], [style*="font-size: 48px"] { font-size: 28px !important; }
  [style*="font-size: 40px"]:not(img) { font-size: 28px !important; }
  [style*="font-size: 210px"] { font-size: 64px !important; }
  [style*="font-size: 150px"] { font-size: 60px !important; }
  .stats b, [style*="font-size: 76px"] { font-size: 40px !important; }

  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"], [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 18px !important; }
  [style*="width: 660px"], [style*="width: 980px"], .testi, .story { width: 86vw !important; }
  .testi { padding: 26px 22px 30px !important; }
  .testi-big { font-size: 30px !important; }
  .testi blockquote { font-size: 16px !important; }
  .pay, .pay.full { height: 280px !important; }
  .split img { height: 300px !important; }
  .perk img, .perks.three .perk img { height: 230px !important; }
  .perk h3 { font-size: 28px !important; }
  .perk p { font-size: 17px !important; }
  .steps h3 { font-size: 28px !important; }
  .steps p { font-size: 17px !important; }
  .steps-ctl { flex-wrap: wrap; }
  .dots { margin-left: 0 !important; width: 100%; margin-top: 8px; }
  .feat, .feat img, .card, .gp-card { width: 250px !important; }
  .feat img { height: 450px !important; }
  .card, .gp-card { height: 450px !important; }
  .arrow { width: 48px !important; height: 48px !important; }
  .always { grid-template-columns: 1fr !important; }
  .gp-icons { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px 10px !important; }
  .gp-icons img { width: 52px !important; height: 52px !important; }
  .gp-icons div { font-size: 13px !important; }
  .gp-pays { grid-template-columns: 1fr !important; }
  .gp-hero h1 { font-size: 40px !important; }
  .gp-form form, .gs-form { grid-template-columns: 1fr !important; padding: 26px 20px !important; }
  .gp-form .full, .gp-form button, .gs-form .full, .gs-form p, .gs-form button { grid-column: auto !important; }
  .gs h1 { font-size: 38px !important; }
  .cmp { margin-left: 12px !important; margin-right: 12px !important; width: calc(100% - 24px) !important; font-size: 13px !important; }
  .cmp thead small { font-size: 12px !important; }
  .plan .price { font-size: 52px !important; }
  .lg h1 { font-size: 40px !important; }
  .lg h2 { font-size: 26px !important; }

  div[style*="#C10016"] > div[style*="repeat(5"] { gap: 30px 16px !important; }
  div[style*="#C10016"] [style*="font-size: 40px"], div[style*="#C10016"] [style*="font-size: 36px"] { font-size: 28px !important; }

  /* home */
  .hero { padding-top: 48px !important; }
  .hero h1 { font-size: 38px !important; }
  .hero .w > div[style*="display: flex"] { flex-direction: column; align-items: stretch; }
  .hcard { width: 230px !important; height: 289px !important; }
  .hpay a { width: 260px !important; height: 400px !important; }
  .hpay b { font-size: 24px !important; }
  .tl { grid-template-columns: 1fr 1fr !important; }
  .tl button { font-size: 15px !important; }
  .tp { height: 460px !important; }
  .tp h3 { font-size: 28px !important; }
  .grow div { padding: 36px 24px !important; }
  .grow b { font-size: 30px !important; }
  .partners .mq > div > img, .partners .mq > div > div { width: 160px !important; height: 94px !important; }
  .gp > img { height: 260px !important; }
  .gp h2 { font-size: 34px !important; }
}

/* Phones in landscape and small tablets: the pinned ask box gets out of the way of content */
@media (max-width: 820px) {
  .ask { bottom: 12px !important; padding: 10px !important; border-radius: 16px !important; }
  .ask .chip { font-size: 14px !important; padding: 9px 13px !important; }
  .ask .chip + .chip { display: none !important; }
  body { padding-bottom: 150px !important; }
}

/* ---- Fixes found by the second audit ---- */
/* Grid columns may shrink below their content (a marquee inside must not widen the column) */
.gs > *, .gp-form > *, .split > *, .perks > *, .lead > *, [style*="display: grid"] > * { min-width: 0; }
/* The big footer wordmark: no inline padding eating the width */
img[style*="width: 1180px"] { padding-left: 0 !important; padding-right: 0 !important; box-sizing: content-box; }
@media (max-width: 1100px) {
  /* Page 15 step slider (inline styles) */
  [style*="border-radius: 60px"][style*="display: flex"] { height: auto !important; min-height: 560px; }
  [style*="border-radius: 60px"] > [style*="width: 600px"] { width: 46% !important; }
  [style*="border-radius: 60px"] img[style*="width: 600px"] { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
  [style*="border-radius: 60px"] > div[style*="flex: 1"] { padding: 50px 0 50px 50px !important; }
  /* Page 15b: payment cards row swipes sideways; POS row wraps */
  [style*="display: flex; gap: 18px; padding: 22px 0 0"] { overflow-x: auto; scrollbar-width: none; padding-right: 24px !important; }
  [style*="display: flex; gap: 18px; padding: 22px 0 0"]::-webkit-scrollbar { display: none; }
  div[style*="justify-content: space-between"][style*="padding: 90px 56px 100px"] { flex-wrap: wrap !important; justify-content: center !important; gap: 28px 44px !important; }
}
@media (max-width: 820px) {
  [style*="border-radius: 60px"][style*="display: flex"] { flex-direction: column-reverse !important; border-radius: 32px !important; min-height: 0; }
  [style*="border-radius: 60px"] > [style*="width: 600px"] { width: 100% !important; display: flex; justify-content: center; padding-top: 24px; }
  [style*="border-radius: 60px"] img[style*="width: 600px"] { width: min(420px, 90%) !important; }
  [style*="border-radius: 60px"] > div[style*="flex: 1"] { padding: 28px 28px 36px !important; }
  [style*="border-radius: 60px"] [style*="min-height: 84px"] { min-height: 0 !important; }
  [style*="display: flex; gap: 18px; padding: 22px 0 0"] > div { width: 280px !important; height: 510px !important; }
  div[style*="justify-content: space-between"][style*="padding: 90px 56px 100px"] img, div[style*="justify-content: space-between"][style*="padding: 90px 56px 100px"] span { height: 34px !important; }
  div[style*="justify-content: space-between"][style*="padding: 90px 56px 100px"] span { font-size: 28px !important; height: auto !important; }
}
@media (max-width: 560px) {
  [style*="display: flex; gap: 18px; padding: 22px 0 0"] > div { width: 250px !important; height: 450px !important; }
}

/* Footer wordmark: always inside the gutters, at every width below 1280px */
@media (max-width: 1279px) {
  img[style*="width: 1180px"] { width: calc(100% - 100px) !important; max-width: none !important; height: auto !important; margin-left: 50px !important; margin-right: 0 !important; }
}
@media (max-width: 1100px) {
  img[style*="width: 1180px"] { width: calc(100% - 64px) !important; margin-left: 32px !important; }
  .pos { flex-wrap: wrap !important; justify-content: center !important; gap: 28px 44px !important; }
}
@media (max-width: 820px) { img[style*="width: 1180px"] { width: calc(100% - 48px) !important; margin-left: 24px !important; } }
@media (max-width: 560px) { img[style*="width: 1180px"] { width: calc(100% - 40px) !important; margin-left: 20px !important; } }
/* (more specific than the gutter rules, which would add side padding to it) */
img[style*="width: 1180px"][style*="padding"] { padding-left: 0 !important; padding-right: 0 !important; }

/* ---- Fixes from the phone screenshots (round 1) ---- */
@media (max-width: 820px) {
  /* hero picture: full width (as specific as the tablet rule it replaces) */
  [style*="width: 620px"][style*="height: 620px"], [style*="width: 620px"][style*="height: 680px"] { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; }
  /* testimonial cards drawn inline (page 15): logo above the quote */
  [style*="width: 660px"] > div[style*="display: flex"] { flex-direction: column !important; gap: 16px !important; }
  [style*="width: 660px"] > div[style*="display: flex"] > img { width: 130px !important; height: 56px !important; }
  [style*="width: 660px"] { padding: 26px 22px 30px !important; gap: 22px !important; }
}
@media (max-width: 560px) {
  /* 4 stats stay two by two on phones */
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 18px !important; }
}
@media (max-width: 820px) {
  /* cards in a swipe row keep their own height (no empty space under short quotes) */
  [data-track] { align-items: flex-start !important; }
}
@media (max-width: 560px) {
  /* 4-column grids of cards (Get started benefits, "more features") go to one column; only figure rows stay two by two */
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"][style*="margin"] { grid-template-columns: 1fr !important; max-width: 420px; }
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"][style*="margin"] article img { height: 240px !important; }
}
/* Step dots: 10px to see, a finger-sized area to tap */
button[aria-label^="Step "] { position: relative; }
button[aria-label^="Step "]::after { content: ""; position: absolute; inset: -14px -5px; }
@media (max-width: 820px) {
  /* small badges stay readable */
  [style*="font-size: 10px"] { font-size: 11px !important; }
}