/**
 * Site-wide mobile / responsive polish — loads LAST.
 * Fixes overflow, squeeze, wrap, and alignment across page types.
 *
 * @package OdioSoft
 */

/* ═══════════════════════════════════════
   Global safety
   ═══════════════════════════════════════ */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
.odio-site,
.odio-main,
.odio-section,
.odio-container,
.odio-hero,
.odio-header,
.odio-footer,
.odio-drawer {
	max-width: 100%;
	min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
.odio-section__title,
.odio-section__desc,
.odio-hero__title,
.odio-hero__subtitle,
.odio-content,
.odio-card__title,
.odio-card__excerpt {
	overflow-wrap: anywhere;
	word-break: break-word;
	text-wrap: pretty;
}

/* Flex/grid children must shrink */
.odio-hero__inner > *,
.odio-hero__content,
.odio-hero__media,
.odio-split > *,
.odio-content-layout > *,
.odio-final-cta__inner > *,
.odio-module-cta__inner > *,
.odio-related-services__article,
.odio-feature-card,
.odio-gain__card,
.odio-feature-scope__card {
	min-width: 0;
}

/* ═══════════════════════════════════════
   ≤899px — tablet + phone
   ═══════════════════════════════════════ */

@media (max-width: 899.98px) {
	/* Titles in split / CTA bands: never center via margin-auto */
	.odio-module-cta .odio-section__title,
	.odio-crm-cta .odio-section__title,
	.odio-wa-cta .odio-section__title,
	.odio-ig-cta .odio-section__title,
	.odio-final-cta__title,
	.odio-cta-band h2,
	.odio-section__header:not(.odio-section__header--center) .odio-section__title {
		margin-inline: 0;
		text-align: left;
		max-width: none;
	}

	.odio-module-cta__inner,
	.odio-crm-cta__inner,
	.odio-wa-cta__inner,
	.odio-ig-cta__inner,
	.odio-final-cta__inner,
	.odio-cta-band__inner {
		grid-template-columns: 1fr !important;
		display: grid;
		gap: 1.25rem;
		align-items: start;
	}

	.odio-module-cta__actions,
	.odio-crm-actions,
	.odio-wa-cta__actions,
	.odio-ig-cta__actions,
	.odio-final-cta__actions,
	.odio-cta-band__actions,
	.odio-hero__actions,
	.odio-featured-product__actions {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: stretch;
		gap: 0.65rem;
	}

	.odio-module-cta__actions .odio-btn,
	.odio-crm-actions .odio-btn,
	.odio-wa-cta__actions .odio-btn,
	.odio-ig-cta__actions .odio-btn,
	.odio-final-cta__actions .odio-btn,
	.odio-cta-band__actions .odio-btn,
	.odio-hero__actions .odio-btn,
	.odio-featured-product__actions .odio-btn,
	.odio-about__actions .odio-btn,
	.odio-integrations__actions .odio-btn,
	.odio-integrations__featured-actions .odio-btn,
	.odio-module-catalog__actions .odio-btn {
		white-space: normal;
		text-wrap: balance;
		flex: 1 1 auto;
		min-width: min(100%, 11rem);
		justify-content: center;
		text-align: center;
		height: auto;
		min-height: 2.75rem;
		padding-block: 0.7rem;
		line-height: 1.3;
	}

	/* Sliders + homepage CTA rows: one row, equal share of full width */
	.odio-slider .odio-hero__actions,
	.odio-hero--home .odio-hero__actions,
	.odio-hero--page.odio-slider .odio-hero__actions,
	.odio-hero--sector-slider .odio-hero__actions,
	.odio-hero--connect .odio-hero__actions,
	.odio-hero--psikodio .odio-hero__actions,
	.odio-home .odio-featured-product__actions,
	.odio-home .odio-crm-actions,
	.odio-home .odio-crm-band__actions {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		gap: 0.45rem;
		width: 100%;
		max-width: 100%;
	}

	.odio-slider .odio-hero__actions .odio-btn,
	.odio-hero--home .odio-hero__actions .odio-btn,
	.odio-hero--page.odio-slider .odio-hero__actions .odio-btn,
	.odio-hero--sector-slider .odio-hero__actions .odio-btn,
	.odio-hero--connect .odio-hero__actions .odio-btn,
	.odio-hero--psikodio .odio-hero__actions .odio-btn,
	.odio-home .odio-featured-product__actions .odio-btn,
	.odio-home .odio-crm-actions .odio-btn,
	.odio-home .odio-crm-band__actions .odio-btn {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none;
		white-space: nowrap !important;
		justify-content: center;
		text-align: center;
		padding-inline: 0.45rem;
		font-size: 0.82rem;
		min-height: 2.5rem;
		line-height: 1.2;
	}

	/* Sidebars / content layouts */
	.odio-content-layout,
	.odio-content-layout--reverse,
	.odio-split {
		grid-template-columns: 1fr !important;
	}

	/* Module catalog how-to strip */
	.odio-module-catalog__guide {
		grid-template-columns: 1fr !important;
		gap: 0.55rem;
		max-width: none;
	}

	.odio-module-catalog__guide::before {
		display: none;
	}

	.odio-module-catalog__guide li {
		justify-items: start;
		text-align: left;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 0.65rem 0.75rem;
		padding: 0.7rem 0.85rem;
	}

	.odio-module-catalog__guide-step {
		grid-row: 1 / span 2;
	}

	.odio-module-catalog__guide strong,
	.odio-module-catalog__guide em {
		justify-self: start;
		text-align: left;
	}

	/* Module showcase bands / follow grids (all channel UIs) */
	.odio-crm-band__grid,
	.odio-crm-follow__grid,
	.odio-wa-band__grid,
	.odio-wa-follow__grid,
	.odio-ig-band__grid,
	.odio-ig-follow__grid,
	.odio-fb-band__grid,
	.odio-fb-follow__grid,
	.odio-tt-band__grid,
	.odio-tt-follow__grid,
	.odio-em-band__grid,
	.odio-em-follow__grid,
	.odio-rv-band__grid,
	.odio-rv-follow__grid,
	.odio-mp-band__grid,
	.odio-mp-follow__grid,
	.odio-kp-band__grid,
	.odio-kp-follow__grid,
	.odio-tf-band__grid,
	.odio-tf-follow__grid,
	.odio-ix-band__grid,
	.odio-ix-follow__grid,
	.odio-cp-band__grid,
	.odio-cp-follow__grid,
	.odio-module-capabilities__grid,
	.odio-module-related__grid,
	.odio-gain__grid,
	.odio-feature-scope__grid,
	.odio-process-flow__track,
	.odio-related-services__grid,
	.odio-ad-results__grid,
	.odio-single-product__modules-grid {
		grid-template-columns: 1fr !important;
	}

	/* Process flow: stack steps vertically */
	.odio-process-flow__track {
		display: grid !important;
		gap: 0.85rem;
	}

	.odio-process-flow__rail {
		display: none;
	}

	/* Catalog shells */
	.odio-module-catalog__shell,
	.odio-svc-showcase .odio-module-catalog__shell,
	.odio-sec-showcase .odio-module-catalog__shell,
	.odio-ln-showcase .odio-module-catalog__shell {
		grid-template-columns: 1fr !important;
	}

	/* Home / feature product */
	.odio-featured-product__inner,
	.odio-featured-product__grid {
		grid-template-columns: 1fr !important;
	}

	.odio-slider__stage {
		padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
	}

	/* Intro / section spacing on modules & services */
	.odio-single-service__intro-panel,
	.odio-single-module .odio-single-service__intro-panel {
		padding-left: 1.1rem;
		gap: 0.75rem;
		max-width: none;
	}

	.odio-single-service__intro-title,
	.odio-single-module .odio-single-service__intro-title {
		font-size: clamp(1.2rem, 1.05rem + 1.2vw, 1.55rem);
		padding-bottom: 0.95rem;
	}

	.odio-section {
		padding-block: clamp(2rem, 1.6rem + 2vw, 3.25rem);
	}

	.odio-hero {
		padding-block: clamp(1.75rem, 1.4rem + 2vw, 3rem);
	}

	.odio-hero__title {
		font-size: clamp(1.35rem, 1.15rem + 2.2vw, 1.95rem);
		line-height: 1.22;
		max-width: none;
		margin-inline: 0;
	}

	.odio-hero__subtitle,
	.odio-section__desc {
		max-width: none;
		font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.05rem);
	}

	/* Forms */
	.odio-form__row,
	.odio-final-cta--split .odio-form__row {
		grid-template-columns: 1fr !important;
	}

	.odio-form--card,
	.odio-final-cta--split .odio-form--card {
		padding: 1.15rem 1rem;
	}

	/* Related services cards — keep padding breathable */
	.odio-related-services__article {
		padding: 1.15rem 1.1rem 1.2rem;
	}

	.odio-related-services__chips {
		flex-wrap: wrap;
	}

	/* FAQ */
	.odio-faq__grid,
	.odio-faq-cols {
		grid-template-columns: 1fr !important;
	}

	/* Commerce / pricing */
	.odio-pricing,
	.odio-quote__grid,
	.odio-commerce-grid {
		grid-template-columns: 1fr !important;
		max-width: none;
	}

	/* Sticky CTA */
	.odio-sticky-cta__inner {
		flex-wrap: wrap;
		gap: 0.55rem;
	}

	.odio-sticky-cta .odio-btn {
		white-space: normal;
	}

	/* Connect mid layouts */
	.odio-connect-channels__flow > li,
	.odio-connect-outcomes__flow > span,
	.odio-connect-impact__path > span {
		min-width: 0;
		white-space: normal;
	}

	.odio-viz__metrics,
	.odio-viz__fields,
	.odio-stage__kpis,
	.odio-hero--connect .odio-viz__side-stack {
		grid-template-columns: 1fr 1fr !important;
	}

	.odio-ad-results__metrics {
		grid-template-columns: 1fr !important;
	}
}

