/* =============================================================
   QTG — Mobile Optimization Layer
   All rules are scoped inside @media (max-width: ...) queries.
   Desktop behavior is intentionally unchanged.
   ============================================================= */

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 1024px) {
  /* Section paddings tighten */
  .section-pad { padding: 88px 0; }
  .section-pad-sm { padding: 64px 0; }

  /* Generic 4-col grids → 2 cols */
  /* Applications grid (4 cols → 2 cols) */
  section#applications > .container > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Why grid (4 cols → 2 cols) */
  section#why > .container > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Industries (3 cols → 2 cols) */
  section#industries > .container > div[style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer 5-col → 2 cols brand row + links */
  footer > .container > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  footer > .container > div:first-child > div:first-child {
    grid-column: 1 / -1;
  }
}

/* ---------- MOBILE (≤768px) ---------- */
@media (max-width: 768px) {

  /* ---------- Global tweaks ---------- */
  html, body { overflow-x: hidden; }
  body { font-size: 14.5px; }

  .container { padding: 0 18px; }
  .section-pad { padding: 64px 0; }
  .section-pad-sm { padding: 48px 0; }

  h1 { font-size: clamp(38px, 9.5vw, 56px) !important; letter-spacing: -0.03em !important; }
  h2 { font-size: clamp(28px, 7vw, 38px) !important; }
  h3 { font-size: 19px; }
  .lead { font-size: 16px; }

  /* ---------- NAV ---------- */
  .nav-inner { height: 64px !important; gap: 12px !important; }
  .nav-links { display: none !important; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn-primary { padding: 7px 11px; font-size: 12px; }
  .brand img { height: 30px !important; }

  /* Hamburger button (rendered by JS) */
  .qtg-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: rgba(255,255,255,0.02);
    color: var(--text);
  }
  .qtg-hamburger svg { width: 18px; height: 18px; }

  /* Mobile drawer */
  .qtg-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(3,5,6,0.85);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .26s ease;
  }
  .qtg-mobile-drawer.is-open { transform: translateX(0); }
  .qtg-mobile-drawer .qmd-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0;
    background: rgba(7,10,12,0.92);
    backdrop-filter: blur(12px);
    z-index: 2;
  }
  .qtg-mobile-drawer .qmd-close {
    width: 38px; height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .qtg-mobile-drawer .qmd-body { padding: 12px 18px 32px; }
  .qtg-mobile-drawer details {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
  }
  .qtg-mobile-drawer summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 4px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-sans);
    font-size: 17px;
    color: var(--text);
  }
  .qtg-mobile-drawer summary::-webkit-details-marker { display: none; }
  .qtg-mobile-drawer summary .qmd-caret {
    width: 14px; height: 14px;
    transition: transform .2s;
    color: var(--text-3);
  }
  .qtg-mobile-drawer details[open] summary .qmd-caret { transform: rotate(180deg); }
  .qtg-mobile-drawer .qmd-sub {
    padding: 4px 4px 16px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .qtg-mobile-drawer .qmd-sub a {
    display: block;
    padding: 10px 12px;
    color: var(--text-2);
    font-size: 14.5px;
    border-radius: 6px;
  }
  .qtg-mobile-drawer .qmd-sub a:hover { background: rgba(255,255,255,0.04); color: var(--text); }
  .qtg-mobile-drawer .qmd-sub a .d {
    display: block;
    font-size: 11.5px;
    color: var(--text-4);
    margin-top: 2px;
  }
  .qtg-mobile-drawer .qmd-foot {
    margin-top: 24px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .qtg-mobile-drawer .qmd-foot .btn { justify-content: center; padding: 14px; font-size: 15px; }

  /* ---------- HERO ---------- */
  .hero { padding: 36px 0 56px !important; }
  .hero-pill { font-size: 11px; gap: 10px; margin-bottom: 14px; }
  .hero-pill .tag { font-size: 9.5px; padding: 3px 7px; }
  /* Drop the descriptor after the "·" on mobile — keep only the name pill. */
  .hero-pill > span:not(.tag) { display: none !important; }

  /* ---------- COMPONENT-PAGE BREADCRUMB ---------- */
  /* The full trail (QTG / COMPONENTS / family / NAME) overflows on phones.
     Collapse the leading crumbs — keep "COMPONENTS / NAME … LIVE". */
  .app-crumb { font-size: 10px !important; letter-spacing: 0.1em !important; }
  .app-crumb-trail { gap: 9px !important; min-width: 0; }
  .acrumb-root, .acrumb-sep-root,
  .acrumb-family, .acrumb-sep-family { display: none !important; }
  /* Drop the dangling "LIVE" badge on mobile so the crumb sits clean-left. */
  .acrumb-status { display: none !important; }
  /* Product / subpage hero: title a touch smaller, description a touch larger. */
  .hero h1 { font-size: clamp(30px, 8vw, 40px) !important; }
  .hero-sub { font-size: 14px; margin-top: 12px; }
  /* Homepage centered hero: headline +2px, tighter headline→subhead gap, slightly smaller sub. */
  .hero-home-centered h1 { font-size: clamp(34px, 9.1vw, 44px) !important; }
  .hero-home-centered .hero-pill { margin-bottom: 8px !important; }
  .hero-home-centered .hero-sub { font-size: 13px !important; margin-top: 14px; }
  /* Insights hero: tighten the bottom space before the feed on mobile. */
  .insights-hero { padding-bottom: 40px !important; padding-top: 40px !important; }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: stretch; }

  /* ---------- BUTTONS ---------- */
  /* A lone CTA (the closing "Contact QTG") must not stretch full-bleed — that
     reads as an oversized bar. Centre it at its natural width. Paired hero CTAs
     keep stretching (good thumb targets). */
  section#contact .hero-ctas { align-items: center !important; margin-top: 22px !important; }
  section#contact .hero-ctas .btn { width: auto; align-self: center; flex: 0 0 auto; padding: 9px 22px; font-size: 13.5px; }
  /* Tertiary ghost buttons get a comfortable tap height. */
  .btn-link { padding: 11px 15px; }
  .hero-ctas .btn { justify-content: center; padding: 9px 12px; font-size: 13.5px; flex: 1 1 0; white-space: nowrap; }
  /* KPI block → clean 2×2 box (uniform site-wide, per briefing) */
  .hero-meta {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    margin-top: 28px !important;
    padding-top: 0 !important;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .hero-meta-item {
    flex: none !important;
    padding: 15px 16px !important;
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    min-width: 0;
  }
  .hero-meta-item:nth-child(odd) { border-left: none; }
  .hero-meta-item:nth-child(-n+2) { border-top: none; }
  .hero-meta-item .k { font-size: 10px !important; }
  .hero-meta-item .v { font-size: 20px !important; margin-top: 7px !important; }
  .hero-product { margin-top: 44px; }

  /* ---------- HERO DASHBOARD ---------- */
  /* The 3-col grid (sidebar + chart + risk feed) */
  .dash > div[style*="grid-template-columns:1.1fr 1.5fr 1fr"],
  .dash > div[style*="gridTemplateColumns: '1.1fr 1.5fr 1fr'"],
  .dash > div[style*="1.1fr 1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* DashSidebar / DashRiskFeed border-cleanup when stacked */
  .dash > div > div[style*="border-right:1px solid"] {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .dash > div > div[style*="border-left:1px solid"] {
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
  }
  /* Bottom strip — 6 cells → 3+3 */
  .dash > div[style*="repeat(6,1fr)"],
  .dash > div[style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .dash > div[style*="repeat(6,1fr)"] > div:nth-child(3),
  .dash > div[style*="repeat(6, 1fr)"] > div:nth-child(3) {
    border-right: none !important;
  }
  .dash > div[style*="repeat(6,1fr)"] > div:nth-child(-n+3),
  .dash > div[style*="repeat(6, 1fr)"] > div:nth-child(-n+3) {
    border-bottom: 1px solid var(--line);
  }
  /* Dash chrome — drop the long URL meta */
  .dash-chrome > .mono { display: none; }
  .dash-tabs { gap: 2px; }
  .dash-tab { padding: 5px 7px; font-size: 10px; }
  /* Tab bar overflows the card — keep the first three, hide the rest. */
  .dash-tabs .dash-tab:nth-child(n+4) { display: none; }
  /* Hero revenue dashboard: the time-range pills squeeze the figure (the
     "+18.4%" wrapped one char per line). Drop them on mobile. */
  .dmc-ranges { display: none !important; }

  /* Chart panel grid — 4 metric cells → 2 cols */
  .dash div[style*="grid-template-columns:repeat(4, 1fr)"],
  .dash div[style*="gridTemplateColumns: 'repeat(4, 1fr)'"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 12px !important;
  }

  /* ---------- TICKER ---------- */
  .ticker-track { gap: 36px; padding: 12px 18px; }

  /* ---------- SECTION HEADS ---------- */
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 36px !important;
    padding-bottom: 22px !important;
  }

  /* ---------- PROBLEM / SOLUTION (before → after) ---------- */
  /* The "1fr auto 1fr" grid (fragmented stack · convergence arrow · unified
     environment) is used on the homepage (#what) AND the industries overview.
     Stack it everywhere, and DROP the decorative arrow: once stacked it just
     floated in an empty black gap, and the old rotate rule never matched
     because the arrow is a direct <svg> child, not a div-wrapped one. */
  [style*="grid-template-columns:1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [style*="grid-template-columns:1fr auto 1fr"] > svg {
    display: none !important;
  }
  /* Kill the desktop "fragmented" jitter + rotation — on a phone it just reads
     as misaligned, wobbling cards. Tidy them into a clean static grid. */
  section#what .qtg-frag-card {
    transform: none !important;
    animation: none !important;
  }
  /* Clean BEFORE→AFTER connector (replaces the hidden desktop arrow). */
  .qtg-flow-mobile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 6px 0 2px;
    color: var(--accent);
  }
  .qtg-flow-mobile .qtg-flow-stem {
    width: 1px; height: 26px;
    background: linear-gradient(to bottom, transparent, var(--accent));
    opacity: 0.55;
  }
  .qtg-flow-mobile .qtg-flow-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    line-height: 1.5;
  }

  /* ---------- GLOBAL PRESENCE MAP (company · contact) ---------- */
  /* The panel is a 2-column grid (map · office roster). It used minmax(), so
     it slipped past every collapse rule and never stacked — the roster stayed
     crushed into a ~45% column and the "UTC+08 · 16:12" rows overflowed into
     the neighbouring card. Stack the panel; give the roster the full width. */
  .qtg-mappanel { grid-template-columns: 1fr !important; }
  /* Office roster ("time watch") → horizontal swipe rail of live clocks,
     so it stays one tidy row instead of a 5-row block. Tap a card to focus. */
  .qtg-officegrid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Keep the first clock card aligned to the section gutter (scroll-snap
       would otherwise pull it flush to the left edge). */
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    margin: 0 -18px;
    padding: 2px 18px 8px;
  }
  .qtg-officegrid::-webkit-scrollbar { display: none; }
  .qtg-officegrid > * {
    flex: 0 0 200px;
    max-width: 80vw;
    scroll-snap-align: start;
  }
  /* The pinned detail card + leader line are sized for a wide desktop map and
     overflow a phone-width one. Drop them — the roster below the map already
     carries the same per-location detail (offset · local time · on-shift). */
  .qtg-map-card, .qtg-map-leader { display: none !important; }

  /* ---------- ARCHITECTURE DIAGRAM ---------- */
  /* Each layer row uses 180px 1fr — stack to single column */
  section#architecture div[style*="180px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  section#architecture div[style*="180px 1fr"] > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 14px 18px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px;
    align-items: center !important;
  }
  section#architecture div[style*="180px 1fr"] > div:last-child {
    padding: 14px 18px !important;
  }

  /* ---------- PLATFORMS ---------- */
  /* PlatformCard 2-col grid → stacked. Both 1fr 1.2fr and 1.2fr 1fr variants. */
  section#platforms div[style*="1fr 1.2fr"],
  section#platforms div[style*="1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Whichever side has the text — drop the divider */
  section#platforms div[style*="1fr 1.2fr"] > div,
  section#platforms div[style*="1.2fr 1fr"] > div {
    border-right: none !important;
    padding: 28px 22px !important;
    min-height: auto !important;
  }
  /* The UI mock dashes — keep center, but pad less */
  section#platforms .dash { max-width: 100% !important; }
  /* PlatformText 3-col stats → 1 col */
  section#platforms div[style*="grid-template-columns:1fr 1fr 1fr"],
  section#platforms div[style*="gridTemplateColumns: '1fr 1fr 1fr'"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  /* YourPropFirm trader roster — drop region & phase columns.
     Scoped to .dash (not section#platforms) so it also applies on the
     /platforms hub and the standalone product page, where the mock lives in
     a differently-id'd section. Otherwise the name column collapses to 0px
     and the roster "crashes". */
  .dash div[style*="60px 1fr 40px 70px 80px"] {
    grid-template-columns: 56px 1fr 70px !important;
  }
  .dash div[style*="60px 1fr 40px 70px 80px"] > *:nth-child(3),
  .dash div[style*="60px 1fr 40px 70px 80px"] > *:nth-child(4) {
    display: none;
  }

  /* QuantSentry top metrics — 3 cards stack to 1 col-ish; let them be 3 cols still but smaller */
  section#platforms div[style*="grid-template-columns:1fr 1fr 1fr"][style*="gap:12px"] > div,
  section#platforms div[style*="gridTemplateColumns: '1fr 1fr 1fr'"][style*="gap:12"] > div {
    padding: 10px !important;
  }

  /* Broker funnel — 5 cells stay in one row, but the default padding + 16px
     numbers clip ("12,84…") and wrap the labels ("FUND ED"). Tighten the cell
     and shrink the type so each value/label fits cleanly. */
  .dash div[style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }
  .dash div[style*="repeat(5, 1fr)"] > div { padding: 9px 4px !important; }
  .dash div[style*="repeat(5, 1fr)"] > div > div:nth-child(1) {
    font-size: 7.5px !important; letter-spacing: 0.02em !important;
  }
  .dash div[style*="repeat(5, 1fr)"] > div > div:nth-child(2) {
    font-size: 11px !important; letter-spacing: -0.01em !important;
  }
  /* Broker side-by-side IB + Integrations panels stack */
  section#platforms div[style*="grid-template-columns:1fr 1fr"][style*="gap:14"],
  section#platforms div[style*="gridTemplateColumns: '1fr 1fr'"][style*="gap:14"] {
    grid-template-columns: 1fr !important;
  }

  /* ---------- PROPTRADEGROUP — "You / We / Result" handoff ----------
     Stacked, the right-pointing HANDOFF arrow aimed into empty space and the
     thin arrow cell had no vertical room. Turn the vertical dividers into
     horizontal ones, give the handoff cell breathing space, and face the
     arrow DOWN to read top-to-bottom. */
  .ptg-handoff > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .ptg-handoff > div:last-child { border-bottom: none; }
  .ptg-handoff > div:nth-child(2) { padding: 18px 14px !important; }
  .ptg-handoff > div:nth-child(2) svg { transform: rotate(90deg); }

  /* ---------- COMPONENTS / APPLICATIONS → swipe carousel ----------
     15 cards stacked is an endless column. On mobile, present them as a
     horizontal swipe rail (one row · scroll-snap · tap a card to open). */
  section#applications > .container > div[style*="repeat(4, 1fr)"] {
    display: flex !important;
    grid-template-columns: none !important;
    /* The grid ships an inline `overflow:hidden` (rounded-border clip) that
       beats a plain overflow-x:auto — force the swipe rail to scroll. */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 -18px;
    padding: 2px 18px 8px;
  }
  section#applications > .container > div[style*="repeat(4, 1fr)"]::-webkit-scrollbar { display: none; }
  section#applications > .container > div[style*="repeat(4, 1fr)"] > div {
    flex: 0 0 74%;
    max-width: 290px;
    scroll-snap-align: start;
    border: 1px solid var(--light-line);
    border-radius: 12px;
    min-height: 152px !important;
  }
  /* Scroll-progress bar under the swipe rail (shown only when scrollable). */
  section#applications .cmp-scrollbar.is-on {
    display: block; position: relative;
    height: 3px; border-radius: 999px;
    background: var(--light-line);
    margin: 16px 2px 0; overflow: hidden;
  }
  section#applications .cmp-scrollthumb {
    position: absolute; top: 0; bottom: 0;
    border-radius: 999px; background: rgba(0,0,0,0.38);
    transition: left .1s linear;
  }

  /* ---------- INDUSTRIES → swipe carousel ---------- */
  section#industries > .container > div[style*="repeat(3, 1fr)"] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Without this, scroll-snap pulls the first card flush to the screen edge,
       eating the 18px gutter so it no longer lines up with the heading. */
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) var(--line);
    gap: 12px !important;
    margin: 0 -18px;
    padding: 2px 18px 14px;
  }
  section#industries > .container > div[style*="repeat(3, 1fr)"]::-webkit-scrollbar { height: 4px; }
  section#industries > .container > div[style*="repeat(3, 1fr)"]::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; margin: 0 18px; }
  section#industries > .container > div[style*="repeat(3, 1fr)"]::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 4px; }
  section#industries > .container > div[style*="repeat(3, 1fr)"] > div,
  section#industries > .container > div[style*="repeat(3, 1fr)"] > a {
    flex: 0 0 82%;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* ---------- WHY ---------- */
  section#why > .container > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  section#why > .container > div[style*="repeat(4, 1fr)"] > div {
    min-height: auto !important;
    padding: 22px 18px !important;
  }
  section#why > .container > div[style*="repeat(4, 1fr)"] > div:nth-child(2) {
    border-right: none !important;
  }
  section#why > .container > div[style*="repeat(4, 1fr)"] > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  /* ---------- INSIGHTS SLIDER ---------- */
  .ins-track .ins-card {
    flex: 0 0 86vw !important;
    max-width: 86vw !important;
  }

  /* ---------- CTA SECTION ---------- */
  section#contact { padding: 72px 0 !important; }
  section#contact h2 { font-size: clamp(32px, 8vw, 44px) !important; }
  section#contact .hero-ctas { justify-content: center !important; }
  section#contact .lead { margin-top: 14px !important; }

  /* ---------- FOOTER (mobile redesign) ---------- */
  footer { padding: 48px 0 28px; }
  /* Brand spans the full width on top, the 4 link groups sit in a tidy 2×2. */
  footer > .container > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 20px !important;
    padding-bottom: 26px !important;
  }
  footer > .container > div:first-child > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
  }
  /* Bottom meta row (company · operating-in · copyright) → stacked, left. */
  footer > .container > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: left !important;
    padding-top: 22px !important;
  }
  footer > .container > div:nth-child(2) > div {
    align-items: flex-start !important;
  }
  /* Country flags row — keep on ONE line; tighten gaps + type so all six fit. */
  footer > .container > div:nth-child(2) .mono[style*="nowrap"] {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.04em !important;
  }
  /* shrink the flag glyphs a touch and the inter-item slash margin */
  footer > .container > div:nth-child(2) .mono[style*="nowrap"] span[aria-hidden] {
    font-size: 11px !important;
  }
  footer > .container > div:nth-child(2) .mono[style*="nowrap"] > span {
    gap: 4px !important;
  }
  footer > .container > div:nth-child(2) .mono[style*="nowrap"] > span > span[style*="margin-left"] {
    margin-left: 2px !important;
  }
  /* Utility strip — stack disclaimer + legal */
  footer > .container > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-top: 20px !important;
    padding-top: 18px !important;
  }
  /* CRITICAL FIX: the disclaimer ships `flex: 1 1 540px`. Once the strip
     becomes a COLUMN, that 540px basis is read as a HEIGHT — forcing a
     ~540px empty block (the whole footer looked broken). Reset the children
     to auto-height, full-width. */
  footer > .container > div:last-child > div {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  footer > .container > div:last-child p { max-width: none !important; font-size: 11.5px !important; }
  footer > .container > div:last-child > div:last-child {
    flex-wrap: wrap;
    padding-top: 0 !important;
  }
}

