/* ==========================================================================
   Connectora — Mobile design system (≤781px)
   A distinct phone experience: editorial bands, thumb-first CTAs,
   and a product-forward first screen. Desktop styles stay untouched.
   ========================================================================== */

@media (max-width: 781px) {
	:root {
		--m-ink: #07263a;
		--m-muted: #3d5568;
		--m-surface: #eef5f2;
		--m-paper: #f7fbf9;
		--m-line: rgba(7, 38, 58, 0.1);
		--m-teal: #0f8f82;
		--m-mint: #7de0bc;
		--m-whatsapp: #25d366;
		--m-radius: 1.15rem;
		--m-ease: cubic-bezier(0.22, 1, 0.36, 1);
	}

	body {
		background: var(--m-surface);
		color: var(--m-ink);
	}

	/* ---- Header: compact glass strip ---- */

	.site-header {
		padding: 0.55rem 0.9rem !important;
		background: rgba(247, 251, 249, 0.92) !important;
		border-bottom: 1px solid var(--m-line) !important;
		backdrop-filter: none !important;
	}

	.site-header .site-header__inner {
		gap: 0.65rem !important;
	}

	.nav-toggle {
		width: 2.6rem !important;
		height: 2.6rem !important;
		border-radius: 0.85rem !important;
		border-color: var(--m-line) !important;
		background: #fff !important;
	}

	.site-logo-image .custom-logo-link,
	.site-header .site-logo-image img,
	.site-header .wp-block-site-logo img,
	.site-header .custom-logo {
		width: 112px !important;
		max-width: 38vw !important;
	}

	/* Left drawer polish */
	.site-primary-nav {
		width: min(19rem, 88vw) !important;
		padding: 5.25rem 1rem 2rem !important;
		background:
			linear-gradient(180deg, #f7fbf9 0%, #fff 40%) !important;
	}

	.site-primary-nav .connectora-nav__list a {
		font-size: 1.05rem !important;
		padding: 1rem 0.75rem !important;
		letter-spacing: -0.02em;
	}

	.site-primary-nav .connectora-nav__list .sub-menu a {
		font-size: 0.95rem !important;
		padding: 0.8rem 0.7rem !important;
		font-weight: 500 !important;
		opacity: 0.9 !important;
	}

	.site-primary-nav .connectora-nav__list > .menu-item-has-children.is-open > .sub-menu {
		display: block !important;
	}

	.site-primary-nav .nav-submenu-toggle {
		display: inline-flex !important;
	}

	.site-nav__cta {
		margin-top: 1.25rem !important;
		border-radius: 0.9rem !important;
		min-height: 3.15rem;
	}

	/* ---- Sticky thumb CTA ---- */

	.m-sticky-cta {
		position: fixed;
		left: 0.75rem;
		right: 0.75rem;
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		z-index: 320;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.55rem;
		align-items: center;
		padding: 0.45rem 0.45rem 0.45rem 1rem;
		border-radius: 1.15rem;
		background: rgba(7, 38, 58, 0.94);
		color: #fff;
		box-shadow: 0 14px 36px rgba(7, 38, 58, 0.28);
		transform: translateY(120%);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.35s var(--m-ease), opacity 0.35s var(--m-ease);
	}

	.m-sticky-cta.is-visible {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.m-sticky-cta__copy {
		min-width: 0;
		font-family: "Instrument Sans", system-ui, sans-serif;
		font-size: 0.78rem;
		line-height: 1.3;
		color: rgba(255, 255, 255, 0.72);
	}

	.m-sticky-cta__copy strong {
		display: block;
		color: #fff;
		font-size: 0.88rem;
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	.m-sticky-cta__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0 1.1rem;
		border-radius: 0.85rem;
		background: linear-gradient(135deg, #25d366, #0f8f82);
		color: #07263a;
		font-family: "Instrument Sans", system-ui, sans-serif;
		font-size: 0.875rem;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	body.nav-open .m-sticky-cta {
		opacity: 0;
		pointer-events: none;
	}

	/* ---- Shared page chrome ---- */

	.page-hero {
		padding: 5rem 1.15rem 2.35rem !important;
		text-align: left;
		background:
			radial-gradient(ellipse 90% 70% at 100% 0%, rgba(37, 211, 102, 0.18), transparent 55%),
			radial-gradient(ellipse 70% 50% at 0% 20%, rgba(15, 143, 130, 0.16), transparent 50%),
			linear-gradient(180deg, #e8f4f0 0%, var(--m-surface) 100%) !important;
		border-bottom: 0 !important;
	}

	.page-hero h1 {
		max-width: none !important;
		font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
		line-height: 1.12 !important;
		letter-spacing: -0.04em !important;
		margin-bottom: 0.65rem !important;
	}

	.page-hero p {
		max-width: none !important;
		font-size: 1.02rem !important;
		color: var(--m-muted) !important;
	}

	.section {
		padding: 2.75rem 1.15rem !important;
	}

	.section h2 {
		max-width: none !important;
		font-size: clamp(1.45rem, 6.5vw, 1.85rem) !important;
	}

	.pricing-grid,
	.feature-grid {
		grid-template-columns: 1fr !important;
		gap: 0.9rem !important;
	}

	.price-tier,
	.feature-card {
		border-radius: var(--m-radius) !important;
		padding: 1.35rem 1.2rem !important;
		background: #fff !important;
		border: 1px solid var(--m-line) !important;
		box-shadow: none !important;
	}

	.wp-block-button,
	.wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.site-header .wp-block-button,
	.site-header .wp-block-button__link {
		width: auto;
	}

	/* ---- Footer: stacked mobile band ---- */

	.site-footer {
		background:
			linear-gradient(165deg, #083047 0%, #062033 55%, #041722 100%) !important;
		margin-bottom: 0;
	}

	.site-footer__shell {
		padding: 2.5rem 1.15rem 1.75rem !important;
	}

	.site-footer__top {
		flex-direction: column !important;
		gap: 1.75rem !important;
		padding-bottom: 1.5rem !important;
		border-bottom: 0 !important;
	}

	.site-footer__brand {
		max-width: none !important;
		width: 100%;
	}

	.site-footer__tagline {
		max-width: none !important;
		font-size: 0.95rem !important;
	}

	.site-footer__cta {
		width: 100%;
		justify-content: center;
		min-height: 3rem;
		border-radius: 0.9rem !important;
	}

	.site-footer__cols {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 1.35rem !important;
		width: 100%;
		border-top: 0 !important;
		padding-top: 0.25rem;
	}

	.site-footer .footer-col {
		padding: 0;
		border-bottom: 0 !important;
		border-top: 0 !important;
	}

	.site-footer .footer-col__title {
		margin-bottom: 0.65rem !important;
		font-size: 0.68rem !important;
	}

	.site-footer .footer-col__list {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0.55rem 0.85rem !important;
	}

	.site-footer .footer-col--integrations .footer-col__list,
	.site-footer .footer-col__list--integrations {
		grid-template-columns: 1fr !important;
	}

	.site-footer .footer-col__list a {
		font-size: 0.92rem !important;
		padding: 0.2rem 0;
	}

	.site-footer__bottom {
		margin-top: 1.35rem;
		padding-top: 1.15rem !important;
		border-top: 0 !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.35rem !important;
	}
}

/* ==========================================================================
   Home — mobile composition
   ========================================================================== */

@media (max-width: 781px) {
	body.hm-home {
		background: var(--m-surface);
	}

	body.hm-home .site-header {
		background: transparent !important;
		border-bottom-color: transparent !important;
	}

	body.hm-home.is-scrolled .site-header,
	body.hm-home .site-header.is-solid {
		background: rgba(247, 251, 249, 0.94) !important;
		border-bottom-color: var(--m-line) !important;
	}

	.st-wrap {
		width: calc(100% - 2.1rem) !important;
	}

	/* First viewport: one composition */
	.st-hero {
		position: relative;
		min-height: 100svh;
		padding: 5.5rem 0 1.5rem !important;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background:
			radial-gradient(ellipse 80% 55% at 85% 8%, rgba(37, 211, 102, 0.28), transparent 55%),
			radial-gradient(ellipse 70% 45% at 10% 0%, rgba(125, 224, 188, 0.35), transparent 50%),
			linear-gradient(180deg, #d9efe8 0%, #eef5f2 42%, #eef5f2 100%) !important;
	}

	.st-hero__glow {
		display: none;
	}

	.st-hero__grid {
		display: flex !important;
		flex-direction: column;
		flex: 1;
		gap: 1.75rem !important;
		width: calc(100% - 2.1rem);
		margin-inline: auto;
	}

	.st-hero__copy {
		text-align: left;
		animation: mRise 0.7s var(--m-ease) both;
	}

	.st-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		margin-bottom: 0.85rem !important;
		padding: 0.35rem 0.7rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.7);
		border: 1px solid rgba(15, 143, 130, 0.18);
		font-size: 0.72rem !important;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.st-hero h1 {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		max-width: none !important;
		margin: 0 0 0.9rem !important;
		font-size: clamp(1.85rem, 8.5vw, 2.35rem) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.045em !important;
	}

	.st-hero__brand {
		display: block;
		font-size: clamp(2.4rem, 11vw, 3.05rem) !important;
		line-height: 0.95 !important;
		letter-spacing: -0.05em !important;
		color: #0f8f82 !important;
		margin: 0 0 0.35rem !important;
	}

	.st-hero__line {
		display: block;
	}

	.st-hero h1 em {
		font-style: normal !important;
		font-weight: 700 !important;
		color: var(--m-ink) !important;
	}

	.st-hero__lede {
		max-width: 32ch !important;
		margin: 0 0 1.25rem !important;
		font-size: 1.02rem !important;
		line-height: 1.55 !important;
		color: var(--m-muted) !important;
	}

	.st-hero__actions {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 0.65rem !important;
		margin-bottom: 0.55rem !important;
	}

	.st-hero__actions .st-btn {
		min-height: 3.15rem;
		border-radius: 0.95rem !important;
		font-size: 1rem !important;
	}

	.st-btn--primary {
		background: linear-gradient(135deg, #25d366, #0f8f82) !important;
		color: #07263a !important;
		box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28) !important;
	}

	.st-btn--secondary {
		background: rgba(255, 255, 255, 0.72) !important;
		border: 1px solid rgba(7, 38, 58, 0.12) !important;
		box-shadow: none !important;
	}

	.st-hero__fine {
		text-align: center;
		font-size: 0.78rem !important;
		color: #5b7386 !important;
	}

	/* Dominant product plane — phone frame */
	.st-hero__stage {
		position: relative !important;
		display: flex !important;
		flex-direction: column;
		min-height: 0 !important;
		max-width: none !important;
		margin-top: auto;
		padding: 0.85rem 0.85rem 0;
		border-radius: 1.5rem 1.5rem 0 0;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
		border: 1px solid rgba(255, 255, 255, 0.65);
		border-bottom: 0;
		box-shadow: 0 -8px 32px rgba(7, 38, 58, 0.08);
		animation: mRise 0.85s var(--m-ease) 0.12s both;
	}

	.st-hero__stage::before {
		content: "";
		display: block;
		width: 3rem;
		height: 0.28rem;
		margin: 0 auto 0.85rem;
		border-radius: 999px;
		background: rgba(7, 38, 58, 0.18);
	}

	.st-float {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		animation: none !important;
	}

	.st-float--a {
		order: 1;
		z-index: 1;
	}

	.st-float--b {
		position: absolute !important;
		top: 1.15rem !important;
		right: 1rem !important;
		z-index: 3;
		order: 0;
		animation: mFloat 3.5s ease-in-out infinite !important;
	}

	.st-float--c {
		order: 2;
		margin-top: 0.75rem;
		z-index: 1;
	}

	.st-ui {
		border-radius: 1.1rem !important;
		border: 1px solid rgba(7, 38, 58, 0.08) !important;
		box-shadow: 0 12px 28px rgba(7, 38, 58, 0.1) !important;
	}

	.st-chip {
		font-size: 0.75rem !important;
		padding: 0.55rem 0.8rem !important;
		box-shadow: 0 10px 22px rgba(7, 38, 58, 0.14) !important;
	}

	.st-toast {
		border-radius: 1rem !important;
	}

	/* Logo strip → marquee chips */
	.st-logos {
		padding: 1.15rem 0 !important;
		background: #fff !important;
		border-bottom: 1px solid var(--m-line) !important;
	}

	.st-logos__label {
		margin: 0 1.05rem 0.75rem !important;
		text-align: left !important;
		font-size: 0.75rem !important;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: 600;
		color: #6a7f90 !important;
	}

	.st-logos__row {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		gap: 0.55rem !important;
		padding: 0 1.05rem 0.25rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.st-logos__row::-webkit-scrollbar {
		display: none;
	}

	.st-logos__row span {
		flex: 0 0 auto;
		padding: 0.55rem 0.85rem;
		border-radius: 999px;
		background: var(--m-surface);
		border: 1px solid var(--m-line);
		font-size: 0.8rem !important;
		color: var(--m-ink) !important;
		white-space: nowrap;
	}

	/* Solutions → stacked action rows */
	.st-solutions {
		padding: 2.5rem 0 !important;
		background: var(--m-paper) !important;
	}

	.st-section-head {
		margin: 0 1.05rem 1.25rem !important;
		max-width: none !important;
	}

	.st-section-head h2 {
		font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
		letter-spacing: -0.035em !important;
	}

	.st-section-head p {
		font-size: 0.98rem !important;
	}

	.st-solutions__grid {
		display: flex !important;
		flex-direction: column;
		gap: 0.7rem !important;
		padding: 0 1.05rem;
	}

	.st-solution {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon title"
			"icon copy"
			"icon link";
		column-gap: 0.9rem;
		row-gap: 0.25rem;
		padding: 1.15rem 1.1rem !important;
		border-radius: var(--m-radius) !important;
		background: #fff !important;
		border: 1px solid var(--m-line) !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.st-solution:hover {
		transform: none !important;
		box-shadow: none !important;
	}

	.st-solution__icon {
		grid-area: icon;
		width: 2.6rem !important;
		height: 2.6rem !important;
		margin: 0.15rem 0 0 !important;
		border-radius: 0.8rem !important;
	}

	.st-solution h3 {
		grid-area: title;
		margin: 0 !important;
		font-size: 1.05rem !important;
	}

	.st-solution p {
		grid-area: copy;
		margin: 0 !important;
		font-size: 0.9rem !important;
		line-height: 1.45 !important;
	}

	.st-solution a {
		grid-area: link;
		margin-top: 0.35rem;
		font-size: 0.88rem !important;
	}

	/* Backbone → snap cards */
	.st-backbone {
		padding: 2.5rem 0 2.75rem !important;
		background:
			radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37, 211, 102, 0.16), transparent 55%),
			#07263a !important;
	}

	.st-backbone .st-section-head {
		text-align: left !important;
		margin-inline: 1.05rem !important;
	}

	.st-stats {
		display: flex !important;
		gap: 0.75rem !important;
		padding: 0 1.05rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.st-stats::-webkit-scrollbar {
		display: none;
	}

	.st-stat {
		flex: 0 0 70%;
		scroll-snap-align: start;
		padding: 1.25rem 1.15rem !important;
		border-radius: var(--m-radius) !important;
		background: rgba(255, 255, 255, 0.06) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
	}

	.st-stat strong {
		font-size: 1.65rem !important;
	}

	/* Showcase */
	.st-showcase {
		padding: 2.5rem 0 !important;
		background: #fff !important;
	}

	.st-showcase__grid {
		display: flex !important;
		flex-direction: column;
		gap: 1.5rem !important;
	}

	.st-showcase__copy h2 {
		font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
	}

	.st-checklist {
		padding-left: 0 !important;
		list-style: none !important;
	}

	.st-checklist li {
		position: relative;
		padding: 0.55rem 0 0.55rem 1.6rem;
		border-bottom: 1px solid var(--m-line);
		font-size: 0.95rem;
	}

	.st-checklist li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.85rem;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		background: linear-gradient(145deg, #25d366, #0f8f82);
	}

	.st-panel {
		border-radius: var(--m-radius) !important;
		overflow: hidden;
		border: 1px solid var(--m-line);
	}

	.st-panel__side {
		display: none !important;
	}

	.st-cta {
		padding: 0 1.05rem 2rem !important;
	}

	.st-cta__box {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1.15rem !important;
		padding: 1.5rem 1.2rem !important;
		border-radius: 1.25rem !important;
		text-align: left !important;
	}

	.st-cta__actions {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 0.65rem !important;
	}

	.st-cta__actions .st-btn {
		width: 100%;
		min-height: 3.1rem;
		border-radius: 0.95rem !important;
	}

	@keyframes mRise {
		from { opacity: 0; transform: translateY(18px); }
		to { opacity: 1; transform: translateY(0); }
	}

	@keyframes mFloat {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-6px); }
	}

	@media (prefers-reduced-motion: reduce) {
		.st-hero__copy,
		.st-hero__stage,
		.st-float--b,
		.m-sticky-cta {
			animation: none !important;
			transition: none !important;
		}
	}
}