/* ═══════════════════════════════════════
   ≤639px — phones
   ═══════════════════════════════════════ */

@media (max-width: 639.98px) {
	.odio-container {
		padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
	}

	.odio-btn,
	.odio-hero__actions .odio-btn,
	.odio-module-cta__actions .odio-btn,
	.odio-featured-product__actions .odio-btn,
	.odio-sticky-cta .odio-btn {
		white-space: normal !important;
		width: 100%;
		flex: 1 1 100%;
	}

	.odio-hero__actions,
	.odio-module-cta__actions,
	.odio-crm-actions,
	.odio-featured-product__actions,
	.odio-final-cta__actions,
	.odio-cta-band__actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* Override: one full-width row, equal button share */
	.odio-slider .odio-hero__actions,
	.odio-hero--home .odio-hero__actions,
	.odio-hero--page.odio-slider .odio-hero__actions,
	.odio-hero--sector-slider .odio-hero__actions,
	.odio-hero--connect .odio-hero__actions,
	.odio-hero--psikodio .odio-hero__actions,
	.odio-home .odio-featured-product__actions,
	.odio-home .odio-crm-actions,
	.odio-home .odio-crm-band__actions {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		width: 100% !important;
		gap: 0.35rem;
	}

	.odio-slider .odio-hero__actions .odio-btn,
	.odio-hero--home .odio-hero__actions .odio-btn,
	.odio-hero--page.odio-slider .odio-hero__actions .odio-btn,
	.odio-hero--sector-slider .odio-hero__actions .odio-btn,
	.odio-hero--connect .odio-hero__actions .odio-btn,
	.odio-hero--psikodio .odio-hero__actions .odio-btn,
	.odio-home .odio-featured-product__actions .odio-btn,
	.odio-home .odio-crm-actions .odio-btn,
	.odio-home .odio-crm-band__actions .odio-btn {
		width: auto !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding-inline: 0.4rem !important;
		font-size: 0.74rem !important;
		min-height: 2.35rem !important;
		white-space: nowrap !important;
		justify-content: center !important;
		text-align: center !important;
	}

	.odio-stats,
	.odio-logos--grid,
	.odio-viz__metrics,
	.odio-viz__fields,
	.odio-stage__kpis,
	.odio-hero--connect .odio-viz__side-stack,
	.odio-home-sectors__grid,
	.odio-sector-grid--home,
	.odio-single-landing .odio-feature-grid {
		grid-template-columns: 1fr !important;
	}

	.odio-module-catalog__tab {
		min-width: 0;
		flex: 1 1 auto;
	}

	.odio-module-catalog__nav {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 0.45rem;
		padding-bottom: 0.35rem;
		scrollbar-width: thin;
	}

	.odio-module-catalog__nav .odio-module-catalog__tab {
		flex: 0 0 auto;
		min-width: 7.5rem;
		max-width: 12rem;
	}

	.odio-crm-ui__table-wrap,
	.odio-module-catalog__panels,
	.odio-svc-showcase__panels,
	.odio-sec-showcase__panels {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.odio-section__eyebrow,
	.odio-related-services__eyebrow,
	.odio-single-service__intro-eyebrow,
	.odio-form__eyebrow,
	.odio-hero__eyebrow {
		letter-spacing: 0.02em;
		text-transform: none;
		overflow-wrap: anywhere;
	}

	.odio-about__title,
	.odio-404__code {
		font-size: clamp(1.45rem, 1.1rem + 3vw, 2rem);
		max-width: none;
	}

	.odio-404__code {
		font-size: clamp(3.5rem, 2.5rem + 8vw, 5.5rem);
	}

	.odio-process-flow__card,
	.odio-gain__card,
	.odio-feature-scope__card,
	.odio-related-services__article {
		padding: 1rem 0.95rem 1.05rem;
	}

	.odio-related-services__header,
	.odio-section__header {
		gap: 0.65rem;
	}

	.odio-related-services__title,
	.odio-section__title {
		font-size: clamp(1.2rem, 1.05rem + 1.5vw, 1.55rem);
		line-height: 1.25;
	}

	/* Header / drawer safe areas */
	.odio-drawer {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* Launcher clearance with sticky CTA */
	body.has-sticky-cta .odio-launcher {
		bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ═══════════════════════════════════════
   ≤379px — very small phones
   ═══════════════════════════════════════ */

@media (max-width: 379.98px) {
	.odio-container {
		padding-inline: 0.85rem;
	}

	.odio-hero__title {
		font-size: clamp(1.22rem, 5.6vw, 1.45rem);
	}

	.odio-module-catalog__tab {
		min-width: 6.75rem;
		padding-inline: 0.55rem;
	}

	.odio-kpi__value {
		font-size: 1.35rem;
	}
}

/* ═══════════════════════════════════════
   Desktop safety (still prevent page-level overflow)
   ═══════════════════════════════════════ */

@media (min-width: 900px) {
	.odio-module-cta__copy,
	.odio-crm-cta__copy,
	.odio-wa-cta__copy,
	.odio-final-cta__content {
		min-width: 0;
	}

	.odio-module-cta .odio-section__title,
	.odio-crm-cta .odio-section__title,
	.odio-wa-cta .odio-section__title {
		margin-inline: 0;
		text-align: left;
	}
}

/* ═══════════════════════════════════════
   Mobile CTA row: full width, equal share
   ═══════════════════════════════════════ */

@media (max-width: 767.98px) {
	.odio-slider .odio-hero__actions,
	.odio-hero.odio-slider .odio-hero__actions,
	.odio-hero--home .odio-hero__actions,
	.odio-hero--page.odio-slider .odio-hero__actions,
	.odio-hero--sector-slider .odio-hero__actions,
	.odio-hero--connect .odio-hero__actions,
	.odio-hero--psikodio .odio-hero__actions,
	.odio-home .odio-featured-product__actions,
	.odio-home .odio-crm-actions,
	.odio-home .odio-crm-band__actions {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		gap: 0.35rem !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.odio-slider .odio-hero__actions .odio-btn,
	.odio-slider .odio-hero__actions .odio-btn--lg,
	.odio-hero.odio-slider .odio-hero__actions .odio-btn,
	.odio-hero--home .odio-hero__actions .odio-btn,
	.odio-hero--home .odio-hero__actions .odio-btn--lg,
	.odio-hero--page.odio-slider .odio-hero__actions .odio-btn,
	.odio-hero--sector-slider .odio-hero__actions .odio-btn,
	.odio-hero--connect .odio-hero__actions .odio-btn,
	.odio-hero--psikodio .odio-hero__actions .odio-btn,
	.odio-home .odio-featured-product__actions .odio-btn,
	.odio-home .odio-crm-actions .odio-btn,
	.odio-home .odio-crm-band__actions .odio-btn {
		display: inline-flex !important;
		width: auto !important;
		max-width: none !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		white-space: nowrap !important;
		justify-content: center !important;
		text-align: center !important;
		padding-block: 0.55rem !important;
		padding-inline: 0.35rem !important;
		font-size: 0.72rem !important;
		line-height: 1.2 !important;
		min-height: 2.3rem !important;
	}
}

@media (max-width: 379.98px) {
	.odio-slider .odio-hero__actions .odio-btn,
	.odio-hero--home .odio-hero__actions .odio-btn,
	.odio-home .odio-featured-product__actions .odio-btn,
	.odio-home .odio-crm-actions .odio-btn {
		padding-inline: 0.28rem !important;
		font-size: 0.66rem !important;
		min-height: 2.15rem !important;
	}
}