/* ---------- SMALL MOBILE (≤480px) ---------- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  h1 { font-size: 40px !important; line-height: 1.04 !important; }
  h2 { font-size: 28px !important; }

  /* Applications → 1 col */
  section#applications > .container > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Why → 1 col */
  section#why > .container > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  section#why > .container > div[style*="repeat(4, 1fr)"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  section#why > .container > div[style*="repeat(4, 1fr)"] > div:last-child {
    border-bottom: none;
  }

  /* Footer link groups stay 2-up on small phones (compact, not a long list) */
  footer > .container > div:first-child {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero meta — keep the 2×2 box, just dial type down a touch */
  .hero-meta-item .v { font-size: 18px !important; }

  /* PlatformText 3-col stats → 1 col on tiny screens */
  section#platforms div[style*="grid-template-columns:1fr 1fr 1fr"],
  section#platforms div[style*="gridTemplateColumns: '1fr 1fr 1fr'"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero pill text wrap */
  .hero-pill { flex-wrap: wrap; }
}

/* Hide hamburger by default — only show on mobile */
.qtg-hamburger { display: none; }
/* Components swipe-rail scroll bar — hidden unless mobile carousel is active. */
.cmp-scrollbar { display: none; }

/* Top announcement bar — compact on phones (left-aligned, no dots). */
@media (max-width: 768px) {
  .qtg-abar { height: 38px; font-size: 12px; }
  .qtg-abar .aba-slide { padding: 0 16px; gap: 8px; justify-content: flex-start; }
  .qtg-abar .aba-lk { font-size: 12px; }
  .qtg-abar .aba-dots { display: none; }
}

