/* ValueText site — responsive layer. Pages are authored inline for desktop (≥1025px);
   these rules adapt them for tablet (≤1024) and phone (≤768). Attribute selectors read
   the inline style string; data-m hooks mark exceptions per element:
   data-m~="hdr"      keep sticky (header wrapper only)
   data-m~="hide"     hide on phone            data-m~="hide-t"  hide on tablet and phone
   data-m~="col"      flex row -> column on phone
   data-m~="wrap"     flex row wraps on phone
   data-m~="scroll"   horizontal scroll container on phone
   data-m~="center"   center text and content on phone
   data-m~="left"     left-align on phone
   data-m~="full"     width: 100% on phone (buttons, cards)
   data-m~="tight"    reduce padding on phone (cards / panels)
   data-m~="static"   absolute -> static flow on phone
   data-m~="stack"    any grid -> one column on phone */

/* phone-only duplicates (marquee copies, phone art, phone lists) are hidden everywhere else */
[data-m~="dup"] { display: none !important; }
@keyframes vt-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* header wrapper: never force a 1280px floor (caused sideways scroll 1025-1279px) */
[data-m~="hdr"][style*="min-width: 1280px"], [style*="min-width: 1280px"] { min-width: 0 !important; }

@media (max-width: 1024px) {
  section, footer, main { overflow-x: clip; }
  [data-m~="tabs"] { top: 76px !important; }
  /* docs layout: breadcrumb, title, standfirst, date, then "On this page" (not sticky), then the body, then the docs tree */
  body [style*="grid-template-columns: max(328px"] { display: flex !important; flex-direction: column; }
  body [style*="grid-template-columns: max(328px"] > main { display: contents !important; }
  body [style*="grid-template-columns: max(328px"] { padding-inline: 48px; box-sizing: border-box; }
  body [style*="grid-template-columns: max(328px"] > main > * { order: 2; min-width: 0; max-width: 100%; box-sizing: border-box; margin-inline: 0 !important; }
  body [style*="grid-template-columns: max(328px"] > main > :nth-child(-n + 4) { order: 0; }
  body [style*="grid-template-columns: max(328px"] > main > :nth-child(1) { margin-top: 40px !important; flex-wrap: wrap; row-gap: 4px; }
  body [style*="grid-template-columns: max(328px"] > main > :nth-child(n + 2) { margin-top: 24px !important; }
  body [style*="grid-template-columns: max(328px"] > main > h2 { margin-top: 40px !important; }
  body [style*="grid-template-columns: max(328px"] > main > :last-child { margin-bottom: 96px; }
  body [style*="grid-template-columns: max(328px"] > aside:last-child { order: 1; padding: 28px 0 !important; margin-top: 24px; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
  body [style*="grid-template-columns: max(328px"] > aside:last-child > div { position: static !important; }
  body [style*="grid-template-columns: max(328px"] > aside:first-child { order: 3; border-right: 0 !important; border-top: 1px solid #ececec; padding: 32px 0 56px !important; }
  body [style*="grid-template-columns: max(328px"] > aside:first-child > div { max-height: none !important; overflow: visible !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  body [style*="grid-template-columns: max(328px"] > aside:first-child > div > label { grid-column: 1 / -1; }
  [style*="position: sticky"]:not([data-m~="hdr"]) { position: static !important; top: auto !important; }
  [data-m~="hide-t"] { display: none !important; }
  [style*="grid-template-columns: 280px 760px"],
  [style*="grid-template-columns: 280px minmax"],
  [style*="grid-template-columns: max(328px"],
  [style*="grid-template-columns: 460px minmax"],
  [style*="grid-template-columns: 420px minmax"],
  [style*="grid-template-columns: 400px minmax"],
  [style*="grid-template-columns: minmax(0, 1fr) 420px"],
  [style*="grid-template-columns: minmax(0, 1fr) 380px"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(7"]:not([data-m~="keep"]) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  /* BLANKET TABLET POLICY: any grid with three or more columns becomes two. */
  body [style*="1fr) minmax(0"][style*="1fr) minmax(0"]:not([data-m~="stack-t"]),
  body [style*="grid-template-columns: repeat(3,"]:not([data-m~="nolines"]),
  body [style*="grid-template-columns: repeat(4,"]:not([data-m~="steps"]):not([data-m~="keep"]),
  body [style*="grid-template-columns: repeat(5, 1fr)"]:not([data-m~="logos"]),
  body [style*="grid-template-columns: repeat(6,"],
  body [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 2"],
  body [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 3"],
  body [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 4"],
  body [style*="1fr) 56px minmax"],
  body [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body [style*="1fr) 56px minmax"] > span[style*="font-size: 22px"],
  body [style*="1fr) 56px minmax"] > span[style*="font-size: 19px"] { display: none !important; }
  body [style*="1fr) 56px minmax"] { gap: 20px !important; align-items: stretch !important; }
  body [style*="1fr) 56px minmax"] > div[style*="min-height"] { min-height: 0 !important; }
  /* mono eyebrows stay on one line */
  body span[style*="text-transform: uppercase"][style*="letter-spacing: 0.1"] { white-space: nowrap; max-width: 100%; }
  body [style*="grid-template-columns: 240px"] span[style*="text-transform: uppercase"] { white-space: normal; }
  body [data-m~="grid2"] { flex-wrap: wrap; }
  body [data-m~="grid2"] > a { flex: none; white-space: normal !important; }
  body a[href^="http"], body a[style*="grid-template-columns: 300px minmax(0px, 1fr) 24px"] > span { overflow-wrap: anywhere; }
  /* tablet: left-align hook for heading rows that stack at tablet */
  body [data-m~="left-t"] { text-align: left !important; align-items: flex-start !important; align-self: flex-start !important; }
  /* tablet: large display headings scale with the viewport */
  body h1[style*="font-size: 64px"],
  /* tablet: large display headings scale with the viewport */
  body h1[style*="font-size: 46px"] { font-size: clamp(40px, 6.5vw, 64px) !important; }
  /* tables with three or more columns scroll instead of squeezing */
  body div:has(> table thead th:nth-child(3)) { overflow-x: auto !important; max-width: 100%; }
  body table:has(thead th:nth-child(3)) { min-width: 560px; }
  body [style*="1fr) 56px minmax"] > div > span[style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  /* step grids wrapped to two rows: each step carries its own top rule so dots always sit on a line */
  body [data-m~="steps"]:not([data-m~="steps-a"]):not([data-m~="steps-b"]) { border-top: 0 !important; row-gap: 40px !important; }
  body [data-m~="steps"]:not([data-m~="steps-a"]):not([data-m~="steps-b"]) > div { border-top: 1px solid #121212; }
  /* demo: chapters as a horizontal scrolling strip above the player (tablet and phone) */
  body [data-m~="chapters"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  body [data-m~="chapters-rail"] { flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  body [data-m~="chapters-rail"] > span:first-child { display: none !important; }
  body [data-m~="chapters-rail"] > button { flex: none; display: flex !important; align-items: center !important; gap: 8px !important; padding: 10px 14px !important; border: 1px solid #e3e3e6 !important; border-radius: 999px; white-space: nowrap; font-size: 15px !important; grid-template-columns: none !important; }
  body [data-m~="chapters-rail"] > button > span { white-space: nowrap; }
  body [data-m~="chapters-rail"] > button[style*="border-left: 2px solid rgb(255, 90, 141)"], body [data-m~="chapters-rail"] > button[style*="border-left: 2px solid #ff5a8d"] { border-color: #121212 !important; background: #121212; color: #fff !important; }
  body [data-m~="chapters-rail"] > button[style*="border-left: 2px solid rgb(255, 90, 141)"] > span:first-child, body [data-m~="chapters-rail"] > button[style*="border-left: 2px solid #ff5a8d"] > span:first-child { color: #ff5a8d !important; }
  /* FAQ rows: number, then category above the title, plus button right */
  body [data-m~="faqrow"] { grid-template-columns: 32px minmax(0, 1fr) 28px !important; gap: 14px !important; padding: 20px 0 !important; }
  body [data-m~="faqrow"] > h2 { grid-column: 2; grid-row: 2; font-size: 18px !important; }
  body [data-m~="faqrow"] > span:nth-child(3) { grid-column: 2; grid-row: 1; white-space: normal !important; }
  body [data-m~="faqrow"] > span:first-child { grid-row: 1; align-self: center; }
  body [data-m~="faqrow"] > span:nth-child(3) { align-self: center; }
  body [data-m~="faqrow"] > span:last-child { grid-row: 1; align-self: center; }
  body [data-m~="faqrow"] { row-gap: 6px !important; }
  body [data-m~="faqrow"] + div p { padding: 0 0 24px 46px !important; margin-top: -8px; }
  body [data-m~="faqrow"] { justify-content: start !important; justify-items: start !important; grid-template-columns: 32px minmax(0, 1fr) 28px !important; }
  body [data-m~="faqrow"] > span:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; }
  body [data-m~="faqrow"] > h2 { grid-column: 2 !important; grid-row: 2 !important; }
  body [data-m~="faqrow"] > span:last-child { grid-column: 3 !important; grid-row: 1 !important; }
  body [data-m~="faqrow"] > * { text-align: left !important; justify-self: start; }
  body [data-m~="faqrow"] > h2 { width: 100%; }
  body [data-m~="faqrow"] > span:last-child { justify-self: end; }
  /* affiliate You / Us panel: stacked, no internal gap */
  body [data-m~="youus"] { gap: 0 !important; }
  body [data-m~="youus"] > div { border-right: 0 !important; padding: 32px 24px !important; }
  body [data-m~="youus"] > div:first-child { border-bottom: 1px solid #ececec; }
  body [data-m~="youus"] [style*="grid-template-columns: 120px"], body [data-m~="youus"] [style*="grid-template-columns: 110px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  /* article frame (blog, about, legal, best-apps, WhatsApp pricing): title first, then the rail (contents), then the body */
  body section[style*="grid-template-columns: 280px"] { display: flex !important; flex-direction: column; gap: 40px !important; }
  body section[style*="grid-template-columns: 280px"] > article, body section[style*="grid-template-columns: 280px"] > main { display: contents !important; }
  body section[style*="grid-template-columns: 280px"] > article > *, body section[style*="grid-template-columns: 280px"] > main > * { order: 2; min-width: 0; max-width: 100%; box-sizing: border-box; }
  body section[style*="grid-template-columns: 280px"] > article > header, body section[style*="grid-template-columns: 280px"] > main > header { order: 0; }
  body section[style*="grid-template-columns: 280px"] > article > [style*="overflow-x: auto"], body section[style*="grid-template-columns: 280px"] > article > table { max-width: 100%; }
  body section[style*="grid-template-columns: 280px"] > aside { order: 1; padding: 28px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; min-width: 0; }
  /* FAQ topic filter: horizontal scrolling tabs above the list */
  body [data-m~="faqside"] { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  body [data-m~="faqside"] > span:first-child { display: none !important; }
  body [data-m~="faqside"] > button { flex: none; border-radius: 999px !important; padding: 10px 16px !important; font-size: 15px !important; border: 1px solid #e3e3e6; white-space: nowrap; gap: 10px !important; flex-wrap: nowrap !important; }
  body [data-m~="faqside"] > button > span { white-space: nowrap; }
  body [data-m~="faqcard"] { display: none !important; }
  section#questions { gap: 32px !important; }
  /* contact link row: 2 x 2 on tablet too, links never break mid-word */
  body [data-m~="grid2"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 20px !important; }
  body [data-m~="grid2"] > a { white-space: nowrap; }
  /* tab panels: intro paragraph above its list on tablet */
  body [data-wd-panel] > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; padding-left: 40px !important; }
  body [data-wd-panel] > div[style*="grid-template-columns"] > p { max-width: 40ch !important; }
  /* every multi-column grid keeps a gap once it wraps */
  body [style*="grid-template-columns"][style*="gap: 0;"], body [style*="grid-template-columns"][style*="gap: 0px"] { gap: 20px !important; }
  /* heading + intro pairs and 1.2fr/1fr splits stack on tablet so headlines keep their width */
  body [style*="grid-template-columns"][style*="1fr) minmax(0"][style*="align-items: end"]:not([data-m~="keep"]),
  body [style*="grid-template-columns"][style*="1fr) minmax(0"][style*="align-items: center"]:not([data-m~="faqrow"]):not([data-m~="keep"]),
  body [style*="grid-template-columns"][style*="1.2fr) minmax(0"]:not([data-m~="keep"]),
  body [style*="grid-template-columns"][style*="1.25fr) minmax(0"]:not([data-m~="keep"]),
  body [style*="grid-template-columns"][style*="1.3fr) minmax(0"],
  body [style*="grid-template-columns"][style*="1.4fr) minmax(0"],
  body [style*="grid-template-columns"][style*="1fr) auto"][style*="align-items"]:not([data-m~="keep"]) { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 32px !important; }
  body [style*="grid-template-columns"][style*="1fr) auto"] > a { justify-self: start; }
  body [style*="grid-template-columns"] > div[style*="border-left: 1px solid #dcdcdc"] { border-left: 0 !important; }
  body [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: baseline"] { flex-wrap: wrap; gap: 6px 12px !important; }
  /* card grids: at most two per row on tablet */
  [style*="grid-template-columns: repeat(3, 1fr)"]:not([data-m~="nolines"]),
  [style*="grid-template-columns: repeat(3, minmax"]:not([data-m~="keep"]),
  [style*="grid-template-columns: repeat(4, 1fr)"]:not([data-m~="steps"]):not([data-m~="keep"]),
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px)"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px)"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px)"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="1.2fr) repeat(3"] { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="border-right"]:nth-child(2) { border-right: 0 !important; padding-right: 0 !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-left: 48px"],
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-left: 34.5px"] { padding-left: 0 !important; padding-top: 40px; }
  [style*="grid-template-columns: 340px minmax"],
  [style*="grid-template-columns: 300px minmax(0, 1fr);"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m~="stack-t"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m~="static"] { position: static !important; }
  [data-m~="stack-t"][style*="grid-template-columns: 48px"], [data-m~="stack-t"][style*="grid-template-columns: 220px"] { gap: 12px !important; }
  [data-m~="stack-t"][style*="grid-template-columns: 220px"] > span:first-child { font-size: 56px !important; }
  [data-m~="stack-t"][style*="gap: 128px"],
  [data-m~="stack-t"][style*="gap: 77px"] { gap: 48px !important; }
  [style*="grid-template-columns: repeat(5, minmax"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(5, minmax"] > div[style*="padding-top"], [style*="minmax(min(100%, 220px)"] > div[style*="padding-top"] { padding-top: 0 !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-inline: 48px"],
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-inline: 34.5px"] { padding-inline: 28px !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-right: 48px"],
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-right: 34.5px"] { padding-right: 28px !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-left: 48px"],
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-left: 34.5px"] { padding-left: 28px !important; }
  [style*="grid-template-columns"][style*="gap: 64px"],
  [style*="grid-template-columns"][style*="gap: 80px"],
  [style*="grid-template-columns"][style*="gap: 96px"],
  [style*="grid-template-columns"][style*="gap: 42px"],
  [style*="grid-template-columns"][style*="gap: 53px"],
  [style*="grid-template-columns"][style*="gap: 57.5px"] { gap: 40px !important; }
  [style*="font-size: 250px"],
  [style*="font-size: 180px"] { font-size: 22vw !important; }
  /* Who owns the data: plain line strip at the bottom, no side spans */
  body section[data-m~="own"][style*="padding-block"] { padding-bottom: 0 !important; gap: 56px !important; }
  body [data-m~="own"] > div[style*="grid-template-columns"] > div { padding: 0 0 40px 0 !important; }
  body [data-m~="own"] > div[style*="grid-template-columns"] > div > span[style*="position: absolute"] { display: none !important; }
  body [data-m~="own"] [data-m~="dup"] { display: block !important; }
  body [data-m~="own"] [data-m~="hide"] { display: none !important; }
  body [data-m~="own"] > div[style*="grid-template-columns"] > span[style*="position: absolute"] { display: none !important; }
  /* report board: tiles flow into the two columns instead of one stacked column per desktop column */
  body section[data-screen-label="What you can report on"] > div[style*="grid-template-columns: repeat("] > div { display: contents !important; }
  body section[data-screen-label="What you can report on"] > div[style*="grid-template-columns: repeat("] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; align-items: start !important; }
  body section[data-screen-label="What you can report on"] > div[style*="grid-template-columns: repeat("] > div > div { min-width: 0; }
  /* Going live: timeline rule and its shared label row drop out, each card carries its own time */
  body section[data-screen-label="Going live"] [data-m~="dup"] { display: block !important; }
  /* At scale: phone curve (rises on the right only) on tablet as well */
  body section[data-screen-label="At scale"] > [data-m~="hide"] { display: none !important; }
  body section[data-screen-label="At scale"] > svg[data-m~="dup"] { display: block !important; }
  /* logo strip: one horizontal, rotating row */
  body section:has(> [data-m~="logos"]) { overflow: hidden; padding-block: 48px 40px !important; }
  body [data-m~="logos"] { display: flex !important; width: max-content; gap: 0 72px !important; margin-inline: -48px; padding-inline: 28px; animation: vt-logos 28s linear infinite; }
  body [data-m~="logos"] > div { flex: none; height: 44px !important; }
  body [data-m~="logos"] > div > img { height: 30px !important; max-height: none !important; width: auto !important; max-width: 120px !important; object-fit: contain; }
  body [data-m~="logos"] > div[data-m~="dup"] { display: flex !important; }
  body section:has(> [data-m~="logos"]) > [data-m~="logos"] { grid-template-columns: none !important; }
}

@media (max-width: 768px) {
  section[style*="padding-inline: max("], footer[style*="padding-inline: max("], div[style*="padding-inline: max("], header[style*="padding-inline: max("] { padding-inline: 20px !important; }
  section[style*="padding-inline: 48px"],
  footer[style*="padding-inline: 48px"],
  section[style*="padding-inline: 34.5px"],
  footer[style*="padding-inline: 34.5px"] { padding-inline: 20px !important; }
  section[style*="padding-block"], footer[style*="padding-block"] { padding-block: 56px 64px !important; }
  section[style*="padding-block"][style*="background: #121212"] { padding-block: 64px 72px !important; }

  /* grids that stack to one column. Selectors avoid the "minmax(0," token because the
     browser serialises it as "minmax(0px," once React has applied the inline style. */
  [data-m~="stack"],
  [style*="1fr) minmax(0"],
  [style*="1.2fr) minmax(0"],
  [style*="1.25fr) minmax(0"],
  [style*="1.3fr) minmax(0"],
  [style*="1.4fr) minmax(0"],
  [style*="1fr) auto"]:not([style*="auto 28px"]):not([style*="grid-template-columns: 90px"]):not([style*="grid-template-columns: 14px"]):not([data-m~="keep"]),
  [style*="1fr) 300px"],
  [style*="1fr) 320px"],
  [style*="1fr) 380px"],
  [style*="1fr) 420px"],
  [style*="1fr) 56px"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns: auto minmax"],
  [style*="grid-template-columns: 110px minmax"],
  [style*="grid-template-columns: 120px minmax"],
  [style*="grid-template-columns: 160px minmax"],
  [style*="grid-template-columns: 200px"],
  [style*="grid-template-columns: 220px minmax"],
  [style*="grid-template-columns: 240px minmax"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns: 300px minmax"]:not([style*="1fr) 24px"]),
  [style*="grid-template-columns: 320px minmax"],
  [style*="grid-template-columns: 340px minmax"],
  [style*="grid-template-columns: 400px minmax"],
  [style*="grid-template-columns: 420px minmax"],
  [style*="grid-template-columns: 460px minmax"],
  [style*="grid-template-columns: 40px 200px"],
  [style*="grid-template-columns: 96px minmax"][style*="1fr) 150px"],
  [style*="grid-template-columns: max(328px"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(4,"]:not([data-m~="keep"]),
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 2"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 3"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 4"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(7"]:not([data-m~="keep"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="margin-inline: calc(-1 * max(48px"],
  [style*="margin-inline: calc(-1 * max(34.5px"] { margin-inline: -20px !important; }
  /* report-tile boards (5 staggered columns): one column on phone, like the homepage */
  [style*="grid-template-columns: repeat(5, minmax"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(5, minmax"] > div[style*="padding-top"], [style*="minmax(min(100%, 220px)"] > div[style*="padding-top"] { padding-top: 0 !important; }
  [style*="grid-template-columns: repeat(5, minmax"] span[style*="text-overflow: ellipsis"], [style*="minmax(min(100%, 220px)"] span[style*="text-overflow: ellipsis"] { white-space: normal !important; overflow: visible !important; }
  /* channel columns: no dividers or side padding when stacked */
  [style*="minmax(min(100%, 300px)"][style*="gap: 0px"] { gap: 56px !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="border-right"] { border-right: 0 !important; padding-right: 0 !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-inline: 48px"],
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-inline: 34.5px"] { padding-inline: 0 !important; }
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-left: 48px"],
  [style*="minmax(min(100%, 300px)"] > div[style*="padding-left: 34.5px"] { padding-left: 0 !important; }
  /* footer link columns */
  [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 40px"],
  /* footer link columns */
  [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 29px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
  /* five text cards in a row -> single column */
  [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 16px"],
  /* five text cards in a row -> single column */
  [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 14px"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 16px"] > div[style*="min-height"],
  [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 14px"] > div[style*="min-height"] { min-height: 0 !important; gap: 16px !important; }
  [style*="grid-template-columns: 300px minmax"][style*="1fr) 24px"] { grid-template-columns: minmax(0, 1fr) 24px !important; }
  [style*="grid-template-columns: 56px 130px minmax"] { grid-template-columns: 40px minmax(0, 1fr) !important; }
  [style*="1.2fr) repeat(3"] { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)) !important; column-gap: 8px !important; }
  [style*="1.2fr) repeat(3"] > span[style*="font-size: 17px"],
  [style*="1.2fr) repeat(3"] > span[style*="font-size: 16px"] { font-size: 15px !important; }
  /* plan-comparison header row: billing toggle spans the row, plan names shrink */
  [style*="1.2fr) repeat(3"][style*="border-bottom"] > div:first-child { grid-column: 1 / -1; padding-bottom: 20px; }
  [style*="1.2fr) repeat(3"][style*="border-bottom"] > div:nth-child(2) { grid-column: 2; }
  [style*="1.2fr) repeat(3"][style*="border-bottom"] [style*="font-size: 30px"],
  [style*="1.2fr) repeat(3"][style*="border-bottom"] [style*="font-size: 24.5px"] { font-size: 14px !important; letter-spacing: -.01em !important; }
  [style*="1.2fr) repeat(3"][style*="border-bottom"] [style*="font-size: 10px"] { display: none !important; }
  /* logo strips: SVG logos with fixed height must not overflow their cell */
  [style*="grid-template-columns: repeat(5"] img[style*="width: auto"], [style*="grid-template-columns: repeat(6"] img[style*="width: auto"] { max-width: 100%; height: auto !important; max-height: 30px; object-fit: contain; }
  [style*="grid-template-columns"][style*="gap: 64px"],
  [style*="grid-template-columns"][style*="gap: 48px"],
  [style*="grid-template-columns"][style*="gap: 40px"],
  [style*="grid-template-columns"][style*="gap: 42px"],
  [style*="grid-template-columns"][style*="gap: 34.5px"],
  [style*="grid-template-columns"][style*="gap: 29px"] { gap: 28px !important; }
  [style*="grid-template-columns"][style*="gap: 0 48px"],
  [style*="grid-template-columns"][style*="gap: 0 34.5px"] { column-gap: 12px !important; }
  [style*="grid-column: span 2"], [style*="grid-column: 1 / span 2"], [style*="grid-column: 1 / -1"], [style*="grid-column: 2"], [style*="grid-column: 3"] { grid-column: auto !important; }
  [style*="grid-row"]:not([style*="grid-template"]) { grid-row: auto !important; }
  [style*="align-items: end"][style*="grid-template-columns"] { align-items: start !important; }

  [style*="white-space: nowrap"]:not(a):not(button):not([data-m~="keep"]) { white-space: normal !important; }
  [style*="width: 1320px"] { width: 100% !important; }
  [style*="width: 100%"][style*="padding"] { box-sizing: border-box !important; }
  [style*="max-width: 760px"], [style*="max-width: 720px"], [style*="max-width: 680px"] { max-width: 100% !important; }
  body [style*="grid-template-columns: max(328px"] { padding-inline: 20px; }
  body [style*="grid-template-columns: max(328px"] > aside:first-child > div { display: flex !important; }
  img[style*="width: 100%"] { height: auto !important; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  select[style*="min-width"] { min-width: 0 !important; }

  [data-m~="hide"] { display: none !important; }
  [data-m~="col"] { flex-direction: column !important; align-items: stretch !important; }
  [data-m~="col"][style*="justify-content: space-between"] { justify-content: flex-start !important; }
  [data-m~="col"] > [style*="margin-left: auto"] { margin-left: 0 !important; }
  [data-m~="wrap"] { flex-wrap: wrap !important; }
  [data-m~="scroll"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-m~="center"] { text-align: center !important; align-items: center !important; justify-content: center !important; }
  [data-m~="left"] { text-align: left !important; align-items: flex-start !important; align-self: flex-start !important; }
  [data-m~="full"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; text-align: center; }
  [data-m~="tight"] { padding: 24px 20px !important; }
  [data-m~="form"] { flex-direction: column !important; align-items: stretch !important; padding: 8px !important; }
  [data-m~="form"] > input { padding: 12px 14px !important; }
  [data-m~="form"] > button, [data-m~="form"] > a { width: 100% !important; box-sizing: border-box; text-align: center; }
  [data-m~="static"] { position: static !important; transform: none !important; width: 100% !important; height: auto !important; }
  [data-m~="dup"] { display: block !important; }
  [data-m~="dup"][style*="display: flex"] { display: flex !important; }
  [data-m~="dup"][style*="display: grid"] { display: grid !important; }


  body [data-m~="logos"] { margin-inline: -20px; gap: 0 56px !important; }
  body [data-m~="logos"] > div > img { height: 26px !important; }

  /* "What it does": tab bar pinned under the header, scrolls sideways */
  [data-m~="tabs"] { position: sticky !important; top: 76px !important; z-index: 5; background: #fff; flex-direction: row !important; gap: 8px !important; padding-block: 10px !important; margin-inline: -20px; padding-inline: 20px !important; border-bottom: 1px solid #cfcfcf; overflow-x: auto !important; }
  [data-m~="tabs"] > button { font-size: 16px !important; padding-block: 8px !important; padding-left: 14px !important; }
  [data-m~="tabs"] > button > span:first-child { top: 8px !important; bottom: 8px !important; }
  [data-m~="tabs"] + div { border-left: 0 !important; }
  [data-m~="tabs"] + div [data-wd-panel] { min-height: 0 !important; }
  [data-m~="tabs"] + div [data-wd-panel] > div:first-child { padding: 32px 0 28px !important; }
  [data-m~="tabs"] + div [data-wd-panel] > div[style*="grid-template-columns"] { display: flex !important; flex-direction: column; gap: 24px !important; }
  [data-m~="tabs"] > button > span[style*="font-size: 11px"], [data-m~="tabs"] > button > span[style*="font-size: 10.5px"] { display: none; }
  [data-m~="tabs"] + div [data-wd-panel] > div:last-child { padding: 28px 0 !important; }
  [data-m~="tabs"] + div [data-wd-panel] p[style*="font-size: 26px"],
  [data-m~="tabs"] + div [data-wd-panel] p[style*="font-size: 22.5px"] { font-size: 20px !important; }


  /* review marquee cards */
  [style*="vt-marquee"] > div { width: 280px !important; padding: 20px 22px !important; gap: 14px !important; }
  [style*="vt-marquee"] > div > p { font-size: 15px !important; line-height: 1.45 !important; }
  [style*="vt-marquee"] { animation-duration: 40s !important; }

  /* pillar-page hero facts: one per row */
  [data-m~="facts"] { grid-template-columns: minmax(0, 1fr) !important; width: 100%; box-sizing: border-box; }
  [data-m~="facts"] > div { padding: 16px 20px !important; border-left: 0 !important; }
  [data-m~="facts"] > div + div { border-top: 1px solid #ececec; }
  [data-m~="facts"] > div > span[style*="white-space: nowrap"] { white-space: normal !important; }

  /* flow cards joined by arrows: arrows turn downward, cards drop their fixed heights */
  [style*="1fr) 56px minmax"] { gap: 16px !important; }
  [style*="1fr) 56px minmax"] > span[style*="font-size: 22px"],
  [style*="1fr) 56px minmax"] > span[style*="font-size: 19px"] { display: inline-block; transform: rotate(90deg); padding: 0; line-height: 1; height: 24px; }
  [style*="1fr) 56px minmax"] > div[style*="min-height"] { min-height: 0 !important; }
  body [style*="1fr) 56px minmax"] > div > span[style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  body [style*="1fr) 56px minmax"] > div > span > span[style*="border-radius: 999px"] { white-space: normal; }
  /* phone: mono eyebrows wrap when too long for the column; bordered cards tighten and bubbles widen */
  body span[style*="text-transform: uppercase"][style*="letter-spacing: 0.1"] { white-space: normal !important; text-wrap: balance; }
  body [style*="border-radius: 22px"][style*="padding: 32px"][style*="flex-direction: column"],
  body [style*="border-radius: 22px"][style*="padding: 25.5px"][style*="flex-direction: column"] { padding: 22px 18px !important; }
  body [style*="border-radius: 22px"][style*="flex-direction: column"] > div[style*="max-width: 78%"],
  body [style*="border-radius: 22px"][style*="flex-direction: column"] > div[style*="max-width: 70%"] { max-width: 88% !important; }
  /* mechanics key/value cards: narrower key column, values break anywhere */
  body [style*="grid-template-columns: 120px minmax"] { grid-template-columns: 88px minmax(0, 1fr) !important; gap: 12px !important; }
  body [style*="grid-template-columns: 120px minmax"] > span { min-width: 0; overflow-wrap: anywhere; }
  /* legal version history: version + date on one line, note full width below */
  body [data-m~="vhist"] { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 6px 16px !important; }
  body [data-m~="vhist"] > :nth-child(3) { grid-column: 1 / -1; }
  /* index rows: title + arrow, path below */
  body a[style*="grid-template-columns: 300px minmax(0px, 1fr) 24px"] { grid-template-columns: minmax(0, 1fr) 24px !important; gap: 4px 16px !important; }
  body a[style*="grid-template-columns: 300px minmax(0px, 1fr) 24px"] > :nth-child(1) { grid-column: 1 / -1; }
  /* two-column link grids: links wrap instead of overflowing */
  body [data-m~="grid2"] > a { white-space: normal !important; min-width: 0; }
  /* segmented toggles never wrap */
  body [style*="display: flex"][style*="padding: 4px"][style*="border-radius: 12px"], body [style*="display: flex"][style*="padding: 4px"][style*="border-radius: 999px"] { flex-wrap: nowrap !important; width: max-content; }
  /* rows inside a centred column stay centred when they wrap */
  body [style*="flex-direction: column"][style*="align-items: center"] > [style*="display: flex"]:not([style*="flex-direction: column"]):not([data-m~="tabstrip"]):not([data-m~="faqtabs"]) { justify-content: center !important; text-align: center; }
  /* dark data cards: any fixed min-height goes when stacked */
  section[style*="background: #121212"] [style*="grid-template-columns"] > div[style*="min-height: 300px"],
  section[style*="background: #121212"] [style*="grid-template-columns"] > div[style*="min-height: 320px"],
  section[style*="background: #121212"] [style*="grid-template-columns"] > div[style*="min-height: 340px"] { min-height: 0 !important; }
  /* setup steps: vertical timeline */
  [data-m~="steps"] { display: flex !important; flex-direction: column; gap: 0 !important; border-top: 0 !important; padding: 0 !important; margin-left: 5px; border-left: 1px solid #121212; }
  body [data-m~="steps"] { row-gap: 0 !important; }
  body [data-m~="steps"] > div { position: relative; padding: 0 0 32px 28px !important; gap: 8px !important; border-top: 0 !important; }
  [data-m~="steps"] > div:last-child { padding-bottom: 8px !important; }
  [data-m~="steps"] > div > span[style*="position: absolute"] { left: -6px !important; top: 6px !important; }
  [data-m~="steps"] > div::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 999px; background: #121212; }
  [data-m~="steps"] > div > span[style*="position: absolute"] ~ *::before, [data-m~="steps"] > div:has(> span[style*="position: absolute"])::before { display: none; }
  [data-m~="steps-b"] > div::before { background: #ff5a8d; }
  [data-m~="steps-a"] { padding-bottom: 0 !important; }
  [data-m~="steps-a"] > div:last-child { padding-bottom: 32px !important; }
  [data-m~="steps"] > div > span[style*="font-size: 24px"],
  [data-m~="steps"] > div > span[style*="font-size: 22px"],
  [data-m~="steps"] > div > span[style*="font-size: 20.5px"],
  [data-m~="steps"] > div > span[style*="font-size: 19px"] { font-size: 20px !important; }
  /* template notes: no dividers */
  [data-m~="nolines"] { border-top: 0 !important; gap: 28px !important; }
  [data-m~="nolines"] > div { border-left: 0 !important; padding: 0 !important; }
  /* contact: 2 x 2 link grid */
  [data-m~="grid2"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 20px !important; }



  /* type ramp: fixed display sizes scale down */
  [style*="font-size: 96px"],
  /* type ramp: fixed display sizes scale down */
  [style*="font-size: 69px"] { font-size: 48px !important; }
  [style*="font-size: 88px"],
  [style*="font-size: 63.5px"] { font-size: 46px !important; }
  [style*="font-size: 84px"],
  [style*="font-size: 60.5px"] { font-size: 44px !important; }
  [style*="font-size: 80px"],
  [style*="font-size: 57.5px"] { font-size: 44px !important; }
  [style*="font-size: 76px"],
  [style*="font-size: 54.5px"] { font-size: 42px !important; }
  [style*="font-size: 72px"],
  [style*="font-size: 52px"] { font-size: 40px !important; letter-spacing: -.03em !important; }
  [style*="font-size: 68px"],
  [style*="font-size: 49px"] { font-size: 40px !important; }
  [style*="font-size: 64px"],
  [style*="font-size: 46px"] { font-size: 38px !important; letter-spacing: -.03em !important; }
  [style*="font-size: 60px"],
  [style*="font-size: 43px"] { font-size: 36px !important; }
  [style*="font-size: 56px"],
  [style*="font-size: 43.5px"] { font-size: 34px !important; letter-spacing: -.028em !important; }
  [style*="font-size: 52px"],
  [style*="font-size: 40.5px"] { font-size: 33px !important; }
  [style*="font-size: 48px"],
  [style*="font-size: 37.5px"] { font-size: 32px !important; }
  [style*="font-size: 44px"],
  [style*="font-size: 34.5px"] { font-size: 30px !important; }
  [style*="font-size: 40px"],
  [style*="font-size: 31px"] { font-size: 28px !important; }
  [style*="font-size: 36px"],
  [style*="font-size: 29.5px"] { font-size: 27px !important; }
  [style*="font-size: 32px"],
  [style*="font-size: 26px"] { font-size: 25px !important; }
  [style*="font-size: 30px"],
  [style*="font-size: 24.5px"] { font-size: 22px !important; }
  [style*="font-size: 128px"],
  [style*="font-size: 92px"] { font-size: 64px !important; }
  [style*="font-size: 250px"],
  [style*="font-size: 180px"] { font-size: 74px !important; }
  h1[style*="max-width"], h2[style*="max-width"] { max-width: 100% !important; }

  /* BLANKET PHONE POLICY: every grid is one column, every flex row may wrap. Exceptions are listed in the selector. */
  body [style*="grid-template-columns"]:not([data-m~="keep"]):not([data-m~="faqrow"]):not([data-m~="steps"]):not([style*="1.2fr) repeat(3"]):not([style*="1fr) 24px"]):not([style*="1fr) 32px"]):not([style*="grid-template-columns: 14px"]):not([style*="grid-template-columns: 20px"]):not([style*="grid-template-columns: 24px"]):not([style*="grid-template-columns: 26px"]):not([style*="grid-template-columns: 28px"]):not([style*="grid-template-columns: 32px"]):not([style*="grid-template-columns: 36px"]):not([style*="grid-template-columns: 40px"]):not([style*="grid-template-columns: 44px"]):not([style*="grid-template-columns: 48px"]):not([style*="grid-template-columns: 56px"]):not([style*="grid-template-columns: 64px"]):not([style*="grid-template-columns: 90px"]):not([style*="grid-template-columns: 96px"]):not([style*="grid-template-columns: 1fr auto"]):not([style*="grid-template-columns: max(328px"]) { grid-template-columns: minmax(0, 1fr) !important; }
  body [style*="grid-template-columns"]:not([data-m~="keep"]):not([data-m~="faqrow"]):not([data-m~="steps"]):not([style*="1.2fr) repeat(3"]):not([style*="1fr) 24px"]):not([style*="1fr) 32px"]):not([style*="grid-template-columns: 14px"]):not([style*="grid-template-columns: 20px"]):not([style*="grid-template-columns: 24px"]):not([style*="grid-template-columns: 26px"]):not([style*="grid-template-columns: 28px"]):not([style*="grid-template-columns: 32px"]):not([style*="grid-template-columns: 36px"]):not([style*="grid-template-columns: 40px"]):not([style*="grid-template-columns: 44px"]):not([style*="grid-template-columns: 48px"]):not([style*="grid-template-columns: 56px"]):not([style*="grid-template-columns: 64px"]):not([style*="grid-template-columns: 90px"]):not([style*="grid-template-columns: 96px"]):not([style*="grid-template-columns: 1fr auto"]):not([style*="grid-template-columns: max(328px"]) > [style*="grid-column"], body [style*="grid-template-columns"]:not([data-m~="keep"]):not([data-m~="faqrow"]):not([data-m~="steps"]):not([style*="1.2fr) repeat(3"]):not([style*="1fr) 24px"]):not([style*="1fr) 32px"]):not([style*="grid-template-columns: 14px"]):not([style*="grid-template-columns: 20px"]):not([style*="grid-template-columns: 24px"]):not([style*="grid-template-columns: 26px"]):not([style*="grid-template-columns: 28px"]):not([style*="grid-template-columns: 32px"]):not([style*="grid-template-columns: 36px"]):not([style*="grid-template-columns: 40px"]):not([style*="grid-template-columns: 44px"]):not([style*="grid-template-columns: 48px"]):not([style*="grid-template-columns: 56px"]):not([style*="grid-template-columns: 64px"]):not([style*="grid-template-columns: 90px"]):not([style*="grid-template-columns: 96px"]):not([style*="grid-template-columns: 1fr auto"]):not([style*="grid-template-columns: max(328px"]) > [style*="grid-row"] { grid-column: auto !important; grid-row: auto !important; }
  body [style*="grid-template-columns"]:not([data-m~="keep"]):not([data-m~="faqrow"]):not([data-m~="steps"]):not([style*="1.2fr) repeat(3"]):not([style*="1fr) 24px"]):not([style*="1fr) 32px"]):not([style*="grid-template-columns: 14px"]):not([style*="grid-template-columns: 20px"]):not([style*="grid-template-columns: 24px"]):not([style*="grid-template-columns: 26px"]):not([style*="grid-template-columns: 28px"]):not([style*="grid-template-columns: 32px"]):not([style*="grid-template-columns: 36px"]):not([style*="grid-template-columns: 40px"]):not([style*="grid-template-columns: 44px"]):not([style*="grid-template-columns: 48px"]):not([style*="grid-template-columns: 56px"]):not([style*="grid-template-columns: 64px"]):not([style*="grid-template-columns: 90px"]):not([style*="grid-template-columns: 96px"]):not([style*="grid-template-columns: 1fr auto"]):not([style*="grid-template-columns: max(328px"]) > div[style*="border-left: 1px solid"], body [style*="grid-template-columns"]:not([data-m~="keep"]):not([data-m~="faqrow"]):not([data-m~="steps"]):not([style*="1.2fr) repeat(3"]):not([style*="1fr) 24px"]):not([style*="1fr) 32px"]):not([style*="grid-template-columns: 14px"]):not([style*="grid-template-columns: 20px"]):not([style*="grid-template-columns: 24px"]):not([style*="grid-template-columns: 26px"]):not([style*="grid-template-columns: 28px"]):not([style*="grid-template-columns: 32px"]):not([style*="grid-template-columns: 36px"]):not([style*="grid-template-columns: 40px"]):not([style*="grid-template-columns: 44px"]):not([style*="grid-template-columns: 48px"]):not([style*="grid-template-columns: 56px"]):not([style*="grid-template-columns: 64px"]):not([style*="grid-template-columns: 90px"]):not([style*="grid-template-columns: 96px"]):not([style*="grid-template-columns: 1fr auto"]):not([style*="grid-template-columns: max(328px"]) > div[style*="border-right: 1px solid"] { border-left: 0 !important; border-right: 0 !important; }
  body [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 40px"],
  body [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 29px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  body [style*="display: flex"]:not([style*="flex-direction: column"]):not([data-m~="keep"]):not([style*="flex: none"]):not([data-m~="tabs"]):not([data-m~="logos"]):not([style*="vt-marquee"]):not([style*="width: max-content"]) { flex-wrap: wrap; }
  body [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: baseline"] { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  body [style*="display: grid"][style*="align-items: end"], body [style*="display: grid"][style*="align-items: center"]:not([data-m~="faqrow"]) { align-items: start !important; }
}

/* Pricing estimate: result strip sticks to the bottom while the inputs scroll (2026-09-14) */
@media (max-width: 1024px) {
  body [data-m~="est-strip"] [style*="padding: 36px 40px"], body [data-m~="est-strip"] [style*="padding: 32px 40px"], body [data-m~="est-strip"] [style*="padding: 40px 40px"] { padding: 28px 24px !important; }
  body [data-m~="est-strip"] [style*="font-size: 84px"] { font-size: 64px !important; }
  /* paired columns (SMS | WhatsApp, Voice | AI): stack, divider becomes a rule between */
  body [data-m~="estpair"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  body [data-m~="estcol"] { padding: 0 !important; border-left: 0 !important; }
  body [data-m~="estcol"] + [data-m~="estcol"] { border-top: 1px solid #dcdcdc !important; padding-top: 28px !important; }
  /* tooltips: never wider than the panel */
  body [data-m~="tip"] { max-width: min(340px, calc(100vw - 64px)) !important; min-width: 260px; left: 0 !important; right: auto !important; }
  body [data-m~="estlines"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
  body [data-m~="est-strip"] [data-m~="col"] > a { justify-self: stretch; }
}
@media (max-width: 768px) {
  body [data-m~="est-strip"] [style*="padding: 36px 40px"], body [data-m~="est-strip"] [style*="padding: 32px 40px"], body [data-m~="est-strip"] [style*="padding: 40px 40px"] { padding: 24px 20px !important; }
  body [data-m~="est-strip"] [style*="font-size: 84px"] { font-size: 52px !important; }
  body [data-m~="est-strip"] [style*="font-size: 32px"][style*="top: -22px"], body [data-m~="est-strip"] [style*="font-size: 32px"][style*="margin-top: 4px"] { font-size: 24px !important; }
  body [data-m~="totalrow"] > [role="group"] { margin-left: 0 !important; width: auto; justify-content: flex-start; }
  body [data-m~="totalrow"] > [role="group"] > button { flex: none; }
  /* total block centred on phone */
  body [data-m~="est-strip"] [aria-live="polite"][data-m~="col"] > div:first-child { align-items: center !important; text-align: center; }
  body [data-m~="est-strip"] [aria-live="polite"][data-m~="col"] > div:first-child > span { justify-content: center; }
  body [data-m~="totalrow"] { justify-content: center !important; }
  body [data-m~="estlines"] > div { align-items: center !important; text-align: center; }
  body [data-m~="estlines"] > div > span[style*="align-self: flex-start"] { align-self: center !important; }
  body [data-m~="est-strip"] [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  body [data-m~="est-strip"] input[type="number"][style*="width: 112px"] { width: 96px !important; font-size: 22px !important; }
  body [data-m~="est-strip"] [style*="font-size: 20px"][style*="letter-spacing: -.018em"] { font-size: 18px !important; }
  body [data-m~="tip"] { left: -40px !important; right: auto !important; width: 300px !important; }
  body [data-m~="tip"]#planInfo { left: -60px !important; }
  body [data-m~="tip"]#voiceInfo { left: -140px !important; }
  body [data-m~="est-strip"] span[style*="gap: 10px"] > span[style*="font-size: 20px"] { white-space: nowrap; }
  body [data-m~="airow"] { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
}

/* Pricing page polish (2026-09-15) */
/* number inputs: never show the native spinner (custom steppers / typed values only) */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 1024px) {
  /* plan cards: no lift on the Popular card, so stacked cards keep one even gap */
  body section[data-screen-label="Pricing hero"] [style*="repeat(3, 1fr)"][style*="align-items: end"] > div { transform: none !important; }
  /* comparison header: the Popular pill wraps under the plan name instead of running into the next column */
  body section#compare > div[style*="position: sticky"] div[style*="align-items: center"][style*="gap: 10px"] { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  body section[data-screen-label="Pricing hero"] [style*="repeat(3, 1fr)"][style*="align-items: end"] { gap: 16px !important; margin-top: 32px !important; }
  body section[data-screen-label="Pricing hero"] [data-m~="tight"][style*="margin-top: 20px"] { margin-top: 16px !important; }
  /* comparison: the plan columns are hidden on phone, so the billing toggle (and its empty sticky bar) has nothing to drive */
  body section#compare > div[style*="position: sticky"] { display: none !important; }
  body section#compare > div > span[style*="padding: 72px 0"] { padding-top: 0 !important; }
  body section[data-screen-label="Pricing hero"] > div[style*="padding-bottom: 120px"] { padding-bottom: 8px !important; }
  /* estimate: message inputs keep their full width and type size; the $ sits on the total's baseline */
  body [data-m~="est-strip"] input[type="number"][style*="width: 112px"] { width: 112px !important; font-size: 26px !important; }
  body [data-m~="totalrow"] > span[style*="margin-top: 4px"] { align-self: flex-end !important; margin-top: 0 !important; padding-bottom: 6px; }
  body [data-m~="totalrow"] > [role="group"] { margin-top: 10px; }
}
@media (max-width: 1024px) {
  body section[data-screen-label="Estimate"] [role="radio"] span[style*="Geist Mono"], body section[data-screen-label="Estimate"] [role="radio"] span[style*="Geist Mono"] span { white-space: normal !important; }
}

/* /bring-your-own-gateway/ hero (B1a): the grey base band and the column's floor above it */
@media (max-width: 1024px) {
  body [data-m~="byog-base"] { height: 160px !important; }
  body [data-m~="byog-col"] { padding-bottom: 104px !important; }
}
@media (max-width: 768px) {
  body [data-m~="byog-base"] { height: 112px !important; }
  body [data-m~="byog-col"] { padding-bottom: 72px !important; padding-top: 24px !important; }
  body [data-m~="byog-col"] [data-m~="col"] { width: 100%; align-self: stretch !important; }
  body [data-m~="byog-col"] [data-m~="col"] > a { width: 100%; text-align: center; }
}

/* ---- 19 Sep locked sections (Library 33-42) ---- */
@media (max-width: 1024px) {
  body :is(
    section[data-screen-label="Why teams choose ValueText"],
    section[data-screen-label="How it works"],
    section[data-screen-label="AI inside the workflow"],
    section[data-screen-label="Going live"],
    section[data-screen-label="Ownership and control"],
    section[data-screen-label="How we compare"],
    section[data-screen-label="By industry"],
    section[data-screen-label="What it costs"],
    section[data-screen-label="Common questions"],
    section[data-screen-label="Get in touch"]
  ) { padding-block: 88px !important; }

  /* comparison stays a table: three columns, tighter type */
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"] > span { font-size: 15px !important; padding-inline: 14px !important; }
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"] > span:first-child { padding-left: 0 !important; }
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"] > span:last-child { padding-right: 0 !important; }

  /* how it works: the connector only makes sense in a row */
  body section[data-screen-label="How it works"] span[style*="top: 19px"] { display: none !important; }
  body section[data-screen-label="How it works"] div[style*="repeat(4, minmax(0px, 1fr))"] { gap: 28px !important; }
  body section[data-screen-label="How it works"] div[style*="repeat(4, minmax(0px, 1fr))"] > span { align-items: flex-start !important; text-align: left !important; padding: 0 !important; }
  /* tabs become one scrolling strip so the plates never wrap off the card */
  body section[data-screen-label="How it works"] div[style*="z-index: 1"] { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; justify-content: flex-start !important; padding-inline: 2px; }
  body section[data-screen-label="How it works"] div[style*="z-index: 1"] > button { flex: none; font-size: 15px !important; padding: 13px 20px 14px !important; }

  /* what it costs: stacked columns lose their vertical rules */
  body section[data-screen-label="What it costs"] div[style*="repeat(3, minmax(0px, 1fr))"] > div { border-left: 0 !important; padding-inline: 0 !important; }
  body section[data-screen-label="What it costs"] div[style*="repeat(3, minmax(0px, 1fr))"] { gap: 28px !important; }
  body section[data-screen-label="What it costs"] div[style*="repeat(3, minmax(0px, 1fr))"] > div > span[style*="height: 2px"] { left: 0 !important; }
  body section[data-screen-label="What it costs"] div[style*="repeat(3, minmax(0px, 1fr))"] > div > span[style*="height: 2px"][style*="calc(100%"] { width: 100% !important; }

  /* why teams choose: stacked tabs keep their dividers as rules */
  body section[data-screen-label="Why teams choose ValueText"] div[style*="repeat(5, minmax(0px, 1fr))"] > button { border-left: 0 !important; border-bottom: 1px solid #ececec; }
}

@media (max-width: 768px) {
  /* comparison: question over its two answers */
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"] { grid-template-columns: 1fr 1fr !important; row-gap: 6px; }
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"] > span:first-child { grid-column: 1 / -1; padding-bottom: 0 !important; font-size: 14px !important; }
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"] > span:not(:first-child) { padding-block: 12px 18px !important; font-size: 15px !important; }

  /* questions: answers sit under the question, not indented past it */
  body section[data-screen-label="Common questions"] details > p { padding-left: 30px !important; padding-right: 30px !important; }
  body section[data-screen-label="Common questions"] summary[data-m~="keep"] { grid-template-columns: 34px minmax(0, 1fr) 32px !important; gap: 12px !important; padding-inline: 20px !important; }

  /* ownership: the icon tile row keeps its shape */
  body section[data-screen-label="Ownership and control"] summary[data-m~="keep"] { grid-template-columns: 40px minmax(0, 1fr) 44px !important; gap: 14px !important; }
  body section[data-screen-label="Ownership and control"] details > p { padding-inline: 54px 0 !important; }
}

@media (max-width: 768px) {
  /* 19 Sep sections: a dot and its line stay on one row */
  body :is(
    section[data-screen-label="Get in touch"],
    section[data-screen-label="Going live"],
    section[data-screen-label="How it works"],
    section[data-screen-label="What it costs"],
    section[data-screen-label="AI inside the workflow"],
    section[data-screen-label="Why teams choose ValueText"]
  ) span[style*="display: flex"][style*="gap: 10px"],
  body :is(
    section[data-screen-label="Get in touch"],
    section[data-screen-label="Going live"],
    section[data-screen-label="How it works"],
    section[data-screen-label="What it costs"],
    section[data-screen-label="AI inside the workflow"],
    section[data-screen-label="Why teams choose ValueText"]
  ) span[style*="display: flex"][style*="gap: 12px"] { flex-wrap: nowrap !important; }
}

@media (max-width: 768px) {
  /* 19 Sep tabbed sections: each tab opens its own panel right underneath */
  body [data-m~="tabwrap"] { align-items: stretch !important; }
  body [data-m~="tabstrip"] { display: contents !important; }
  body [data-m~="tabstrip"] > button {
    width: 100% !important; box-sizing: border-box;
    border: 1px solid #ececec !important; border-radius: 12px !important;
    margin-bottom: 8px; padding: 16px 18px !important;
    flex-direction: row !important; align-items: center !important; gap: 12px !important;
    justify-content: flex-start !important; text-align: left !important;
  }
  body [data-m~="tabpanel"] { width: 100%; margin: 4px 0 16px !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] { border-radius: 16px !important; }
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] { border-top: 1px solid #ececec; padding-top: 24px; }

  /* one column, one alignment: left everywhere except the three centred headers */
  body :is(
    section[data-screen-label="Why teams choose ValueText"],
    section[data-screen-label="How it works"],
    section[data-screen-label="Common questions"]
  ) > div:first-child { text-align: center !important; align-items: center !important; }
  body :is(
    section[data-screen-label="Why teams choose ValueText"],
    section[data-screen-label="How it works"]
  ) [data-m~="tabpanel"] *, 
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] span { text-align: left !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] > div:last-child { align-items: flex-start !important; }
}

@media (max-width: 768px) {
  /* How it works: the open tab and its panel read as one block, name shown once */
  body section[data-screen-label="How it works"] [data-m~="tabstrip"] > button[style*="background: rgb(18, 18, 18)"],
  body section[data-screen-label="How it works"] [data-m~="tabstrip"] > button[style*="background: #121212"] { border-radius: 12px 12px 0 0 !important; margin-bottom: 0 !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] { border-radius: 0 0 16px 16px !important; margin-top: 0 !important; border-top: 0 !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] > div:first-child > span:first-child > span:first-child { display: none !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-top: 20px !important; }
}

@media (max-width: 768px) {
  /* Why teams choose: the section gap must not fall between accordion rows */
  body section[data-screen-label="Why teams choose ValueText"] { gap: 56px !important; }
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] { margin: 0 0 24px !important; padding-top: 22px !important; border-top: 0 !important; }
  /* and the open row reads like the one in How it works */
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabstrip"] > button[style*="background: rgb(250, 250, 250)"] {
    background: #121212 !important; border-color: #121212 !important; border-radius: 12px 12px 0 0 !important; margin-bottom: 0 !important;
  }
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabstrip"] > button[style*="background: rgb(250, 250, 250)"] > span:last-child { color: #fff !important; }
}

@media (max-width: 768px) {
  /* thread plate: the outcome tick keeps its line */
  body [data-m~="threadfoot"], body [data-m~="threadfoot"][data-m~="keep"] { flex-wrap: nowrap !important; align-items: flex-start !important; }
  body [data-m~="threadfoot"] > svg { position: relative; top: 3px; }
}

@media (max-width: 768px) {
  /* Why teams choose: the three stats read centred when they stack */
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] div[style*="repeat(3, minmax(0px, 1fr))"] { align-items: center !important; gap: 22px !important; }
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] div[style*="repeat(3, minmax(0px, 1fr))"] > span { align-items: center !important; text-align: center !important; }
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] div[style*="repeat(3, minmax(0px, 1fr))"] > span > span { text-align: center !important; }
}

@media (max-width: 768px) {
  /* PHONE TABS: one sliding strip attached to the card, content in the container below */
  body [data-m~="tabstrip"] {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; justify-content: flex-start !important; gap: 0 !important;
    border: 1px solid #ececec !important; border-bottom: 0 !important; border-radius: 14px 14px 0 0 !important;
    background: #fafafa !important; margin: 0 !important; width: 100%;
  }
  body [data-m~="tabstrip"]::-webkit-scrollbar { display: none; }
  body [data-m~="tabstrip"] > button {
    flex: none !important; width: auto !important; white-space: nowrap;
    border: 0 !important; border-radius: 0 !important; margin: 0 !important;
    padding: 15px 18px !important; gap: 10px !important;
  }
  body [data-m~="tabstrip"] > button[style*="background: rgb(18, 18, 18)"],
  body [data-m~="tabstrip"] > button[style*="background: rgb(250, 250, 250)"] { background: #121212 !important; border-radius: 0 !important; }
  body [data-m~="tabstrip"] > button[style*="background: rgb(18, 18, 18)"] > span,
  body [data-m~="tabstrip"] > button[style*="background: rgb(250, 250, 250)"] > span { color: #fff !important; }
  body [data-m~="tabstrip"] > button[style*="background: rgb(18, 18, 18)"] > span:first-child,
  body [data-m~="tabstrip"] > button[style*="background: rgb(250, 250, 250)"] > span:first-child { color: #ff5a8d !important; }

  body [data-m~="tabpanel"] { width: 100%; margin: 0 0 8px !important; border-radius: 0 0 14px 14px !important; }
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] {
    border: 1px solid #ececec !important; border-top: 0 !important; padding: 26px 18px 28px !important;
    box-sizing: border-box !important;
  }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] { border: 1px solid #ececec !important; border-top: 0 !important; }
  /* the card head keeps the flow name now the tab no longer sits directly above it */
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] > div:first-child > span:first-child > span:first-child { display: block !important; }
}

@media (max-width: 768px) {
  /* How it works on phone: the connector becomes a vertical line down the steps */
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span > span[style*="top: 19px"] {
    display: block !important; top: 46px !important; bottom: -34px !important; left: 19px !important; right: auto !important;
    width: 1px !important; height: auto !important; background: #ececec !important;
  }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span:last-child > span[style*="top: 19px"] { display: none !important; }
}

@media (max-width: 768px) {
  /* Why teams choose, phone only: the desktop card frame steps aside, the strip + panel build their own */
  body [data-m~="cardwrap"] { border: 0 !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; }
  body [data-m~="cardwrap"] > [data-m~="tabstrip"] { border-bottom: 0 !important; }
  body [data-m~="cardwrap"] > [data-m~="tabpanel"] { padding: 0 !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet: the Why card keeps its frame and reads like How it works, tabs scrolling if they do not fit */
  body [data-m~="cardwrap"] { border: 1px solid #ececec !important; border-radius: 20px !important; overflow: hidden !important; background: #fff !important; }
  body [data-m~="cardwrap"] > [data-m~="tabstrip"] {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; justify-content: flex-start !important; gap: 0 !important;
    border-bottom: 1px solid #ececec !important; background: #fafafa !important; width: 100%;
  }
  body [data-m~="cardwrap"] > [data-m~="tabstrip"]::-webkit-scrollbar { display: none; }
  body [data-m~="cardwrap"] > [data-m~="tabstrip"] > button { flex: none !important; white-space: nowrap; }
  body [data-m~="cardwrap"] > [data-m~="tabpanel"] { padding: 44px 36px 46px !important; box-sizing: border-box !important; grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
}


/* ───────── LOCKED 19 Sep 2026 · responsive decisions ─────────
   Tabs on a phone: one scrolling strip joined to the card (the "PHONE TABS"
   block above). The earlier "each tab opens its own panel" block is
   superseded; it is kept only for the hooks the strip still relies on.
   Wide tables: scroll inside their container with the first column pinned.
   Rails: one tap-to-open "On this page" block, built by mobile-toc.js.   */

details[data-m-toc] { display: contents; }
details[data-m-toc] > summary { display: none; }

@media (max-width: 768px) {
  body details[data-m-toc] { display: block; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; background: #fff; }
  body details[data-m-toc] > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; box-sizing: border-box; padding: 13px 16px; cursor: pointer;
    font-family: 'Geist Mono', 'Geist Mono Fallback', monospace; font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: #121212; background: #fafafa;
  }
  body details[data-m-toc] > summary::after {
    content: "+"; font-family: 'Instrument Sans', 'Instrument Sans Fallback', sans-serif; font-size: 18px; line-height: 1;
    color: #121212; transition: transform 180ms cubic-bezier(.2,.7,.2,1);
  }
  body details[data-m-toc][open] > summary::after { transform: rotate(45deg); }
  body details[data-m-toc] > div { padding: 10px 6px 14px !important; }
  body details[data-m-toc] > div > span:first-child { display: none !important; }

  body div:has(> table thead th:nth-child(3)) table th:first-child,
  body div:has(> table thead th:nth-child(3)) table td:first-child {
    position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #ececec;
  }
  body div:has(> table thead th:nth-child(3)) table thead th:first-child { background: #fafafa; }
}


/* ───────── 19 Sep sections, phone pass (2026-09-19) ───────── */
@media (max-width: 768px) {
  /* How it works: number in a gutter, copy beside it, the line runs down the gutter */
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] { gap: 0 !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span {
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px;
    align-items: start !important; text-align: left !important; padding: 0 0 28px !important;
  }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span:last-child { padding-bottom: 0 !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span > span:nth-child(2) { grid-column: 1; grid-row: 1 / span 2; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span > span:nth-child(3) { grid-column: 2; grid-row: 1; margin-top: 7px !important; text-align: left !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span > span:nth-child(4) { grid-column: 2; grid-row: 2; text-align: left !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] div[style*="repeat(4, minmax(0px, 1fr))"] > span > span[style*="top: 19px"] { bottom: -14px !important; }
  body section[data-screen-label="How it works"] [data-m~="tabpanel"] > div:nth-child(2) { padding: 30px 18px 32px !important; }

  /* Why teams choose: the three stats read left, like everything above them */
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] div[style*="repeat(3, minmax(0px, 1fr))"] { align-items: start !important; gap: 18px !important; }
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] div[style*="repeat(3, minmax(0px, 1fr))"] > span,
  body section[data-screen-label="Why teams choose ValueText"] [data-m~="tabpanel"] div[style*="repeat(3, minmax(0px, 1fr))"] > span > span { align-items: flex-start !important; text-align: left !important; }
}

@media (max-width: 768px) {
  /* Common questions: the card reads left, only the section header stays centred */
  body section[data-screen-label="Common questions"] details,
  body section[data-screen-label="Common questions"] details summary,
  body section[data-screen-label="Common questions"] details h3,
  body section[data-screen-label="Common questions"] details p,
  body section[data-screen-label="Common questions"] details span { text-align: left !important; }

  /* Ownership rows: the bare plus gets a real tap target */
  body section[data-screen-label="Ownership and control"] summary .vt-plus {
    display: flex !important; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; margin: -6px 0 0 0; box-sizing: border-box !important;
  }

  /* Get in touch: the title keeps its arrow on the same line */
  body section[data-screen-label="Get in touch"] [style*="justify-content: space-between"][style*="align-items: baseline"] { flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline !important; }
}

@media (max-width: 768px) {
  /* every box on the 19 Sep page measures like the rest of the site */
  body section[data-screen-label] [data-m~="tabpanel"],
  body section[data-screen-label] [data-m~="tabstrip"],
  body section[data-screen-label] [data-m~="tabwrap"] { box-sizing: border-box !important; }

  /* How we compare: the whole table slides as one (the pinned question column was dropped 22 Sep) */
  body section[data-screen-label="How we compare"] > div:nth-child(2) {
    overflow-x: auto !important; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  body section[data-screen-label="How we compare"] > div:nth-child(2)::-webkit-scrollbar { display: none; }
  body section[data-screen-label="How we compare"] > div:nth-child(2) > div[data-m~="keep"] {
    grid-template-columns: 190px 185px 185px !important; min-width: 560px; column-gap: 0 !important;
  }
  body section[data-screen-label="How we compare"] > div:nth-child(2) > div[data-m~="keep"] > * {
    grid-column: auto !important;
  }
}

@media (max-width: 1024px) {
  /* Stats strip: five stats become a row of three over a row of two, each row filling the width; rules redrawn per row; every figure centred in its cell, and no gap between cells, so the drawn rules sit on the cell edges and "centred" means centred between them (Rosen, 2026-09-25) */
  body section[data-screen-label="At scale, band"] [data-m~="keep"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 !important; }
  body section[data-screen-label="At scale, band"] [data-m~="keep"] > div { grid-column: span 2; padding: 28px 20px !important; border-left: 1px solid #ececec !important; }
  body section[data-screen-label="At scale, band"] [data-m~="keep"] > div:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid #ececec; }
  body section[data-screen-label="At scale, band"] [data-m~="keep"] > div:nth-child(1), body section[data-screen-label="At scale, band"] [data-m~="keep"] > div:nth-child(4) { border-left: 0 !important; }
}
@media (max-width: 768px) {
  /* Stats strip: smaller figures, labels may wrap */
  body section[data-screen-label="At scale, band"] [data-m~="keep"] > div { padding: 20px 12px !important; gap: 6px !important; }
  body section[data-screen-label="At scale, band"] [data-m~="keep"] > div > span:first-child { font-size: 21px !important; }
  body section[data-screen-label="At scale, band"] [data-m~="keep"] > div > span:last-child { font-size: 10.5px !important; letter-spacing: .12em !important; white-space: normal !important; }
  /* Ownership keeps ledger: numeral and line stay on one row */
  body section[data-screen-label="Ownership and control"] div[style*="grid-template-columns: 38px"] {
    grid-template-columns: 38px minmax(0, 1fr) !important; align-items: baseline !important; gap: 14px !important;
  }
}


/* One record (2a, 22 Sep): channel cards become a row of three above the window, the connector goes */
@media (max-width: 1024px) {
  body [data-m~="onerec"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; align-items: start !important; }
  body [data-m~="onerec"] > div:first-child { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  body [data-m~="onerec"] > div:first-child > div { height: auto !important; }
  body [data-m~="onerec"] > div:nth-child(2) { display: none !important; }
}
@media (max-width: 768px) {
  body [data-m~="onerec"] > div:first-child > div { padding: 12px !important; gap: 6px !important; }
  body [data-m~="onerec"] > div:first-child > div > span:nth-child(2),
  body [data-m~="onerec"] > div:first-child > div > span:first-child > span:last-child { display: none !important; }
  body [data-m~="onerec"] > div:first-child > div > span:last-child { justify-content: flex-start !important; }
  body [data-m~="onerec"] > div:first-child > div > span:last-child > span { display: none !important; }
  body [data-m~="onerec"] [style*="max-height: 524px"] { max-height: 460px !important; }
  body [data-m~="onerec"] [style*="padding: 20px 24px 24px"] { padding: 16px !important; }
  body [data-m~="onerec"] [style*="padding: 12px 24px"], body [data-m~="onerec"] [style*="padding: 16px 24px"] { padding-inline: 16px !important; }
  body [data-m~="onerec"] [style*="max-width: 82%"] { max-width: 92% !important; }
}

/* Security ledger rows stay one line on phone, narrower time column */
@media (max-width: 768px) {
  body section[data-screen-label="Security"] div[data-m~="keep"][style*="grid-template-columns: 90px"] { grid-template-columns: 52px minmax(0, 1fr) auto !important; gap: 12px !important; padding-inline: 16px !important; font-size: 15px !important; }
}

/* Split feature: copy above the figure once stacked, whichever side it sits on desktop */
@media (max-width: 1024px) {
  body [data-m~="splitrow"] > div:first-child { order: 1 !important; }
  body [data-m~="splitrow"] > div:last-child { order: 2 !important; min-height: 280px !important; }
}

/* Steps: once the row wraps, the shared rule goes and each step carries its own hairline */
@media (max-width: 1024px) {
  body [data-m~="steprow"] { border-top: 0 !important; row-gap: 32px !important; }
  body [data-m~="steprow"] > div { border-top: 1px solid #ececec; }
}

/* Table (library): on phone the whole table slides as one, first column included (user 2026-09-22, as How we compare); Quote: the H3 phone size */
@media (max-width: 768px) {
  /* no cell wraps, the row grows to its content */
  body [data-m~="libtable"] [role="row"] { min-width: max-content !important; }
  body [data-m~="libtable"] [role="row"] > span { white-space: nowrap; }
  body section[data-lib="Quote"] blockquote { font-size: 30px !important; }
}

/* Page library: a rail (topics, contents) stacks above the body once the frame collapses, whichever side it sits on desktop */
@media (max-width: 1024px) {
  body [data-m~="pgframe"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  body [data-m~="pgframe"] > [data-m~="pgrail"] { order: 1; position: static !important; max-width: none !important; width: 100%; box-sizing: border-box; }
  body [data-m~="pgframe"] > [data-m~="pgbody"] { order: 2; width: 100%; box-sizing: border-box; min-width: 0; }
  /* title first: the head block (breadcrumb, H1, standfirst) sorts before the rails when the body is display: contents */
  body [data-m~="pgframe"] [data-m~="pghead"] { order: 0 !important; width: 100%; box-sizing: border-box; min-width: 0; }
  body [data-m~="pgframe"] [data-m~="pgrail"] > div[style*="max-height"] { max-height: none !important; overflow: visible !important; }
}

/* FAQ page (7a): the category tabs become one scrolling strip on phone; the summary keeps numeral, question and plus on one row, the category label hides */
@media (max-width: 768px) {
  body [data-m~="faqtabs"] { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; width: calc(100% + 40px) !important; max-width: none !important; margin-inline: -20px; padding-inline: 20px; box-sizing: border-box; align-self: stretch; }
  body [data-m~="faqtabs"] > button { flex: none; }
  body [data-m~="faqtabs"]::after { content: ''; flex: none; width: 4px; }
  body details > summary[data-m~="keep"][style*="62px minmax(0"] { grid-template-columns: 32px minmax(0, 1fr) 44px !important; gap: 12px !important; padding: 20px 16px !important; }
  body details > summary[data-m~="keep"] > h2 { font-size: 17.5px !important; }
  body details > summary[data-m~="keep"] + p { padding: 0 16px 24px 60px !important; }
}

/* Stats strip (library 45): the row wraps to two per row on tablet and one on phone, each on its own hairline, the vertical rules dropped */
@media (max-width: 1024px) {
  body [data-m~="statrow"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-top: 0 !important; }
  body [data-m~="statrow"] > div { border-right: 0 !important; border-top: 1px solid #ececec; padding: 24px 0 24px !important; }
}
@media (max-width: 768px) {
  body [data-m~="statrow"] { grid-template-columns: minmax(0, 1fr) !important; }
  body [data-m~="statrow"] > div > span:first-child { font-size: 44px !important; }
}

/* Changelog timeline (5b): on phone the spine moves to the left edge and the date sits above the release in the same column */
@media (max-width: 768px) {
  body [data-m~="tl"] { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 0 16px !important; }
  body [data-m~="tl"] > [data-m~="tl-spine"] { order: -1; grid-row: 1 / span 2; }
  body [data-m~="tl"] > [data-m~="tl-date"], body [data-m~="tl"] > [data-m~="tl-body"] { grid-column: 2; }
  body [data-m~="tl"] > [data-m~="tl-date"] { padding-top: 32px !important; }
  body [data-m~="tl"] > a[data-m~="tl-body"] { padding-top: 12px !important; }
}


/* 08 What it costs, full (locked 24 Sep): the base fee band's grey line hides on phone; the ticked lines stack */
@media (max-width: 768px) {
  body [data-m~="feeband"] h3 { white-space: normal !important; font-size: 21px !important; }
  body [data-m~="feeband"] [data-m~="hide"] { display: none !important; }
  body [data-m~="feeband"] [style*="repeat(4, minmax(0"] { grid-template-columns: minmax(0, 1fr) !important; }
}


/* 06 Compare (24 Sep): the columns sit on grey, so the outer cells keep 14px inside (data-m lanes, Lib - Compare only) */
@media (max-width: 1024px) {
  /* the generic two-column tablet rule outranked the table's own three columns; this one outranks it */
  body section[data-screen-label="How we compare"] [data-m~="lanes"] > div[style*="minmax(0px, 1.25fr)"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
  body section[data-screen-label="How we compare"] [data-m~="lanes"] > div > span:first-child { padding-left: 14px !important; }
  body section[data-screen-label="How we compare"] [data-m~="lanes"] > div > span:last-child { padding-right: 14px !important; }
}
@media (max-width: 768px) {
  /* phone: the question sits on the same line as its two answers */
  body section[data-screen-label="How we compare"] [data-m~="lanes"] > div[data-m~="keep"]:not(:first-child)[style*="minmax(0px, 1.25fr)"] > span { padding-block: 16px !important; }
}


/* 07 By industry (24 Sep): the non-profit card keeps its arrow top right on phone; 10% off drops under the text, bottom right */
@media (max-width: 768px) {
  body [data-m~="npcard"] { grid-template-columns: minmax(0, 1fr) 44px !important; }
  body [data-m~="npcard"] > div { grid-row: 1 !important; align-self: start !important; }
  body [data-m~="npcard"] > span:last-child { grid-column: 1 / -1 !important; }
}

/* AI scroller (Lib - AI, locked 24 Sep; drawn as Lib - AI v2): card rows longer than the screen scroll sideways with snap; arrows above 768, swipe below.
   Tablet: two cards per screen, arrows stay. Phone: one card at 86% so the next peeks, gap 16, the text under the plate padded 24 and the number in the plate at 20 / 24, arrows hidden, the counter stays under the header. */
@media (max-width: 1024px) {
  body [data-m~="aiscroll"] > div { flex-basis: calc((100% - 24px) / 2) !important; }
}
@media (max-width: 768px) {
  body [data-m~="aiscroll"] { gap: 16px !important; }
  body [data-m~="aiscroll"] > div { flex-basis: 86% !important; }
  body [data-m~="aitext"] { padding: 24px !important; }
  body [data-m~="ainum"] { top: 20px !important; left: 24px !important; }
  body [data-m~="aihead"] { row-gap: 24px !important; }
  body [data-m~="aictl"] { margin-bottom: 0 !important; }
  body [data-m~="aictl"] > button { display: none !important; }
}

/* 11 Centered hero v2 (options 24 Sep, Centered hero - Options): no figure. Below 1024 the section sizes to its content, the H1 follows the type table (64 tablet, 44 phone),
   the column tightens, the spacer that leaves room for the glow shrinks and the floor band shortens; on phone the side glows narrow to the edges. */
@media (max-width: 1024px) {
  body [data-m~="hero2"] { min-height: 0 !important; }
  body [data-m~="hero2"] h1 { font-size: clamp(44px, 7.6vw, 64px) !important; }
  body [data-m~="hero2col"] { padding-top: 88px !important; padding-bottom: 88px !important; }
  body [data-m~="hero2gap"] { height: 48px !important; }
  body [data-m~="hero2band"] { height: 160px !important; }
}
@media (max-width: 768px) {
  body [data-m~="hero2col"] { padding-top: 56px !important; padding-bottom: 72px !important; }
  body [data-m~="hero2gap"] { height: 24px !important; }
  body [data-m~="hero2band"] { height: 120px !important; }
}

/* 15 One record (locked 24 Sep, 3a of One record - Layout options Turn 3): the section on the mockup rules. Below 1024 the channel cards sit in a row of three above the record,
   the connector gives way to the node on a 96px vertical line with the light falling (the stacked mockups), the record takes the full width and the thread's channel rules
   stay sticky inside the thread (a scroll box in the drawing, not the page). Phone: the cards keep the channel and the count; the record page drops its search, nav
   and record tabs so it reads as one card, the head drops the count, the channel rule wraps without its hairlines, bubbles 88%. */
@media (max-width: 1024px) {
  body [data-m~="or2fig"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; }
  body [data-m~="or2cards"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  body [data-m~="or2cards"] > div { height: auto !important; }
  body [data-m~="or2link"] { display: none !important; }
  body [data-m~="or2linkv"] { display: flex !important; }
  body [data-m~="or2thread"] [data-m~="or2rule"] { position: sticky !important; top: 0 !important; }
}
@media (max-width: 768px) {
  body [data-m~="or2cards"] > div { padding: 12px !important; gap: 8px !important; }
  body [data-m~="or2quote"], body [data-m~="or2time"], body [data-m~="or2arrow"] { display: none !important; }
  body [data-m~="or2pill"] { border: 0 !important; padding: 0 !important; background: transparent !important; }
  body [data-m~="or2search"], body [data-m~="or2nav"], body [data-m~="or2tabs"], body [data-m~="or2ztabs"], body [data-m~="or2count"] { display: none !important; }
  body [data-m~="or2area"] { padding: 12px !important; gap: 12px !important; }
  body [data-m~="or2thread"] { max-height: 440px !important; }
  body [data-m~="or2thread"] [data-m~="or2rule"] { flex-wrap: wrap !important; row-gap: 6px !important; padding-inline: 12px !important; }
  body [data-m~="or2hair"] { display: none !important; }
  body [data-m~="or2msgs"] { padding: 4px 14px 20px !important; }
  body [data-m~="or2bub"] { max-width: 88% !important; }
}

/* 17 Ownership, short (24 Sep, user): the claims take the What it costs, full price-card treatment; the hairline field and the foot strip are gone.
   Below 1024 as the price cards: the dividers go, the claims stack (two, then one on phone) and the pink mark starts at the left and grows to the full width. The old own rules stay for the homepage copy. */
@media (max-width: 1024px) {
  body [data-m~="own2sec"] { padding-block: 88px !important; gap: 56px !important; }
  body [data-m~="own2"] { gap: 28px !important; }
  body [data-m~="own2"] > div { border-left: 0 !important; padding-inline: 0 !important; }
  body [data-m~="own2"] > div > span[style*="height: 2px"] { left: 0 !important; }
  body [data-m~="own2"] > div > span[style*="height: 2px"][style*="calc(100%"] { width: 100% !important; }
}
@media (max-width: 768px) {
  body [data-m~="own2sec"] { padding-block: 72px !important; }
}

/* 39 Quote v2 (24 Sep, options): four drawings of one quote. Section padding 88 / 72; the message bubble 30 then 26 with 28 / 24 padding;
   the read-along 44 then 34; the ink quote 40 then 32; the record grid stacks under 1024 with the card full width; the caption wraps the stars under the name on phone. */
@media (max-width: 1024px) {
  body [data-m~="qt2sec"] { padding-block: 88px !important; }
  body [data-m~="qt2bub"] { font-size: 30px !important; padding: 28px 32px !important; }
  body [data-m~="qt2read"] { font-size: 44px !important; }
  body [data-m~="qt2ink"] { font-size: 40px !important; padding: 48px 0 56px !important; }
  body [data-m~="qt2rec"] { font-size: 32px !important; }
  body [data-m~="qt2grid"] { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; }
}
@media (max-width: 768px) {
  body [data-m~="qt2sec"] { padding-block: 72px !important; }
  body [data-m~="qt2bub"] { font-size: 26px !important; padding: 24px 24px !important; border-radius: 22px 22px 22px 6px !important; }
  body [data-m~="qt2read"] { font-size: 34px !important; }
  body [data-m~="qt2ink"] { font-size: 32px !important; padding: 40px 0 48px !important; }
  body [data-m~="qt2rec"] { font-size: 28px !important; }
  body [data-m~="qt2cap"] { flex-wrap: wrap !important; }
  body [data-m~="qt2cap"] > [role="img"] { width: 100%; padding-left: 60px; }
}

/* ============================================================================
   THE BRIDGE. Everything above this line is the 24 September design export's
   mobile.css, verbatim: the sheet every drawn Lib artboard and product mockup of
   that export is authored against. First brought onto the site on 2026-09-23 from
   the 22 September library (Rosen: "yes"), the same way tokens.css was brought on
   at de6c1875; re-based on 2026-09-24 onto the 24 September sheet, which is the 22
   September sheet with 119 lines added and none removed: 57 selectors for the
   sections that export changed or added (What it costs full, Compare, By industry,
   AI, Centered hero, One record, Ownership short, Quote v2).

   The export cannot know about work done on this site since, so the rules below
   are the ones the served sheet carried that the export has no selector for at
   all. Measured with postcss, not by diffing lines: the two sheets share 375
   selectors, the export adds 225, and exactly 60 existed only here. The font
   size ladder is NOT among them; the export carries every rung, each widened
   with the brand book's own size beside it.

   The 60, in six groups: the 1025-1160 article band; tablet and phone grid
   collapses for shapes the library does not draw; the seventeen .vt-fig phone
   rules for the figure library the build injects; the flex-row bullet fix of
   RULE 2026-09-18 (22 of 25 bullets were broken at 390); the body type base
   (pre, code, h1-h6, p); and the pricing page's estimate strip, fee items and
   tooltip.

   Proven against a control, three builds of all 147 routes scanned with
   reports/overflow-scan.mjs at 390, 820 and 1440:

     control, the sheet as it was          14 findings
     the export alone, no bridge           21 findings   <- the calibration
     the export plus this bridge           14 findings, the same 14

   Re-based 2026-09-24, the same three builds of all 147 routes, same scan:

     control, the sheet as it was          17 findings (17 again on a second scan
                                           of the same build: same routes, 1px)
     the 24 Sep export alone, no bridge    24 findings   <- the calibration
     the 24 Sep export plus this bridge    17 findings, the same 17

   And exactly: of the 57 selectors the 24 Sep sheet adds, none matches a single
   element on any of the 147 built routes at 390 (reports/selector-probe.mjs;
   calibrated by "body pre" and "body code", which match on 12 and 19 routes).
   The re-base cannot move an existing page. It gives the new sections their
   phone layout, and nothing else.

   The seven the export alone added were code blocks running off the phone on
   /docs/single-sms-api/ (+590px), /docs/chat_conversation_into_activity_history/
   (+189px) and four more, plus the "STOP, UNSUBSCRIBE, CANCEL" list: the body
   code rule and the bullet fix, the two groups a line diff hides inside 771
   changed lines. Order is the served sheet's own; appended so a site fix has
   the last word over the foundation.
   ============================================================================ */

@media (min-width: 1025px) and (max-width: 1160px) {
  body section[style*="grid-template-columns: 280px 760px"] { grid-template-columns: 280px minmax(0, 1fr) !important; }
}
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(7"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body [style*="1fr) minmax(0"][style*="1fr) minmax(0"],
  body [style*="grid-template-columns: repeat(4,"]:not([data-m~="steps"]):not([data-m~="logos"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body [style*="grid-template-columns: repeat(5, 1fr)"][style*="grid-template-rows: auto 56px auto"][style*="isolation: isolate"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; column-gap: 20px !important; }
  body [style*="grid-template-columns"][style*="1fr) minmax(0"][style*="align-items: end"],
  body [style*="grid-template-columns"][style*="1fr) minmax(0"][style*="align-items: center"]:not([data-m~="faqrow"]),
  body [style*="grid-template-columns"][style*="1.2fr) minmax(0"],
  body [style*="grid-template-columns"][style*="1.25fr) minmax(0"],
  body [style*="grid-template-columns"][style*="1fr) auto"][style*="align-items"]:not([data-m~="faqrow"]) { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 32px !important; }
  [style*="grid-template-columns: repeat(3, minmax"],
  [style*="grid-template-columns: repeat(4, 1fr)"]:not([data-m~="steps"]):not([data-m~="logos"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  body .vt-fig { gap: 16px !important; }
  body .vt-fig-strip { height: 34px !important; padding: 0 10px !important; }
  body .vt-fig-name { gap: 7px !important; padding-left: 11px !important; font-size: 9px !important; }
  body .vt-fig-dot { width: 5px !important; height: 5px !important; }
  body .vt-fig-tag { display: none !important; }
  body .vt-fig-cap { font-size: 11px !important; }
  body .vt-fig-box-drawn { aspect-ratio: auto !important; }
  body .vt-fig-flow { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 16px !important; height: auto !important; }
  body .vt-fig-step { border-radius: 10px !important; padding: 12px 16px !important; gap: 4px !important; }
  body .vt-fig-step-eyebrow { font-size: 9px !important; }
  body .vt-fig-step-title { font-size: 15px !important; }
  body .vt-fig-step-detail { display: none !important; }
  body .vt-fig-arrow { font-size: 14px !important; }
  body .vt-fig-join { height: 16px !important; }
  body .vt-fig-join-rule { width: 1px !important; height: 16px !important; margin: 0 auto !important; }
  body .vt-fig-arrow-across { display: none !important; }
  body .vt-fig-arrow-down { display: block !important; }
  [style*="1fr) auto"]:not([style*="auto 28px"]):not([style*="grid-template-columns: 90px"]):not([style*="grid-template-columns: 14px"]) { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(4,"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(7"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body [style*="flex-direction: column"][style*="align-items: center"] > [style*="display: flex"]:not([style*="flex-direction: column"]) { justify-content: center !important; text-align: center; }
  body footer div[style*="flex-direction: column"] > a,
  body aside a:not([style*="height: 40px"]),
  body aside button,
  body div[style*="height: 48px"] > a,
  body [data-m~="tabs"] button,
  body [data-m~="chapters-rail"] > button { min-height: 44px !important; align-content: center !important; box-sizing: border-box !important; }
  body article a[style*="display: inline-flex"][style*="align-items: center"] { min-height: 44px !important; box-sizing: border-box !important; }
  body footer div[style*="flex-direction: column"][style*="gap: 18px"] { gap: 4px !important; }
  body li[style*="display: flex"][style*="align-items: flex-start"] { flex-wrap: nowrap !important; }
  body li[style*="display: flex"][style*="align-items: flex-start"] > span:last-child { min-width: 0; }
  body [style*="display: grid"][style*="align-items: center"]:not([data-m~="faqrow"]):not(.vt-fig-flow) { align-items: start !important; }
}
@media (max-width: 520px) {
  body footer span[style*="font-size: clamp(90px, 18vw, 250px)"] { font-size: 20vw !important; }
}
body pre,
  body code { overflow-wrap: anywhere; }
body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6,
  body p { overflow-wrap: break-word; }
@media (max-width: 1024px) {
  body [data-m~="est-strip"] [data-m~="col"] > [data-m~="ctas"] { justify-self: stretch; }
}
@media (max-width: 768px) {
  body [data-m~="nptoggle"] { margin-left: 0 !important; margin-bottom: 0 !important; margin-top: 12px; flex-basis: 100%; justify-content: center; }
}
@media (max-width: 1024px) {
  body [data-m~="feeitems"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  body [data-m~="feeitems"] { gap: 20px 16px !important; padding-top: 20px !important; }
  body [data-m~="tip"]#feeInfo { left: auto !important; right: -24px !important; width: 260px !important; }
}
body [data-m~="est-strip"] input[type="number"][style*="width: 112px"] { width: 160px !important; }

/* THE COMPARE TABLE SLIDES, it does not fold (Rosen, 2026-09-23: "on mobile it's not
   working, I'm not able to slide the whole table"). The export's own phone rule folds
   this section's three columns into two, which is why there was nothing to slide, and the
   site rule is that a wide table slides. This block is later than that rule, so it wins:
   the three columns stay, each row grows to its content, and the wrapper scrolls. */
@media (max-width: 768px) {
  body section[data-screen-label="How we compare"] div[style*="minmax(0px, 1.25fr)"],
  body section[data-screen-label="How we compare"] div[style*="minmax(0, 1.25fr)"] {
    grid-template-columns: minmax(200px, 1.25fr) minmax(150px, 1fr) minmax(150px, 1fr) !important;
    row-gap: 0 !important;
    min-width: max-content !important;
  }
  body section[data-screen-label="How we compare"] [data-m~="scroll"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: calc(100% + 40px) !important;
    margin-inline: -20px;
    padding-inline: 20px;
  }
  body section[data-screen-label="How we compare"] [data-m~="scroll"] > div { white-space: nowrap; }
  body section[data-screen-label="How we compare"] [data-m~="scroll"] > div > span { white-space: normal; }
}