/* ============================================================================
   ibv5 responsive / mobile layer.

   The design pages are built with desktop-oriented INLINE styles (grids, fixed
   widths, large type) which cannot carry media queries. This stylesheet is loaded
   LAST and overrides those inline styles at small viewports using attribute
   selectors + !important — the only way to make ~60 inline-styled pages reflow
   without hand-editing thousands of style attributes.

   Bespoke hero composites (absolute-positioned mockups) get targeted rules at the
   end of the file.
   ========================================================================== */

/* Global: never allow horizontal scroll from a fixed-width/absolute element.
   overflow-x:clip (where supported) avoids breaking position:sticky; hidden fallback. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
img, svg, video, iframe, object { max-width: 100%; }
* { min-width: 0; } /* let flex/grid children shrink instead of overflowing */

/* ── Tablet / large phone ───────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ib-grid { padding-left: 22px !important; padding-right: 22px !important; }

	/* Collapse every inline multi-column grid to a single column. */
	[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

	/* Cap any fixed / max width to the viewport so nothing overflows. */
	[style*="max-width:"] { max-width: 100% !important; }

	/* Inline flex rows: allow wrapping so button/stat rows don't overflow. */
	[style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
}

/* ── Phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.ib-grid { padding-left: 18px !important; padding-right: 18px !important; }

	/* Tame oversized vertical section padding. */
	[style*="padding:120px 0"], [style*="padding: 120px 0"],
	[style*="padding:110px 0"], [style*="padding: 110px 0"],
	[style*="padding:100px 0"], [style*="padding: 100px 0"],
	[style*="padding:90px 0"],  [style*="padding:88px 0"],
	[style*="padding-top:72px"] { padding-top: 54px !important; padding-bottom: 54px !important; }

	/* Scale down large display type (headings, hero numbers, prices).
	   Substring matches are exact per size — "font-size:44px" won't match "font-size:144px". */
	[style*="font-size:72px"] { font-size: 34px !important; }
	[style*="font-size:64px"] { font-size: 33px !important; }
	[style*="font-size:60px"] { font-size: 32px !important; }
	[style*="font-size:56px"] { font-size: 31px !important; }
	[style*="font-size:52px"] { font-size: 30px !important; }
	[style*="font-size:50px"] { font-size: 30px !important; }
	[style*="font-size:48px"] { font-size: 29px !important; }
	[style*="font-size:46px"] { font-size: 28px !important; }
	[style*="font-size:44px"] { font-size: 28px !important; }
	[style*="font-size:42px"] { font-size: 27px !important; }
	[style*="font-size:40px"] { font-size: 26px !important; }
	[style*="font-size:38px"] { font-size: 25px !important; }
	[style*="font-size:36px"] { font-size: 24px !important; }
	[style*="font-size:34px"] { font-size: 23px !important; }
	[style*="font-size:32px"] { font-size: 22px !important; }
	[style*="font-size:30px"] { font-size: 21px !important; }

	/* H1 fixed at 38px on mobile (h1[style] out-specifies the per-size overrides above). */
	h1, h1[style] { font-size: 38px !important; }

	/* CTA rows / button groups: full-width-ish, centered wrap. */
	.ib-btn-lg { width: auto; }

}

/* ── Hero / product composites (absolute-positioned, fixed-px) ──────────────
   These don't reflow, so at phone widths we neutralise their fixed height and
   hide the decorative absolute mockups, keeping the headline + CTAs usable. */
@media (max-width: 760px) {
	/* Decorative fixed-px product composites don't reflow — hide on phones so the
	   headline + CTAs carry the hero. (.ib-hero-visual = homepage dashboard+phone+fan.) */
	.ib-hero-visual, .ib-rfan { display: none !important; }

	/* The sticky platform jump-bar already scrolls; keep it usable */
	.ib-pnav-bar { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── Pricing: Feature Comparison table ──────────────────────────────────────
   The table has an inline min-width:760px so its columns stay readable. Below the
   width where it overflows the container (~820px), make its wrapper a horizontal
   scroll region (!important overrides the wrapper's inline overflow:visible). Above
   that the table fits and overflow stays visible so its sticky header keeps working. */
@media (max-width: 820px) {
	.ib-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

	/* overflow-x:auto forces overflow-y to compute to `auto` (CSS spec: auto+visible→auto),
	   so the wrap becomes a vertical scroll container too. The header cells' inline
	   `top:72px` (for the desktop sticky-below-nav effect) then resolves against the wrap
	   and shoves the row 72px down, overlapping the first body row. Neutralise the vertical
	   offset here — the horizontal `left:0` freeze on the corner cell is unaffected. */
	.ib-table-wrap thead th { top: 0 !important; }

	/* Trim the Features column (col 1) on mobile only. Auto-layout inflates it to ~39% of
	   the table; 35% shaves ~30px and hands the space to the cramped value columns. Desktop
	   keeps the wider column (inline min-width:220px, no width set). */
	.ib-table-wrap thead th:first-child { width: 35% !important; }
}

/* Homepage: hero feature strip + award badges + customer logos → 2 per line on
   mobile/tablet (override the global single-column stack; class beats [style*=…]
   at equal specificity by coming later in the cascade). */
@media (max-width: 900px) {
	.ib-hero-strip,
	.ib-awards-grid,
	.ib-clients-grid { grid-template-columns: 1fr 1fr !important; }

	/* Hero feature strip: the global [style*="display:flex"]{flex-wrap:wrap} rule makes the
	   longer-titled items drop their text below the icon while short ones stay beside it —
	   inconsistent. Keep the icon beside the text on every item; the title wraps within its
	   own column instead (min-width:0 lets it shrink). */
	.ib-hero-strip > div { flex-wrap: nowrap !important; }

	/* Platform jump-bar (.ib-pnav-bar, platform.php): the same global flex-wrap rule wraps its
	   14 chips onto several rows, so a position:sticky bar eats the viewport and its inline
	   overflow-x:auto never engages (main.js centerChip() then has nothing to scroll).
	   Keep it a single horizontally-scrolling row. */
	.ib-pnav-bar { flex-wrap: nowrap !important; }
}