/* The app tiles now carry their own aspect-ratio inline (718/259, the exact
   thumbnail ratio) and sit in normal flow — no wrapper, no pinning needed. */

/* PlaceSuite — mobile/tablet layer.
   The pages are inline-styled (Design Component requirement), so these
   overrides target inline-style substrings and need !important to win.
   The DC runtime re-serializes styles through React, which inserts a space
   after every colon — so every value-bearing selector needs BOTH variants.
   data-m attributes mark the few places that must not follow the default. */

@media (max-width: 1180px) {
  [style*="px 72px"], [style*=" 0 72px"], [style*=":0 72px"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* footer: three tracks stop fitting well before the phone breakpoint */
  [data-m="footer"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    justify-items: start !important;
  }
  [data-m="footer-nav"] { justify-content: flex-start !important; gap: 28px !important; }
}

@media (max-width: 860px) {

  /* ---- page gutters ---- */
  [style*="px 72px"], [style*=" 0 72px"], [style*=":0 72px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="px 118px"] { padding-left: 20px !important; padding-right: 46px !important; }

  /* ---- vertical rhythm ---- */
  [style*="padding:84px"], [style*="padding: 84px"],
  [style*="padding:88px"], [style*="padding: 88px"],
  [style*="padding:96px"], [style*="padding: 96px"],
  [style*="padding:104px"], [style*="padding: 104px"],
  [style*="padding:112px"], [style*="padding: 112px"],
  [style*="padding:120px"], [style*="padding: 120px"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  [style*="padding:376px"], [style*="padding: 376px"] {
    padding-top: 44px !important;
    padding-bottom: 52px !important;
  }
  [style*="padding:60px 72px"], [style*="padding: 60px 72px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  [style*="padding:56px 72px"], [style*="padding: 56px 72px"] {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
  [data-m="hero"] { padding-bottom: 0 !important; }

  /* ---- grids collapse ---- */
  [style*="grid-template-columns"]:not([data-m]) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  [data-m="half"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
  [data-m="keep"] { gap: 8px !important; }

  /* setup process: one step per row, number stays with its step */
  [data-m="steps"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  [data-m="steps"] > div > div:first-child { margin-bottom: 2px !important; width: 40px !important; height: 40px !important; }

  /* why grid: two tracks, hairlines become horizontal rules */
  [data-m="whygrid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m="whygrid"] > div { padding: 28px 24px 28px 0 !important; }
  [data-m="whygrid"] > div:nth-child(2n) { padding-right: 0 !important; padding-left: 24px !important; border-right: 0 !important; }
  [data-m="whygrid"] > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.26) !important; }

  /* pricing tiers: one card per row, all three flush to the same left edge */
  [data-m="pricegrid"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  [data-m="pricegrid"] > div {
    padding: 30px 0 !important;
    border-right: 0 !important;
  }
  [data-m="pricegrid"] > div + div { border-top: 1px solid rgba(4, 6, 48, 0.16) !important; }
  [data-m="pricegrid"] > [data-m="pricecard-dark"] {
    padding: 30px 22px !important;
    border-top: 0 !important;
    margin: 8px 0 !important;
  }
  [data-m="pricegrid"] > div > div:empty { display: none !important; }

  /* bullet rows: dot stays inline with its text, never above it */
  [data-m="bullet"] { flex-wrap: nowrap !important; }
  [data-m="bullet"] > span:last-child { min-width: 0 !important; }

  /* ruled three-up text columns: stack flush, hairlines go horizontal */
  [data-m="cols"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m="cols"] > div {
    padding: 26px 0 !important;
    border-right: 0 !important;
  }
  [data-m="cols"] > div + div { border-top: 1px solid rgba(4, 6, 48, 0.16) !important; }

  /* pull-quote: the display quote mark sits on the first line of the quote */
  [data-m="quoterow"] { flex-wrap: nowrap !important; gap: 12px !important; }
  [data-m="quotemark"] { font-size: 34px !important; line-height: 1 !important; }
  [data-m="quotebody"] { padding-top: 0 !important; min-width: 0 !important; }

  /* FAQ rows: the +/- stays on the right, never wraps below the question */
  [data-m="faqrow"] { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 16px !important; }
  [data-m="faqrow"] > span { margin-top: 1px !important; }
  [data-m="rail"] { display: none !important; }
  [data-m="unstick"] { position: static !important; top: auto !important; }

  /* flex rows may wrap; inline-flex (buttons) is untouched by these selectors */
  [style*="display:flex"]:not([data-m]),
  [style*="display: flex"]:not([data-m]) { flex-wrap: wrap; }

  /* ---- nothing may be forced onto one line ---- */
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; }

  /* ---- fixed sizes become fluid ---- */
  [style*="width:520px"], [style*="width: 520px"],
  [style*="width:587px"], [style*="width: 587px"],
  [style*="width:385px"], [style*="width: 385px"],
  [style*="width:330px"], [style*="width: 330px"],
  [style*="width:317px"], [style*="width: 317px"],
  [style*="width:259px"], [style*="width: 259px"],
  [style*="width:233px"], [style*="width: 233px"],
  [style*="width:196px"], [style*="width: 196px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-m="overlap"] { margin-bottom: 0 !important; margin-top: 32px !important; }

  /* award ribbon: icon inline with the copy, dismiss pinned to the corner */
  [data-m="ribbonbar"] {
    padding: 14px 44px 14px 20px !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  [data-m="ribbontext"] {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
  }
  [data-m="ribbontext"] > svg {
    width: 17px !important;
    height: 20px !important;
    transform: translateY(1px) !important;
  }
  [data-m="ribbonclose"] {
    top: 10px !important;
    right: 8px !important;
    transform: none !important;
    width: 26px !important;
    height: 26px !important;
  }

  /* comparison tables: the label column gets the room, tick columns shrink */
  [style*="width:120px"], [style*="width: 120px"] { width: 62px !important; }
  [style*="padding:16px 24px 16px 0"], [style*="padding: 16px 24px 16px 0"] {
    padding: 13px 14px 13px 0 !important;
    font-size: 15px !important;
  }
  [style*="width:120px"][style*="text-align:center"],
  [style*="width: 120px"][style*="text-align: center"] {
    font-size: 9.5px !important;
    letter-spacing: 0.06em !important;
    line-height: 1.25 !important;
  }

  /* ---- display type ---- */
  [style*="font-size:86px"], [style*="font-size: 86px"] { font-size: 38px !important; }
  [style*="font-size:78px"], [style*="font-size: 78px"] { font-size: 36px !important; }
  [style*="font-size:72px"], [style*="font-size: 72px"] { font-size: 35px !important; }
  [style*="font-size:64px"], [style*="font-size: 64px"] { font-size: 33px !important; }
  [style*="font-size:58px"], [style*="font-size: 58px"] { font-size: 31px !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 30px !important; }
  [style*="font-size:55px"], [style*="font-size: 55px"] { font-size: 30px !important; }
  [style*="font-size:54px"], [style*="font-size: 54px"] { font-size: 30px !important; }
  [style*="font-size:52px"], [style*="font-size: 52px"] { font-size: 29px !important; }
  [style*="font-size:50px"], [style*="font-size: 50px"] { font-size: 28px !important; }
  [style*="font-size:49px"], [style*="font-size: 49px"] { font-size: 28px !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 28px !important; }
  [style*="font-size:47px"], [style*="font-size: 47px"] { font-size: 27px !important; }
  [style*="font-size:46px"], [style*="font-size: 46px"] { font-size: 27px !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 26px !important; }
  [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 26px !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 25px !important; }
  [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 24px !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 23px !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 22px !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 22px !important; }
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 21px !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 20px !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 20px !important; }
  [style*="font-size:24px"], [style*="font-size: 24px"] { font-size: 19px !important; }
  [style*="font-size:23px"], [style*="font-size: 23px"] { font-size: 19px !important; }
  [style*="font-size:22px"], [style*="font-size: 22px"] { font-size: 18px !important; }
  [style*="font-size:21px"], [style*="font-size: 21px"] { font-size: 18px !important; }
  [style*="font-size:20px"], [style*="font-size: 20px"] { font-size: 17px !important; }
  [style*="font-size:19px"], [style*="font-size: 19px"] { font-size: 16px !important; }
  [style*="font-size:18px"], [style*="font-size: 18px"] { font-size: 16px !important; }

  /* ---- tall frames ---- */
  [style*="height:560px"], [style*="height: 560px"] { height: 300px !important; }
  [style*="height:420px"], [style*="height: 420px"] { height: 220px !important; }
  [style*="height:300px"], [style*="height: 300px"],
  [style*="height:290px"], [style*="height: 290px"] { height: 200px !important; }
  [style*="height:180px"], [style*="height: 180px"] { height: 120px !important; }
  [style*="height:950px"], [style*="height: 950px"] { height: 480px !important; }
  [style*="height:720px"], [style*="height: 720px"] { height: 620px !important; }
  [style*="height:170px"], [style*="height: 170px"] { height: 120px !important; }
}

@media (max-width: 560px) {
  [style*="grid-template-columns"][data-m="half"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-m="whygrid"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m="whygrid"] > div,
  [data-m="whygrid"] > div:nth-child(2n) {
    padding: 26px 0 !important;
    border-right: 0 !important;
  }
  [data-m="whygrid"] > div + div { border-top: 1px solid rgba(255, 255, 255, 0.26) !important; }
  [style*="padding:44px"], [style*="padding: 44px"],
  [style*="padding:48px"], [style*="padding: 48px"] { padding: 24px !important; }
  [style*="padding:30px 32px"], [style*="padding: 30px 32px"],
  [style*="padding:32px 36px"], [style*="padding: 32px 36px"] { padding: 22px 20px !important; }
  [style*="padding:28px 32px 34px"], [style*="padding: 28px 32px 34px"] { padding: 20px !important; }
  [style*="padding:44px 40px"], [style*="padding: 44px 40px"] { padding: 26px 22px !important; }
  [style*="gap:56px"], [style*="gap: 56px"],
  [style*="gap:64px"], [style*="gap: 64px"],
  [style*="gap:72px"], [style*="gap: 72px"] { gap: 28px !important; }
}