/* =============================================================
   ≤768px — EVENTS PAGE
   ============================================================= */
@media (max-width: 768px) {
  /* ---- Upcoming event cards ---- */
  /* Icon to the TOP-left (inline styles force center, so override hard). */
  .evt-chead { flex-wrap: wrap; align-items: flex-start !important; }
  .evt-chead .meta { flex: 1 1 0; }
  /* Date · location on ONE line — keep inline, don't wrap (so the "·"
     separator never dangles). Slightly smaller to guarantee the fit. */
  .evt-chead .cinfo { flex-wrap: nowrap !important; white-space: nowrap; font-size: 13px !important; gap: 6px !important; }
  .evt-chead .cinfo .cloc { white-space: nowrap; }
  /* Bottom actions: presence pill on its own line, then the countdown
     (bottom-left) sharing the button's line, button pushed right. */
  .evt-card2 .cactions { flex-wrap: wrap; row-gap: 12px; align-items: center; }
  .evt-card2 .cactions .evt-presence { flex-basis: 100%; }
  .evt-card2 .cactions .evt-countdown { white-space: nowrap; }
  .evt-card2 { padding: 22px 20px 18px; }
  .evt-card2 .nm2 { font-size: 19px; }

  /* ---- Featured event: tighten the stacked layout ---- */
  .evt-featured .fbody { padding: 26px 22px 20px; }
  .evt-featured .fname { font-size: 26px; }
  .evt-featured .brandpanel { padding: 30px 24px; }
  /* The month label and countdown badge both pin top-right once the panel
     goes full-width — they collide. Drop the month (date is shown below). */
  .evt-featured .fmonth { display: none; }

  /* ---- "Say hello" section: stack the two columns + the inner rows ---- */
  .sayhello-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .sayhello-card { padding: 24px 20px !important; }
  /* label over value instead of a cramped 160px column */
  .sayhello-row { grid-template-columns: 1fr !important; gap: 4px !important; }
}


