.blog-prose .mermaid{display:flex;justify-content:center;margin:24px 0;overflow-x:auto}.blog-prose .mermaid svg{border-radius:8px;height:auto;max-width:100%}.blog-prose .mermaid foreignObject *,.mermaid-lightbox-svg-wrap foreignObject *{color:#e2e8f0!important}body.light .blog-prose .mermaid foreignObject *,body.light .mermaid-lightbox-svg-wrap foreignObject *{color:#0c2340!important}body.light .blog-prose .mermaid{background:transparent}.blog-prose h1[id],.blog-prose h2[id],.blog-prose h3[id],.blog-prose h4[id]{min-height:0!important;position:static!important}.blog-prose h2{font-size:24px;padding-bottom:12px;padding-top:24px}.blog-prose h2,.blog-prose h3{color:var(--tcb-color-0);font-family:Nunito,sans-serif;font-weight:700;line-height:1.4em;margin-bottom:0;margin-top:0}.blog-prose h3{font-size:20px;padding-bottom:8px;padding-top:16px}.blog-prose p{color:var(--tcb-color-0);font-family:Nunito,sans-serif;font-size:18px;line-height:1.8em;margin-bottom:16px}.blog-prose a:not(.tve_btn):not([class*=tve_]):not([class*=heateor]):not(.download-source-btn):not(.download-btn){color:#22d3ee!important;text-decoration:underline!important;text-decoration-color:rgba(34,211,238,.35)!important;text-underline-offset:2px!important}.blog-prose a:not(.tve_btn):not([class*=tve_]):not([class*=heateor]):not(.download-source-btn):not(.download-btn):hover{color:#67e8f9!important;text-decoration:underline!important;text-decoration-color:rgba(103,232,249,.5)!important;text-underline-offset:2px!important}.blog-prose li h4,.blog-prose li h4 a:not(.tve_btn):not([class*=tve_]){color:#00aed3!important;text-decoration:none!important}body.light .blog-prose li h4,body.light .blog-prose li h4 a:not(.tve_btn):not([class*=tve_]){color:#0e7490!important}.blog-prose ol,.blog-prose ul{color:var(--tcb-color-0);font-family:Nunito,sans-serif;font-size:18px;line-height:1.8em;margin-bottom:16px;padding-left:24px}.blog-prose li{margin-bottom:8px}.blog-prose pre{background:#f7f7f7!important;border-left:4px solid #2b7bb5;border-radius:8px;font-size:14px;line-height:1.6;margin-bottom:24px;overflow-x:auto;padding:1.25rem}.blog-prose pre code{background:none;border-radius:0;color:inherit;font-size:inherit;padding:0}.blog-prose code{background-color:hsla(0,0%,50%,.15);border-radius:3px;color:#61687c;font-size:.9em;padding:2px 6px}.blog-prose blockquote{background-color:transparent!important;border:1px solid #fff!important;border-radius:0!important;color:inherit!important;font-style:italic;margin:24px 0!important;padding:32px!important}.blog-prose blockquote.is-note-box{background-color:#c98600!important;border:none!important;border-radius:0!important;color:#000!important;font-style:normal;margin:40px 0!important;padding:40px 30px!important}.blog-prose blockquote.is-regular-quote{background-color:transparent!important;border:1px solid #fff!important;font-style:italic;margin:24px 0!important;padding:32px!important}#theme-content-section .blog-prose blockquote.is-note-box p,#theme-content-section .blog-prose blockquote.is-note-box p a,#theme-content-section .blog-prose blockquote.is-note-box p span,#theme-content-section .blog-prose blockquote.is-note-box p strong{color:#000!important;margin-bottom:0}.blog-prose blockquote.is-note-box a{color:#0e4f72!important;text-decoration:underline!important}#theme-content-section .blog-prose blockquote.is-note-box>p:first-child>strong:first-child{color:#fff!important;display:block;font-size:28px;font-weight:700;margin-bottom:12px}.blog-prose img{border-radius:4px;display:block!important;height:auto!important;margin:16px 0!important;max-width:100%!important}.blog-prose table{border-collapse:collapse;width:100%}.blog-prose table:not(.tve_table){table-layout:fixed}.blog-prose .table-wrapper{margin-bottom:24px}.blog-prose td:not(.tve_table_cell),.blog-prose th:not(.tve_table_cell){border:1px solid hsla(0,0%,100%,.1);color:#e2e8f0;font-size:14px;line-height:1.6;padding:10px 14px;text-align:left;vertical-align:top}.blog-prose th:not(.tve_table_cell){background-color:#0891b2;border-color:#0e7490;color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.blog-prose td:not(.tve_table_cell):first-child{color:#67e8f9;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;font-weight:600;width:42%;word-break:break-word}.blog-prose td:not(.tve_table_cell) code{background:hsla(0,0%,100%,.12);border-radius:3px;color:#67e8f9;font-size:12px;padding:1px 5px;white-space:pre-wrap;word-break:break-word}.blog-prose tbody tr:not(.tve_table_row):nth-child(2n) td:not(.tve_table_cell){background-color:hsla(0,0%,100%,.04)}body.light .blog-prose td:not(.tve_table_cell),body.light .blog-prose th:not(.tve_table_cell){border-color:rgba(0,0,0,.12);color:#1e293b}body.light .blog-prose td:not(.tve_table_cell):first-child{color:#0e7490}body.light .blog-prose td:not(.tve_table_cell) code{background:rgba(0,0,0,.07);color:#0e7490}body.light .blog-prose tbody tr:not(.tve_table_row):nth-child(2n) td:not(.tve_table_cell){background-color:rgba(0,0,0,.025)}@media (max-width:767px){.blog-prose table:not(.tve_table){table-layout:auto}.blog-prose thead:not(.tve_empty_dropzone){display:none}.blog-prose table:not(.tve_table),.blog-prose table:not(.tve_table) tbody,.blog-prose table:not(.tve_table) td:not(.tve_table_cell),.blog-prose table:not(.tve_table) tr:not(.tve_table_row){display:block;width:100%}.blog-prose table:not(.tve_table) tr:not(.tve_table_row){border-bottom:1px solid hsla(0,0%,100%,.1);padding:10px 0}.blog-prose table:not(.tve_table) td:not(.tve_table_cell):first-child{border:none;font-size:13px;padding:0 0 5px;width:100%}.blog-prose table:not(.tve_table) td:not(.tve_table_cell):nth-child(2){border:none;font-size:14px;padding:0}body.light .blog-prose table:not(.tve_table) tr:not(.tve_table_row){border-bottom-color:rgba(0,0,0,.1)}body.light .blog-prose table:not(.tve_table) td:not(.tve_table_cell):nth-child(2){color:#334155}}.blog-prose .tve_table_cell{padding:3px!important}.blog-prose th.tve_table_cell,.blog-prose thead .tve_table_cell{background-color:#0084c8!important;border:none!important;border-bottom:1px solid #c8c8d2!important;color:#fff!important;font-weight:700!important}.blog-prose strong{font-weight:700}.blog-prose pre{position:relative}.blog-prose pre.is-collapsed{max-height:400px!important;overflow:hidden!important}.blog-prose pre.is-collapsed:after{background:linear-gradient(transparent,#f7f7f7);bottom:0;content:"";height:80px;left:0;pointer-events:none;position:absolute;right:0}.blog-prose .code-expand-btn{background:#e8e8e8;border:1px solid #ddd;border-radius:0 0 8px 8px;border-top:none;color:#555;cursor:pointer;display:block;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;margin:-8px 0 24px;padding:8px 0;text-align:center;transition:background .2s,color .2s;width:100%}.blog-prose .code-expand-btn:hover{background:#d0d0d0;color:#333}.blog-prose iframe[src*=youtube]{aspect-ratio:16/9;height:auto;margin:16px 0;max-width:100%}.blog-prose .download-btn{background-color:#d4dae9!important;background-image:linear-gradient(#d4dae9,#d4dae9)!important;border:none!important;border-radius:26px;color:#274492!important;display:inline-block;font-family:Nunito,sans-serif;font-size:16px;font-weight:700!important;letter-spacing:-.5px;line-height:46px;margin:20px 0 0;padding:0 24px!important;text-align:center;text-decoration:none!important;text-transform:uppercase;transition:background-color .3s ease}.blog-prose .definition-box{background-color:#33a68f!important;border-radius:0!important;margin:40px 0!important;padding:40px 20px!important}.blog-prose .definition-box h3,.blog-prose .definition-box h4{color:#fff!important;font-size:28px!important;font-weight:700!important;margin-bottom:12px!important;padding:0!important}#theme-content-section .blog-prose .definition-box p,#theme-content-section .blog-prose .definition-box p a,#theme-content-section .blog-prose .definition-box p span,#theme-content-section .blog-prose .definition-box p strong{color:#000!important;margin-bottom:0!important}.blog-prose .download-btn:hover{background-color:#bec6da!important;background-image:linear-gradient(#bec6da,#bec6da)!important;text-decoration:none!important}.blog-prose .has-background,.blog-prose .has-background li,.blog-prose .has-background p,.blog-prose .has-background span{color:#fff!important}.blog-prose .is-style-checklist{list-style:none!important;padding-left:0!important}.blog-prose .download-source-btn,.blog-prose a.download-source-btn{background-color:#ff473f;border:none;border-radius:26px;color:#fff!important;cursor:pointer;display:inline-block;font-size:1.2rem!important;font-weight:700!important;letter-spacing:-.5px;line-height:46px;margin:24px 0;padding:0 40px;text-decoration:none!important;text-transform:uppercase!important;transition:background .3s}.blog-prose .download-source-btn:hover,.blog-prose a.download-source-btn:hover{background-color:#e03530!important;color:#fff!important;text-decoration:none!important}.mermaid-fullscreen-btn{align-items:center;background:rgba(13,27,53,.75);border:1px solid rgba(34,211,238,.3);border-radius:6px;color:#22d3ee;cursor:pointer;display:flex;font-family:Nunito,sans-serif;font-size:13px;gap:4px;opacity:0;padding:5px 10px;position:absolute;right:8px;top:8px;transition:opacity .2s,background .2s;z-index:3}.mermaid:hover .mermaid-fullscreen-btn{opacity:1}@media (hover:none){.mermaid-fullscreen-btn{opacity:.85}}.mermaid-fullscreen-btn:hover{background:rgba(34,211,238,.2)}body.light .mermaid-fullscreen-btn{background:hsla(0,0%,100%,.85);border-color:rgba(8,145,178,.3);color:#0891b2}body.light .mermaid-fullscreen-btn:hover{background:rgba(8,145,178,.1)}.mermaid-lightbox{animation:mlb-fade-in .2s ease;background:rgba(5,10,25,.95);bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0;z-index:9999}@keyframes mlb-fade-in{0%{opacity:0}to{opacity:1}}body.light .mermaid-lightbox{background:rgba(240,245,250,.97)}.mermaid-lightbox-toolbar{align-items:center;background:rgba(13,27,53,.8);border-bottom:1px solid rgba(34,211,238,.2);display:flex;flex-shrink:0;gap:8px;padding:12px 16px}body.light .mermaid-lightbox-toolbar{background:hsla(0,0%,100%,.9);border-bottom-color:rgba(8,145,178,.2)}.mlb-btn{align-items:center;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);border-radius:6px;color:#22d3ee;cursor:pointer;display:flex;padding:6px 8px;transition:background .15s}.mlb-btn:hover{background:rgba(34,211,238,.25)}body.light .mlb-btn{background:rgba(8,145,178,.08);border-color:rgba(8,145,178,.3);color:#0891b2}body.light .mlb-btn:hover{background:rgba(8,145,178,.2)}.mlb-close{margin-left:auto}.mlb-zoom-level{color:rgba(226,232,240,.7);font-family:Nunito,sans-serif;font-size:13px;min-width:48px;text-align:center}body.light .mlb-zoom-level{color:rgba(30,41,59,.6)}.mermaid-lightbox-content{align-items:center;cursor:grab;display:flex;flex:1;justify-content:center;overflow:hidden}.mermaid-lightbox-content:active{cursor:grabbing}.mermaid-lightbox-svg-wrap{transform-origin:center center;transition:transform .15s ease}.mermaid-lightbox-content *{user-select:none}.tve-toc-heading.tve-toc-heading-level0{opacity:.75!important}.tve-toc-anchor,a.tve-toc-anchor.tve-jump-scroll{color:#00aed3!important;text-decoration:none!important}.tve-toc-anchor:hover,a.tve-toc-anchor:hover{color:#00c4ed!important}.tve-toc .tve-toc-content.tve-cb{background-color:var(--accent-color)!important}.tve-toc>.tve-content-box-background{background-color:transparent!important;background-image:none!important}.tve-toc-heading.tve-toc-heading-level0:hover,.tve-toc-heading.tve-toc-heading-level0.tve-state-expanded,.tve-toc-heading.tve-toc-heading-level0.tve-toc-active{background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2))!important;background-size:auto!important;background-position:50% 50%!important}body.light .tve-toc-anchor,body.light .tve-toc-content a{color:#195c6b!important}body.light .tve-toc-anchor:hover,body.light .tve-toc-content a:hover{color:#0e4f5a!important}#footer-sub .text-darkgray{color:#b3b8c6!important}
/* Sidebar cards with .white background — force dark text on both themes (book pages, career forms) */
#page-nav.white h3,#page-nav.white p,#page-nav.white span,#page-nav.white label{color:#274492!important}#page-nav.white .collapsible-text a{color:#274492!important;text-decoration:underline!important}#page-nav.white .collapsible-text a:hover{color:#1a3370!important}#page-nav.white input,#page-nav.white textarea{color:#1e293b!important}#page-nav.white input::placeholder,#page-nav.white textarea::placeholder{color:#94a3b8!important}#page-nav.white a{color:#274492!important}#page-nav.white a:hover{color:#1a3370!important}
/* HubSpot meetings embed — prevent scrollbar when calendar has 6-week months */
.meetings-iframe-container iframe{min-height:850px!important}
/* Form validation — styled to match original CF7 look */
.was-validated input:invalid,.was-validated textarea:invalid{border-bottom:2px solid #dc3232!important}.was-validated input:invalid~.wpcf7-not-valid-tip,.was-validated textarea:invalid~.wpcf7-not-valid-tip{display:block}.wpcf7-form-control-wrap{display:block;position:relative}.wpcf7-not-valid-tip{color:#dc3232;display:none;font-size:14px;font-weight:400;margin-top:4px}body.light .wpcf7-not-valid-tip{color:#dc3232}
/* Service-page tile grid — clip hover overlay to tile bounds + uniform white-pill logo style */
.overlayer{overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}.overlay.overlayFade{display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important;overflow:hidden!important}.overlay-text{position:static!important;left:auto!important;top:auto!important;transform:none!important;max-width:100%!important;max-height:100%!important;font-size:14px!important;line-height:1.45!important;text-align:center!important;display:-webkit-box!important;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden!important;padding:0!important}.overlay-text.padding-30{padding:0!important}.overlayer.padding-60{padding:18px!important}.integration-logo{width:96%!important;max-width:260px!important;height:135px!important;object-fit:contain!important;background:#fff!important;padding:14px 18px!important;border-radius:12px!important;box-sizing:border-box!important;display:block!important;margin:0 auto!important;box-shadow:0 2px 6px rgba(0,0,0,.18)!important}@media screen and (max-width:63.99em){.overlayer.padding-60{padding:14px!important}.integration-logo{height:115px!important;padding:10px 14px!important}}
/* Contact form acceptance checkbox — ensure visible against pink form background */
.wpcf7-acceptance input[type="checkbox"]{width:16px!important;height:16px!important;border:1.5px solid #1f2937!important;accent-color:#22d3ee;vertical-align:middle;margin-right:6px;cursor:pointer;appearance:auto!important;-webkit-appearance:auto!important}
/* Mobile body framing — the legacy CSS uses 31px body padding on all 4 sides with a light-blue (#def1f7) padding-box background-clip that visually matches the header background. The inline @media (max-device-width: 480px) rule only resets padding-left/bottom (not right) and max-device-width is unreliable on modern phones, so the frame leaks asymmetrically. Override with a consistent 12px frame on all 4 sides — large enough to absorb BlogCard's left:-14px decorative tag bleed. Frame color is the brand light-blue (#def1f7) on BOTH themes so it matches the header bar (which is light-blue) and is consistent with the legacy mobile look. */
@media (max-width:1023px){
  html body{padding:12px!important;background-image:linear-gradient(rgb(20,35,76),rgb(20,35,76)),linear-gradient(rgb(222,241,247),rgb(222,241,247))!important;background-clip:content-box,padding-box!important;background-color:rgb(222,241,247)!important}
  html body.light{background-image:linear-gradient(rgb(255,255,255),rgb(255,255,255)),linear-gradient(rgb(222,241,247),rgb(222,241,247))!important}
}
/* Top-section banner: the site header is position:absolute (z-index 9999) at the top of the page, so any content placed at the top of #theme-top-section gets clipped behind the logo bar on mobile/tablet. Add top padding to section-content on every theme so headings + breadcrumbs sit below the header. Keep horizontal padding 0 so breadcrumbs still extend full-width. body[class*="tve-theme"] specificity beats the per-page inline <style> blocks. */
@media (max-width:1023px){
  body[class*="tve-theme"] .top-section .section-content{padding:60px 0 0!important}
}
/* Transforming Testing Efficiency hero — h1 has margin-bottom:-5em on mobile + -3.5em !important on tablet/desktop to overlay the SVG illustration. On mobile that pushes the SVG (with sportal365 logo) up into the title text. Reset the negative margin on smaller viewports so title and SVG sit in normal flow. */
@media (max-width:1023px){
  #sportal-heading h1{margin-bottom:1rem!important;margin-left:0!important;margin-top:0!important;padding-left:20px!important;padding-right:20px!important}
}
/* Transforming Testing Efficiency hero — h1 uses class .color-white but sits on the body's white background unless the SVG covers it. Give #sportal-heading a dark navy background so the white title is readable against it (matches the legacy site's dark navy hero panel). */
#sportal-heading{background-color:rgb(12,35,76)}
/* Homepage / services hero — the .section-background contains a video. On mobile that's wasteful + the live frame creates a busy backdrop that makes white hero text hard to read; the legacy site shows a clean dark navy panel. Hide the video on tablet/mobile and force a dark navy fallback so the white title stays readable. body[class*="tve-theme"] specificity is needed to beat per-theme inline rules (e.g. services theme sets background-color: #def1f7 !important). */
@media (max-width:1023px){
  body[class*="tve-theme"] .tcb-video-background-parent .section-background{
    background-color:rgb(12,35,76)!important;
    background-image:none!important;
  }
  .tcb-video-background-parent .section-background video{display:none!important}
}
/* Homepage Consultancy Steps panel — .roadmap-background uses var(--roadmap-background) which is unset, so the panel renders white. The legacy site uses the brand light-blue (#def1f7). Set the variable so the panel matches the legacy look. */
:root{--roadmap-background:#def1f7}
/* Mobile/tablet: the dark-navy #content panel (wraps body text on About Us, Careers, blog posts, etc.) is edge-to-edge against its container, so the first/last lines of body text touch the navy panel edges. Add 20px horizontal padding on smaller viewports so the content has breathing room inside the panel — matches the legacy site's mobile layout. */
@media (max-width:1023px){
  #content{padding-left:20px!important;padding-right:20px!important}
}
/* #wrapper dark-navy background — the legacy site's #wrapper carries a dark navy gradient, so any panel narrower than the wrapper (e.g. Consultancy Steps light-blue card, About Us hero lavender, services hero) reveals dark navy on its sides. Without this the body's white bg shows through and the panels look edge-to-edge. */
#wrapper{background-image:linear-gradient(rgb(20,35,76),rgb(20,35,76))!important}
/* Mobile/tablet — homepage hero title needs inner left/right padding so it doesn't sit flush against the dark navy hero panel edge. The hero h1 sits inside #theme-top-section #page-heading; pad the heading wrapper. */
@media (max-width:1023px){
  #theme-top-section #page-heading{padding-left:20px!important;padding-right:20px!important}
  /* Consultancy Steps + roadmap content (homepage only) — pull them inward so the dark navy wrapper bg shows on each side. Scoped to .roadmap-content (homepage) to avoid stacking with #content's 20px padding on services pages, which would make the .vertical-roadmap-content panel too narrow and force text to break mid-word. */
  .roadmap-content.roadmap-background,
  #page-content > .roadmap-background{
    margin-left:16px!important;
    margin-right:16px!important;
    width:auto!important;
    max-width:calc(100% - 32px)!important;
    box-sizing:border-box!important;
  }
}
/* Homepage "How We Can Help" — sections #right-people and #right-people-section have text-column-first then icon-column DOM order, so on mobile the icon stacks BELOW all the checklist items (looks orphaned). #right-set-up already has icon-first order. Reorder on mobile so the icon always appears ABOVE its section heading + checklist. Also: the icon column has class .tat-u-3-5 (width:60%) and contains an inner wrapper also .tat-u-3-5 (60% of the column), making the rendered image only 36% of the section width. Force both wrappers full-width on mobile and cap the image at 220px so all three icons render at the same consistent size. */
@media (max-width:1023px){
  #how_we_can_help_section #right-people,
  #how_we_can_help_section #right-people-section{display:flex;flex-direction:column}
  #how_we_can_help_section #right-people > div:nth-child(2),
  #how_we_can_help_section #right-people-section > div:nth-child(2){order:-1}
  #how_we_can_help_section #right-people > .tat-u-3-5,
  #how_we_can_help_section #right-people-section > .tat-u-3-5,
  #how_we_can_help_section #right-set-up > .tat-u-3-5{width:100%!important;max-width:100%!important;text-align:center}
  #how_we_can_help_section #right-people > .tat-u-3-5 > .tat-u-3-5,
  #how_we_can_help_section #right-people-section > .tat-u-3-5 > .tat-u-3-5,
  #how_we_can_help_section #right-set-up > .tat-u-3-5 > .tat-u-3-5{width:100%!important;max-width:100%!important;display:flex;justify-content:center}
  #how_we_can_help_section #right-people img,
  #how_we_can_help_section #right-people-section img,
  #how_we_can_help_section #right-set-up img{width:100%!important;max-width:220px!important;height:auto!important;margin:0 auto 16px!important}
}
/* Services pages process steps (.vertical-roadmap-content) — the inline page CSS sets .block { padding-left: 4rem } which leaves only ~200px of text width on a 375px viewport, forcing words like "Understanding" to break mid-syllable. Drop side-30 padding (it stacks with #content's mobile padding, redundant) and tighten block padding-left + icon/line positions on small mobile so each line of text gets ~280px. */
@media (max-width:1023px){
  .vertical-roadmap-content.side-30{padding-left:8px!important;padding-right:8px!important}
}
@media (max-width:480px){
  .vertical-roadmap-content .block{padding-left:3rem!important;min-height:auto!important;padding-bottom:1.5rem!important}
  .vertical-roadmap-content .block::before{left:0.5rem!important;width:1.75rem!important;height:1.75rem!important;background-size:1.75rem 1.75rem!important}
  .vertical-roadmap-content .block::after{left:1.3rem!important;top:2.5rem!important}
  .vertical-roadmap-content .is-style-checklist{padding-left:0!important}
  .vertical-roadmap-content .is-style-checklist li{padding-left:2rem!important;margin-bottom:0.75rem!important}
}
/* Services page tabs (Integrations / Cloud Providers / CI tools, plus the C#/Java/JavaScript/Kotlin set) — the .tabs-cats container is overflow:auto hidden so when the tabs don't fit the viewport a horizontal scrollbar appears. Keep the scroll/swipe behaviour but hide the visual scrollbar. */
.tabs-cats-menu .tabs-cats{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.tabs-cats-menu .tabs-cats::-webkit-scrollbar{display:none;width:0;height:0}
/* About Us team photo — Thrive's data-css fixes the frame height to 603.5px and gives the img a -168px negative margin-top for the desktop overlap effect. On mobile the actual image renders at ~340px so this leaves a large navy gap below it. Auto-size the frame and reset the margin on smaller viewports. */
@media (max-width:1023px){
  [data-css="tve-u-18e33036e14"] .tve_image_frame{height:auto!important}
  [data-css="tve-u-18e3304b5fe"]{margin-top:0!important}
}
/* About Us intro paragraph is wrapped in <h3>, so the mobile h3 size (22px) makes it read as oversized body text. Scope down to body-paragraph size on mobile only — desktop stays unchanged. */
@media (max-width:767px){[data-css="tve-u-18e33078854"] h3{font-size:18px!important;line-height:1.6!important;font-weight:400!important}}
/* Services contact section — on mobile/tablet the two columns stack vertically; the right column has .side-30 adding horizontal padding that makes Call Us / Send Us cards narrower than the Book a Meeting card above. Remove the side padding when stacked so all three cards line up. The .side-30 gap is preserved at desktop (≥1024px) where columns sit side-by-side. Same applies to .left-30 on the homepage Book a Meeting / quiz section. */
@media (max-width:1023px){
  #contact_us .tat-u-1.tat-u-lg-1-2.side-30{padding-left:0!important;padding-right:0!important}
  .tat-u-1.tat-u-lg-1-2.left-30{padding-left:0!important}
  .tat-u-1.tat-u-lg-1-2.right-30{padding-right:0!important}
}
/* Product landing pages (ServiceNow, NovaWindows) — Thrive page uses max-device-width media queries that don't fire on viewport resize, so .sm-tat-u-1 doesn't go full-width and .sm-r-col doesn't reverse the column order. Plus #appium-conference-25 (the cyan callout box) is absolute-positioned, leaving it overlapping the header on mobile. Restore the intended mobile layout: full-width columns, cyan box back in normal flow below the body text. */
@media (max-width:1023px){
  .sm-tat-u-1{width:100%!important;max-width:100%!important}
  .sm-r-col{flex-direction:column-reverse!important}
  #appium-conference-25{position:static!important;max-width:100%!important;margin-top:1.5rem!important;right:auto!important;bottom:auto!important}
  #nova-windows-driver-header{margin-bottom:0!important}
}
/* Product landing breadcrumb — UL display: -webkit-box with flex-wrap: nowrap forces long page titles ("ServiceNow App Automation: BELLATRIX - ServiceNow Integration") to overflow and trigger a horizontal scrollbar. Switch to wrappable flex on mobile/tablet so the title flows onto multiple lines instead. */
@media (max-width:1023px){
  #menu-training-overview{display:flex!important;flex-wrap:wrap!important;overflow-x:hidden!important}
  #menu-training-overview .menu-item{min-width:0;flex-shrink:1}
}
/* Blog post Gutenberg multi-column blocks (.wp-block-columns / .wp-block-column) — Thrive's CSS forces flex-wrap:nowrap + width:50% on columns even at small viewports, so on a 412px screen each column renders at ~170px and body text wraps to one character per line (e.g. /decorator-design-pattern/). Force columns to wrap and stack full-width on mobile/tablet. Affects all blog posts that use the WP columns shortcode. */
@media (max-width:767px){
  .blog-prose .wp-block-columns{flex-wrap:wrap!important;flex-direction:column!important;gap:1em!important}
  .blog-prose .wp-block-column{flex-basis:100%!important;width:100%!important;max-width:100%!important;margin:0 0 1em!important}
}
/* Blog post "Download Full Source Code" button — desktop styling uses font-size:1.2rem, padding:0 40px, line-height:46px which makes the uppercase 24-character label too wide for a 380px content area, so it wraps to two lines and the button balloons to ~280×100px. On mobile reduce font-size + padding + letter-spacing so the label fits one line, and convert the fixed line-height to vertical padding so multi-line wrapping (when text is even longer) doesn't produce a giant pill. */
@media (max-width:767px){
  .blog-prose .download-source-btn,.blog-prose a.download-source-btn{font-size:0.95rem!important;line-height:1.3!important;padding:14px 20px!important;letter-spacing:0!important;display:inline-block;max-width:100%}
}