/* =============================================================
   ≤1024px — NAV / HAMBURGER / DRAWER / MEGA
   The desktop nav-links hide at ≤1024 (styles.css), so the hamburger
   and slide-in drawer must take over at the SAME breakpoint — otherwise
   tablets (769–1024px) get no menu at all. The hover mega-menu is also
   useless (and overflows) without a pointer, so it is removed here.
   ============================================================= */
@media (max-width: 1024px) {
  .nav-links { display: none !important; }
  .nav-cta .btn-ghost { display: none !important; }
  /* Wire the CTA + hamburger as one group hugging the right edge. */
  .nav-cta { margin-left: auto; gap: 10px !important; }
  /* On mobile the nav CTA reads just "Contact" — drop the "QTG" suffix + arrow. */
  .nav-cta .btn-primary .nav-cta-suffix { display: none; }
  .nav-cta .btn-primary svg { display: none; }
  /* Slimmer, less-dominant CTA on mobile. */
  .nav-cta .btn-primary {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }

  /* Kill the desktop mega panels + backdrop — they overflow horizontally
     and can never open without hover. The drawer replaces them. */
  .mega, .mega-backdrop { display: none !important; }

  .qtg-hamburger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: rgba(255,255,255,0.02);
    color: var(--text);
    margin-left: 4px;
    flex: 0 0 auto;
  }
  .qtg-hamburger svg { width: 19px; height: 19px; }

  /* Drawer presentation (works at any width) */
  .qtg-mobile-drawer {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(3,5,6,0.92);
    backdrop-filter: blur(12px);
    display: flex; flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
  }
  .qtg-mobile-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .26s ease; }
  .qtg-mobile-drawer .qmd-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0;
    background: rgba(7,10,12,0.96);
    backdrop-filter: blur(12px);
    z-index: 2;
  }
  .qtg-mobile-drawer .qmd-close {
    width: 40px; height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--text); background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .qtg-mobile-drawer .qmd-body { padding: 8px 20px 40px; max-width: 640px; width: 100%; margin: 0 auto; }
  .qtg-mobile-drawer details { border-bottom: 1px solid var(--line); padding: 2px 0; }
  .qtg-mobile-drawer summary {
    list-style: none; cursor: pointer;
    padding: 17px 4px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-sans); font-size: 17px; color: var(--text);
  }
  .qtg-mobile-drawer summary::-webkit-details-marker { display: none; }
  .qtg-mobile-drawer summary .qmd-caret { width: 14px; height: 14px; transition: transform .2s; color: var(--text-3); }
  .qtg-mobile-drawer details[open] summary .qmd-caret { transform: rotate(180deg); }
  .qtg-mobile-drawer .qmd-sub { padding: 2px 4px 16px; display: flex; flex-direction: column; gap: 2px; }
  .qtg-mobile-drawer .qmd-sub a {
    display: block; padding: 11px 12px;
    color: var(--text-2); font-size: 15px; border-radius: 6px; line-height: 1.25;
  }
  .qtg-mobile-drawer .qmd-sub a:active { background: rgba(255,255,255,0.05); color: var(--text); }
  .qtg-mobile-drawer .qmd-sub a .d { display: block; font-size: 12px; color: var(--text-4); margin-top: 0; padding-left: 14px; }
  /* Name row + cyan dot (matches the desktop mega-menu items). */
  .qtg-mobile-drawer .qmd-sub a .qmd-k { display: flex; align-items: center; gap: 8px; }
  .qtg-mobile-drawer .qmd-sub a .qmd-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(0,255,255,0.55); flex: none;
  }
  /* "{Section} Overview" — soft sentence-case chip, sized to content. */
  .qtg-mobile-drawer .qmd-overview {
    display: inline-flex !important; align-items: center; gap: 7px;
    align-self: flex-start;
    width: auto; max-width: max-content;
    margin: 2px 0 8px;
    padding: 6px 12px !important;
    border: 1px solid var(--accent-dim);
    background: var(--accent-faint);
    border-radius: 8px !important;
    color: var(--accent) !important;
    font-family: var(--font-sans);
    font-size: 12.5px; letter-spacing: -0.004em; text-transform: none;
  }
  .qtg-mobile-drawer .qmd-overview svg { width: 13px; height: 13px; }
  .qtg-mobile-drawer .qmd-overview:active { background: rgba(0,255,255,0.12); }
  /* Category grouping inside a section (e.g. Components) for scannability. */
  .qtg-mobile-drawer .qmd-group { margin-top: 6px; }
  .qtg-mobile-drawer .qmd-group:first-of-type { margin-top: 2px; }
  .qtg-mobile-drawer .qmd-group-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-4);
    padding: 10px 12px 6px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  .qtg-mobile-drawer .qmd-group:first-of-type .qmd-group-label { border-top: none; }
  .qtg-mobile-drawer .qmd-foot { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
  .qtg-mobile-drawer .qmd-foot .btn { justify-content: center; padding: 15px; font-size: 15px; }

  /* On tablet, allow the drawer to read as a centered sheet rather than full-bleed list */
  .nav-inner { gap: 12px !important; }
}

/* =============================================================
   ≤768px — GLOBAL INLINE-GRID COLLAPSE (site-wide)
   The page templates (product.jsx, subpage.jsx, industry-page.jsx,
   services, insights, etc.) build layout with inline-style grids.
   Without these, structural multi-column grids force a min-content
   width wider than the phone and the page scrolls sideways.

   Selectors include the `grid-template-columns: ` prefix so that
   COMPOUND grids (e.g. "1.2fr repeat(4, 1fr)") are NOT matched by the
   plain repeat() rules — those are handled explicitly below.
   ============================================================= */
@media (max-width: 768px) {
  /* Belt-and-braces: no sideways scroll anywhere */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* --- Two-column fractional / fixed-label splits → stack --- */
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns:180px 1fr"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns:1.2fr 2fr 2fr"],
  [style*="grid-template-columns:1.1fr auto 1.1fr 1fr"],
  [style*="grid-template-columns:1.2fr repeat(4, 1fr)"],
  [style*="grid-template-columns:1.1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Platform detail header: kill the 48px row-gap once it stacks. */
  .pdeep-head { gap: 8px !important; margin-bottom: 26px !important; }

  /* --- Strict 1fr 1fr (problem/solution, splits) → stack ---
     :not() excludes the 3- and 4-up equal-fraction variants. */
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }

  /* --- 3-up / 4-up grids → 2 columns --- */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- 5/6/7-up strips → 2 columns --- */
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6, 1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns:repeat(7, 1fr)"],
  [style*="grid-template-columns:repeat(7,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stray per-cell vertical dividers can dangle once a strip wraps;
     soften by letting wrapped rows breathe (kept subtle). */

  /* Component×platform matrix: too wide to squish — let it scroll
     horizontally as one unit instead of collapsing the columns. */
  .cmp-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-matrix > div { min-width: 620px; }

  /* App-family + category-jumper grids: the gap:1 bordered-cell look reads as
     hard square corners on phones. Switch to separated rounded cards. */
  .family-grid, .cmp-jumper {
    background: transparent !important;
    border: none !important;
    gap: 12px !important;
  }
  .family-grid > a, .cmp-jumper > a {
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
  }

  /* --- Hero eyebrow pill: always allow wrap on phones --- */
  .hero-pill { flex-wrap: wrap; row-gap: 8px; }

  /* --- Class-based template grids --- */
  .related-grid { grid-template-columns: 1fr !important; }
  .workflow-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .workflow-step { border-bottom: 1px solid var(--line); }
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Ecosystem map (industries overview): the absolutely-positioned node
     diagram cannot work at phone width — render it as a simple stack. */
  .eco-map { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; padding: 16px !important; display: flex !important; flex-direction: column; gap: 10px; }
  .eco-map-grid, .eco-svg-lines, .eco-center { display: none !important; }
  .eco-node { position: static !important; transform: none !important; left: auto !important; top: auto !important; min-width: 0 !important; width: 100% !important; }
  .eco-node:hover { transform: none !important; }
  /* Ecosystem legend: the 3-col grid squeezes the hover hint into one-word-per-line.
     Stack it and drop the hover hint (no hover on touch). */
  .eco-legend { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 14px !important; padding: 16px 18px !important; }
  .eco-legend .eco-hint { display: none !important; }

  /* Dashboard / product mocks: never wider than their column */
  .dash { max-width: 100% !important; width: 100% !important; }

  /* Pipeline / "stage" diagram → vertical numbered steps on mobile. */
  .pipeline-grid { grid-template-columns: 1fr !important; }
  .pipeline-grid > .pipeline-stage {
    border-right: none !important;
    min-height: auto !important;
    border-bottom: 1px solid var(--line);
  }
  .pipeline-grid > .pipeline-stage:last-child { border-bottom: none; }

  /* ---------- COMPONENTS overview page ---------- */
  /* Category jumper 4-up → 2×2. */
  .cmp-jumper { grid-template-columns: 1fr 1fr !important; }
  /* Component family grids → horizontal swipe rail (don't stack 15 tall cards). */
  .family-grid {
    display: flex !important;
    grid-template-columns: none !important;
    /* The family grids ship an inline `overflow:hidden` (rounded-border clip)
       that beats a plain overflow-x:auto, so the swipe rail couldn't scroll. */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 -18px;
    padding: 2px 18px 8px;
  }
  .family-grid::-webkit-scrollbar { display: none; }
  .family-grid > a {
    flex: 0 0 78% !important;
    max-width: 300px;
    scroll-snap-align: start;
    border: 1px solid var(--line) !important;
    border-radius: 12px;
    min-height: auto !important;
  }
  /* "Where components live" matrix → swipe the wide table horizontally. */
  .cmp-matrix { overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  /* Narrow the COMPONENT name column and widen the platform columns so the long
     headers ("YOURPROPFIRM", "BROKER INFRASTRUCTURE") stop overflowing/colliding
     at 60px. Wider min-width keeps the table tidy as it scrolls. */
  .cmp-matrix > div { min-width: 740px; grid-template-columns: 150px repeat(6, 1fr) !important; }
  /* First column (COMPONENT header + every component name): centre the text both
     horizontally and vertically so the whole column reads as one centred block. */
  .cmp-matrix > div > div:first-child,
  .cmp-matrix > div > a:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* "COMPONENT" header keeps the accent tint. */
  .cmp-matrix > div:first-child > div:first-child { color: var(--accent) !important; }
  /* Shrink the platform column headers so the long ones ("BROKER INFRASTRUCTURE",
     "PROPTRADEGROUP") fit their column and stop spilling outside the table. */
  .cmp-matrix > div:first-child > div:not(:first-child) {
    font-size: 8.5px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2;
    padding-left: 6px !important;
    padding-right: 6px !important;
    overflow-wrap: anywhere;
  }

  /* Critical: let inline-grid children shrink below their min-content so a
     wide child (e.g. a dashboard mock or long token) can't force the whole
     grid track wider than the phone and clip/scroll. */
  [style*="grid-template-columns"] > * { min-width: 0; }
  /* Long monospace tokens inside mocks should wrap rather than push width */
  .dash .mono, .dash-chrome .mono { overflow-wrap: anywhere; }

  /* Reports & Analytics spotlight mock (.ra-mock): a fixed-layout 3-column
     dashboard built for a wide box. Squeezed to phone width its labels clip on
     every edge ("reporting-pla…", "RUNNIN…"). Render it at its design width and
     scale the whole thing down so the full dashboard reads, proportions intact.
     (body overflow-x:hidden clips the few px of bleed on sub-320px screens.) */
  .ra-mock { width: 520px; zoom: 0.6; }
}

/* =============================================================
   ≤768px — PRODUCT MOCK GRAPHICS → BOUNDED PREVIEWS  (site-wide)

   On desktop, every product UI mock (.dash) sits BESIDE the copy in a
   two-column card. The mobile grid collapse stacks them, so each mock
   becomes a tall decorative block the reader must scroll past to reach
   the actual content — the hero dashboard alone is ~1800px on a phone.

   These mocks are illustrative product shots, not content. So on phones
   we render each as a compact "preview": cap the height and fade the
   bottom edge. The visual flavour stays; the endless scroll goes away.
   The treatment is universal because .dash is the shared wrapper used by
   the hero, platform cards, product spotlights, subpages, industry
   visuals and contact mocks alike.
   ============================================================= */
@media (max-width: 768px) {

  /* The flex-centred mock CELLS force 380/420px of height even around a
     short mock. Identify them by their distinctive gradient fill (so we
     do NOT touch editorial image cards that also use min-height) and let
     them shrink to their content. */
  [style*="var(--bg-3) 0%, var(--bg-2)"] {
    min-height: 0 !important;
    padding: 14px !important;
    order: 2;
  }

  /* Every product mock → bounded preview with a soft bottom fade. */
  .dash {
    max-height: 360px;
    overflow: hidden;
    position: relative;
  }
  .dash::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 84px;
    background: linear-gradient(to bottom, rgba(10,14,17,0) 0%, #0A0E11 90%);
    pointer-events: none;
    z-index: 3;
  }

  /* HERO DASHBOARD — special case.
     It is a 3-column live console (sidebar · chart · risk feed). Stacked
     and cropped it would just show the sidebar list. Instead, drop the
     two secondary columns so the bounded preview shows the recognisable
     live revenue chart — a clean, complete-looking product teaser. */
  .hero-product .dash > div[style*="1.1fr 1.5fr 1fr"] > div:nth-child(1),
  .hero-product .dash > div[style*="1.1fr 1.5fr 1fr"] > div:nth-child(3) {
    display: none !important;
  }
  /* Give the hero a touch more room so the whole chart reads. */
  .hero-product .dash { max-height: 400px; }
  /* The hero mock sits lower in the page than its huge old self did. */
  .hero-product { margin-top: 36px !important; }
}

/* =============================================================
   ≤480px — small phones: go single-column for dense grids
   ============================================================= */
@media (max-width: 480px) {
  /* Tighter mock previews on the smallest screens. */
  .dash { max-height: 320px; }
  .hero-product .dash { max-height: 360px; }

  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* keep big metric/number strips readable: 1 col when content is large */
  .team-grid { grid-template-columns: 1fr !important; }
  .related-grid { grid-template-columns: 1fr !important; }
}

/* =============================================================
   ≤768px — NEWS & INSIGHTS INDEX + ARTICLE PAGES
   The blog index and the /insights/*.html article template ship their
   own desktop-tuned spacing (article.css uses a 32px gutter and a 52px
   hero pad). On phones that wastes width and stacks awkwardly. These
   rules bring them in line with the rest of the mobile layer.
   ============================================================= */
@media (max-width: 768px) {

  /* ---------- Blog index toolbar ---------- */
  /* Stack the filter row above the article count so the count never gets
     orphaned mid-line when the filters wrap. Let filters scroll, not pile. */
  .blog-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
  }
  .blog-filters {
    width: auto;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -18px !important;
    padding: 2px 18px !important;
    /* fade hint on the right edge so the swipe affordance reads */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-filter { flex: 0 0 auto !important; padding: 9px 15px !important; }

  /* ---------- Article pages ---------- */
  /* Match the site's 18px gutter (article-shell ships 32px). */
  .article-shell { padding: 0 18px !important; }
  /* Trim the tall hero pad; tighten the title block. */
  .article-hero-inner { padding-top: 34px !important; }
  .article-hero.noimg .article-hero-inner { padding-bottom: 40px !important; }
  .article-title { margin: 18px 0 16px !important; }
  .article-standfirst { font-size: 17px !important; max-width: none !important; }
  .article-meta { margin-top: 22px !important; }
  /* Body rhythm: ease the lede + section heads down a notch for phones. */
  .article-body p.lede { font-size: 19px !important; }
  .article-body h2 { font-size: 23px !important; margin-top: 40px !important; }
  /* Reading-progress bar a touch slimmer on phones. */
  .read-progress { height: 2.5px; }
}

/* ---------- ≤480px — article byline wraps cleanly ---------- */
@media (max-width: 480px) {
  /* On the narrowest phones the byline strip can no longer hold author +
     published + read on one line. Let it wrap and drop the now-dangling
     vertical divider so the Published / Read pair sits under the author. */
  .article-meta { flex-wrap: wrap; row-gap: 14px; width: 100% !important; }
  /* Meta values (Dates · Location · On-site · Panel) overflow off-screen as a
     rigid single row on the event-recap pages. Lay them out as a wrapping
     2-column grid and drop the vertical dividers so nothing gets clipped. */
  .am-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    padding-left: 0 !important;
    border-left: none !important;
    width: 100%;
  }
  .am-item {
    border-left: none !important;
    padding: 0 !important;
  }
  .article-title { font-size: 31px !important; line-height: 1.08 !important; }

  /* Byline strip — shrink author + values so it stops dominating the page. */
  .am-author img { width: 38px !important; height: 38px !important; }
  .am-author .n { font-size: 13px !important; }
  .am-author .r { font-size: 9px !important; }
  .am-item .v { font-size: 11px !important; }

  /* Media contact card — the vertical divider orphans when the org block
     wraps to its own row. Drop it, let the org block span full width under a
     horizontal rule, and allow the name to wrap. */
  .media-card { width: auto !important; gap: 12px 14px !important; }
  .media-div { display: none !important; }
  .media-block .mc-name { white-space: normal !important; }
  .media-org {
    flex-basis: 100%;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
}

/* =============================================================
   ≤768px — PARTNERS DIRECTORY
   Intro stacks; search row gives the input full width with the
   count tucked under it; chips/tabs stay tappable.
   ============================================================= */
@media (max-width: 768px) {
  /* Intro: two-column title|description → stacked */
  .partners-intro-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .partners-intro-grid h2 { font-size: 26px !important; }
  .partners-intro-grid p { font-size: 15px !important; }

  /* Search bar: input on its own row, count chip below as a thin strip */
  .partners-filterbar { grid-template-columns: 1fr !important; }
  .partners-filterbar > label { border-right: none !important; }
  .partners-filterbar > div {
    border-top: 1px solid var(--line);
    padding: 10px 18px !important;
  }
  .partners-filterbar input { font-size: 16px !important; } /* ≥16px stops iOS zoom-on-focus */

  /* Type toggle tabs: equal-width, comfortable targets */
  .partner-kind-tabs { gap: 8px !important; }
  .partner-kind-tabs button { flex: 1 1 auto; text-align: center; }

  /* Industries grid → single column so cards stop crushing into slivers. */
  .industries-grid { grid-template-columns: 1fr !important; }
  /* Industry-page section card grids → one column (titles stop wrapping 3 lines). */
  .ind-card-grid { grid-template-columns: 1fr !important; }

  /* "Operating layer" L1/L2/L3 stack (IndustryStack): the 3 layer columns
     collapse to an awkward 2+1 grid on mobile. Stack them vertically instead —
     L1 over L2 over L3 reads naturally as layers — with horizontal dividers. */
  .ind-stack-grid { grid-template-columns: 1fr !important; }
  .ind-stack-grid > div { border-right: none !important; border-bottom: 1px solid var(--line); }
  .ind-stack-grid > div:last-child { border-bottom: none; }

  /* Prop-firm "Trader Cycle" lifecycle illustration: 9 stages in a fixed grid
     overlap their labels at phone width ("AcquisitiSignupChalle…"). It's a
     horizontal timeline, so let it swipe sideways with each stage at a readable
     width instead of crushing all nine into ~32px columns. */
  [style*="repeat(9, 1fr)"] {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [style*="repeat(9, 1fr)"]::-webkit-scrollbar { display: none; }
  [style*="repeat(9, 1fr)"] > * { flex: 0 0 96px; }

  /* Pro-desk "Desk performance" illustration: the fixed 240px sparkline sat
     beside the headline figure and squeezed the "YTD · NET" label down to one
     character per line. Let the header wrap so the chart drops below the figure
     and the label keeps its own line. */
  .proteam-head { flex-wrap: wrap; gap: 14px; }
  .proteam-head > div:last-child { width: 100%; }

  /* Services axis legend (label · description · N-LINES) → stack so the
     description stops wrapping one word per line. */
  .svc-axis-legend { grid-template-columns: 1fr !important; gap: 8px !important; }
  .svc-axis-legend > span:last-child { justify-self: start; }
  /* Service-line card header: let the two mono labels wrap instead of colliding. */
  .svc-line-head { flex-wrap: wrap !important; }

  /* SLA comparison matrix: keep the table intact and scroll it horizontally
     instead of letting the global collapse flatten it into an ambiguous list. */
  /* The matrix ships an inline overflow:hidden (rounded-corner clip) that beat
     overflow-x:auto, so the SLA table couldn't scroll. Force it. */
  .svc-sla-matrix { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
  .svc-sla-matrix > div { min-width: 720px; }
  .svc-sla-matrix > div[style*="1.2fr repeat(4, 1fr)"] { grid-template-columns: 1.2fr repeat(4, 1fr) !important; }
  .svc-sla-matrix > div[style*="1.2fr 2fr 2fr"] { grid-template-columns: 1.2fr 2fr 2fr !important; }
  /* Technical Support SLA table shares the same treatment (severity matrix). */
  .svc-sla-matrix > div[style*="120px 2fr 1fr 1.4fr 1fr"] { grid-template-columns: 120px 2fr 1fr 1.4fr 1fr !important; }

  /* "How it works" / "Incident lifecycle" step connector line is positioned for
     the desktop 6-across row (top: ~92px). Once the steps wrap to 2 columns on
     mobile it only crosses the first row and dangles past the rest — remove it. */
  .proc-line { display: none !important; }

  /* "The smart approach" 3-way comparison (Build / SaaS / SaaS+Team) collapsed
     to an awkward 2+1 grid. Stack the three options vertically so each reads
     in full as a clean top-to-bottom comparison. */
  .svc-approach-grid { grid-template-columns: 1fr !important; }

  /* Detailed service cards (pricing, use-cases, packages, tier model) are too
     dense to read at the 2-column collapse — their inner rows/labels spill past
     the card edge. Give each its own full-width row on mobile. The child reset
     handles grids whose cards use column spans (e.g. a "full" use-case card). */
  .svc-stack-1col { grid-template-columns: 1fr !important; }
  .svc-stack-1col > * { grid-column: auto !important; min-width: 0; }
  /* A "full" use-case card lays its body out in 3 columns (1.3fr/1.6fr 1fr 1fr)
     — stack it so the last card matches the layout of the others. */
  .svc-stack-1col [style*="1.3fr 1fr 1fr"],
  .svc-stack-1col [style*="1.6fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Customer-Support KPI cards: the big value ("< 90s", "< 1.5%") wrapped to two
     lines in the narrow 2-column card. Shrink it and keep it on one line. */
  section#kpis [style*="font-size:48px"] { font-size: 30px !important; white-space: nowrap; }

  /* Custom-Trading-Tech final CTA box: the 48px side padding + 42px headline
     crowded the content on a phone. Tighten the box and scale the headline. */
  .svc-cta-box { padding: 32px 22px !important; gap: 28px !important; }
  .svc-cta-box h2 { font-size: clamp(28px, 8vw, 38px) !important; }

  /* Dedicated-Tech "Full rate card" band: its two CTAs sat side-by-side and
     overflowed the card. Stack them full-width below the copy. */
  .svc-ratecard > div:last-child { flex-direction: column; gap: 10px; width: 100%; }
  .svc-ratecard > div:last-child .btn { width: 100%; justify-content: center; }

  /* Horizontal-slider treatment for card rows that read better as a swipe than
     a stack (e.g. the Custom-Trading-Tech pricing tiers). */
  .svc-slider {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    margin: 0 -18px;
    padding: 2px 18px 14px;
  }
  .svc-slider::-webkit-scrollbar { display: none; }
  .svc-slider > * {
    flex: 0 0 82% !important;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Contact "Direct routes" cards: the email addresses are long unbreakable
     tokens that spilled out of the 2-column cards. Give each its own full-width
     row so the address fits on one line. */
  section#routes [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  section#routes .route-card .mono { overflow-wrap: anywhere; }

  /* Service-hero node diagram (CTT build-surface, CSS triage): an absolutely-
     positioned radial schematic built for a wide canvas — at phone width the
     nodes overlap into an illegible pile. It's decorative and the hero copy +
     KPIs already carry the message, so drop it on mobile. */
  .hero-schematic { display: none !important; }

  /* Insights index: tighten hero→filters gap; make category chips a swipe row. */
  .blog-index-section { padding-top: 22px !important; }
  /* Contact hero: tighten top space + kicker→headline gap on mobile. */
  .contact-hero { padding-top: 26px !important; }
  .contact-hero-msg { position: static !important; padding-top: 0 !important; }
  .contact-hero .hero-pill { margin-bottom: 10px !important; }
  /* Founders' pull-quote mark sits lower on desktop; nudge it up on mobile. */
  .ab-note-quote { top: 6px !important; font-size: 72px !important; }
  .blog-toolbar { margin-bottom: 22px !important; }
  .blog-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px; padding: 2px 16px;
    width: 100%;
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-filter { flex: 0 0 auto; }

  /* Newsroom filter row: chips scroll horizontally in one line; arrows hide
     (the card carousel is swipeable on touch). */
  .ins-filterbar { flex-wrap: nowrap !important; gap: 0 !important; }
  .ins-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px; padding: 2px 16px;
    width: 100%;
  }
  .ins-filters::-webkit-scrollbar { display: none; }
  .ins-filters button { flex: 0 0 auto; }
  .ins-nav { display: none !important; }

  /* About cards: float the index number to the top-right so the title
     rises into the freed vertical space (saves height on mobile). */
  .ab-card { position: relative; }
  .ab-card-n { position: absolute; top: 28px; right: 24px; margin: 0; }
  .ab-card-t { margin-top: 0 !important; padding-right: 34px; }

  /* About "why we exist" beat labels: a touch larger on mobile. */
  .ab-sn-label { font-size: 11.5px !important; }
}