/**
 * GroClicks mobile composition layer.
 *
 * This file is intentionally loaded after every page stylesheet. It creates
 * one predictable type scale, spacing rhythm and touch model without changing
 * the approved desktop compositions.
 */

@media (max-width: 767px) {
	:root {
		--gc-mobile-gutter: 16px;
		--gc-mobile-section: 64px;
	}

	html {
		scroll-padding-top: 76px;
	}

	.gc-shell,
	.gc-footer-shell,
	.gc-conversion-form-section__inner {
		width: min(calc(100% - (var(--gc-mobile-gutter) * 2)), var(--gc-content-width, 1240px));
	}

	.gc-button {
		min-height: 50px;
		padding: 13px 18px;
		border-radius: 11px;
		line-height: 1.3;
		white-space: normal;
		text-align: center;
	}

	:is(
		.gc-hero,
		.gc-seo-hero,
		.gc-local-hero,
		.gc-ecom-hero,
		.gc-edtech-hero,
		.gc-ai-hero,
		.gc-hub-hero,
		.gc-insights-hero,
		.gc-proof-hero,
		.gc-svc-hero,
		.gc-conversion-hero
	) {
		min-height: 0 !important;
		padding: 40px 0 48px !important;
	}

	:is(
		.gc-hero h1,
		.gc-seo-hero h1,
		.gc-local-hero h1,
		.gc-ecom-hero h1,
		.gc-edtech-hero h1,
		.gc-ai-hero h1,
		.gc-hub-hero__copy h1,
		.gc-insights-hero h1,
		.gc-proof-hero h1,
		.gc-svc-hero h1,
		.gc-conversion-copy h1
	) {
		margin-top: 15px;
		font-size: clamp(36px, 10.5vw, 40px) !important;
		line-height: 1.01 !important;
		letter-spacing: -.048em !important;
		text-wrap: balance;
	}

	:is(
		.gc-hero__lead,
		.gc-seo-hero__lead,
		.gc-local-hero__lead,
		.gc-ecom-hero__lead,
		.gc-edtech-hero__lead,
		.gc-ai-hero__lead,
		.gc-svc-hero__lead,
		.gc-proof-hero__lead,
		.gc-conversion-lead,
		.gc-hub-hero__copy > p:not(.gc-eyebrow),
		.gc-insights-hero > div > div > p:not(.gc-eyebrow)
	) {
		margin-top: 20px;
		margin-bottom: 0;
		font-size: 16px !important;
		line-height: 1.58 !important;
	}

	:is(
		.gc-hero__grid,
		.gc-seo-hero__grid,
		.gc-local-hero__grid,
		.gc-ecom-hero__grid,
		.gc-edtech-hero__grid,
		.gc-ai-hero__grid,
		.gc-hub-hero__grid,
		.gc-proof-hero__grid,
		.gc-svc-hero__grid,
		.gc-conversion-hero__grid
	) {
		gap: 28px !important;
	}

	:is(
		.gc-hero__actions,
		.gc-seo-hero__actions,
		.gc-local-hero__actions,
		.gc-ecom-hero__actions,
		.gc-edtech-hero__actions,
		.gc-proof-hero__actions,
		.gc-svc-actions,
		.gc-hub-actions
	) {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
		margin-top: 24px;
	}

	:is(
		.gc-hero__actions,
		.gc-seo-hero__actions,
		.gc-local-hero__actions,
		.gc-ecom-hero__actions,
		.gc-edtech-hero__actions,
		.gc-proof-hero__actions,
		.gc-svc-actions,
		.gc-hub-actions
	) .gc-button {
		justify-content: center;
		width: 100%;
	}

	:is(
		.gc-hero__assurances,
		.gc-seo-hero__assurances,
		.gc-local-hero__assurances,
		.gc-ecom-hero__assurances,
		.gc-edtech-hero__assurances,
		.gc-ai-hero__assurances,
		.gc-proof-hero__assurances,
		.gc-svc-assurances,
		.gc-hub-assurances
	) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px 12px !important;
		width: 100% !important;
		margin-top: 20px !important;
		margin-bottom: 0 !important;
		padding: 0;
	}

	:is(
		.gc-hero__assurances,
		.gc-seo-hero__assurances,
		.gc-local-hero__assurances,
		.gc-ecom-hero__assurances,
		.gc-edtech-hero__assurances,
		.gc-ai-hero__assurances,
		.gc-proof-hero__assurances,
		.gc-svc-assurances,
		.gc-hub-assurances
	) li {
		align-items: flex-start;
		min-width: 0;
		font-size: 10px;
		line-height: 1.4;
	}

	:is(
		.gc-hero__assurances,
		.gc-seo-hero__assurances,
		.gc-local-hero__assurances,
		.gc-ecom-hero__assurances,
		.gc-edtech-hero__assurances,
		.gc-ai-hero__assurances,
		.gc-proof-hero__assurances,
		.gc-svc-assurances,
		.gc-hub-assurances
	) li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.gc-eyebrow,
	.gc-ai-hero__eyebrow {
		margin-bottom: 14px;
		font-size: 9px;
		line-height: 1.35;
		letter-spacing: .12em;
	}

	.gc-section-heading,
	.gc-edtech-heading {
		margin-bottom: 32px;
	}

	:is(
		.gc-section-heading h2,
		.gc-edtech-heading h2,
		.gc-founder__copy h2,
		.gc-cta h2,
		.gc-conversion-process h2,
		.gc-hub-story h2,
		.gc-performance-problem h2
	) {
		font-size: clamp(31px, 8.8vw, 35px) !important;
		line-height: 1.05 !important;
		letter-spacing: -.04em !important;
		text-wrap: balance;
	}

	.gc-section-heading > p:not(.gc-eyebrow),
	.gc-edtech-heading > p:not(.gc-eyebrow) {
		font-size: 15px;
		line-height: 1.62;
	}

	.gc-section-heading--center,
	.gc-edtech-heading--center {
		text-align: left;
	}

	.gc-section-heading--center .gc-eyebrow,
	.gc-edtech-heading--center .gc-eyebrow {
		justify-content: flex-start;
	}

	:is(
		.gc-intro,
		.gc-journey,
		.gc-evidence,
		.gc-founder,
		.gc-insights,
		.gc-faq,
		.gc-home-engagement,
		.gc-hub-story,
		.gc-performance-problem,
		.gc-hub-principles,
		.gc-performance-channels,
		.gc-insights-library,
		.gc-hub-system,
		.gc-hub-founder,
		.gc-engagement,
		.gc-hub-faq,
		.gc-insights-standard,
		.gc-conversion-process,
		.gc-edtech-problems,
		.gc-edtech-searches,
		.gc-edtech-models,
		.gc-edtech-services,
		.gc-edtech-lead,
		.gc-edtech-process,
		.gc-edtech-evidence,
		.gc-edtech-measurement,
		.gc-edtech-expert,
		.gc-edtech-faq
	) {
		padding-block: var(--gc-mobile-section) !important;
	}

	:is(
		.gc-pathway,
		.gc-journey__track article,
		.gc-evidence__card,
		.gc-edtech-problems article,
		.gc-edtech-models article,
		.gc-edtech-searches__board article,
		.gc-edtech-expert__card,
		.gc-conversion-process article,
		.gc-hub-card-grid article
	) {
		min-height: 0 !important;
		padding: 22px !important;
		border-radius: 18px;
	}

	/* Homepage: retain the connected-system diagram, but compose it as a
	 * compact mobile visual instead of a second full screen. */
	.gc-engine {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 7px;
		min-height: 0 !important;
		margin: 0;
		padding: 12px;
		border-radius: 20px;
		transform: none !important;
	}

	.gc-engine__ring {
		grid-column: 1 / -1;
		width: 210px;
		height: 210px;
		margin: 2px auto 8px;
	}

	.gc-engine__ring::before {
		inset: 27px;
	}

	.gc-engine__core {
		width: 134px;
		height: 134px;
	}

	.gc-engine__core strong {
		font-size: 19px;
	}

	.gc-engine__label,
	.gc-engine__label--performance {
		grid-column: auto;
		min-height: 38px;
		padding: 8px 5px;
		text-align: center;
	}

	.gc-engine__label b {
		font-size: 9px;
		line-height: 1.2;
	}

	.gc-engine__label span {
		display: none;
	}

	.gc-engine__outcome {
		grid-column: 1 / -1;
		min-height: 36px;
		margin: 2px 0 0;
		font-size: 9px;
		line-height: 1.35;
	}

	/* Keep the service-page demos legible while removing avoidable height. */
	.gc-seo-serp,
	.gc-local-mapdemo,
	.gc-ecom-searchdemo,
	.gc-ai-demo,
	.gc-svc-visual,
	.gc-decision-board,
	.gc-performance-console {
		width: 100% !important;
		margin: 0 auto !important;
		transform: none !important;
	}

	.gc-seo-serp__body {
		min-height: 300px;
	}

	.gc-local-mapdemo__map {
		min-height: 292px;
	}

	.gc-ai-demo__panels,
	.gc-ai-demo__panel,
	.gc-ai-chat,
	.gc-ai-google,
	.gc-ai-perplexity,
	.gc-ai-gemini,
	.gc-ai-copilot {
		min-height: 360px !important;
	}

	.gc-ai-demo__tabs {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.gc-ai-demo__tabs::-webkit-scrollbar {
		display: none;
	}

	.gc-ai-demo__tabs button {
		min-width: 68px;
		min-height: 52px;
		flex: 1 0 68px;
		scroll-snap-align: start;
		font-size: 8px;
	}

	.gc-svc-visual__body {
		min-height: 330px;
	}

	/* EdTech: overlay the explanation on the image so the visual tells one
	 * concise story rather than becoming a tall image-plus-caption stack. */
	.gc-edtech-hero-visual {
		position: relative;
		display: block;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible;
		margin-top: 0;
		border-radius: 20px;
	}

	.gc-edtech-hero-visual img {
		width: 100%;
		height: auto;
		min-height: 0 !important;
		aspect-ratio: 16 / 10;
		border-radius: 19px;
		object-fit: cover;
	}

	.gc-edtech-hero-visual__label {
		position: absolute !important;
		right: 10px;
		bottom: 43px;
		left: 10px;
		z-index: 2;
		margin: 0 !important;
		padding: 10px 12px;
		border-radius: 10px;
		background: rgb(25 19 31 / 91%);
	}

	.gc-edtech-hero-visual__label strong {
		font-size: 12px;
	}

	.gc-edtech-hero-visual__route {
		position: absolute !important;
		right: 12px;
		bottom: 13px;
		left: 12px;
		z-index: 2;
		justify-content: flex-start;
		padding: 0;
		font-size: 7px;
	}

	.gc-edtech-hero-visual figcaption {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.gc-edtech-platforms {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.gc-edtech-platforms ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
	}

	.gc-edtech-platforms li {
		min-height: 46px;
	}

	/* Contact and audit pages introduce the form after a concise promise. */
	.gc-conversion-preview {
		display: none !important;
	}

	.gc-conversion-form-section {
		padding: 48px 0 64px;
	}

	.gc-form-card,
	.gc-edtech-form-card {
		padding: 23px 16px;
		border-radius: 18px;
	}

	.gc-conversion-form {
		gap: 15px;
	}

	.gc-conversion-form :is(input, select) {
		min-height: 50px;
	}

	.gc-contact-details > div {
		min-height: 0;
		padding: 16px;
	}

	/* Inline text links must remain easy to tap, not tiny desktop links. */
	:is(
		.gc-evidence__link,
		.gc-insights__header-link,
		.gc-insight-card__link,
		.gc-seo-cta__actions > a:not(.gc-button),
		.gc-local-review-cta__actions > a:not(.gc-button),
		.gc-ecom-audit__actions > a:not(.gc-button),
		.gc-edtech-final__card > div:last-child > a:not(.gc-button)
	) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.gc-growth-engines .gc-ge__eyebrow {
		color: #d9d1c6;
	}

	.gc-proofbar__inner,
	.gc-seo-proofbar__inner,
	.gc-local-proofbar__inner,
	.gc-ecom-proofbar__inner,
	.gc-ai-proofbar__inner {
		padding-block: 20px;
	}

	.gc-footer-cta__inner {
		gap: 22px;
		padding-block: 38px;
	}

	.gc-footer-cta h2 {
		font-size: clamp(30px, 9vw, 36px);
		line-height: 1.05;
	}

	.gc-footer-main {
		padding-top: 44px;
	}
}

@media (max-width: 390px) {
	:root {
		--gc-mobile-gutter: 14px;
	}

	:is(
		.gc-hero h1,
		.gc-seo-hero h1,
		.gc-local-hero h1,
		.gc-ecom-hero h1,
		.gc-edtech-hero h1,
		.gc-ai-hero h1,
		.gc-hub-hero__copy h1,
		.gc-insights-hero h1,
		.gc-proof-hero h1,
		.gc-svc-hero h1,
		.gc-conversion-copy h1
	) {
		font-size: 36px !important;
	}

	.gc-engine__ring {
		width: 196px;
		height: 196px;
	}

	.gc-engine__core {
		width: 126px;
		height: 126px;
	}

	.gc-ai-demo__tabs button {
		min-width: 64px;
		flex-basis: 64px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.gc-shell {
		width: min(calc(100% - 48px), var(--gc-content-width, 1240px));
	}

	:is(
		.gc-hero,
		.gc-seo-hero,
		.gc-local-hero,
		.gc-ecom-hero,
		.gc-edtech-hero,
		.gc-ai-hero,
		.gc-hub-hero,
		.gc-insights-hero,
		.gc-proof-hero,
		.gc-svc-hero,
		.gc-conversion-hero
	) {
		min-height: 0 !important;
		padding: 48px 0 56px !important;
	}

	:is(
		.gc-hero h1,
		.gc-seo-hero h1,
		.gc-local-hero h1,
		.gc-ecom-hero h1,
		.gc-edtech-hero h1,
		.gc-ai-hero h1,
		.gc-hub-hero__copy h1,
		.gc-insights-hero h1,
		.gc-proof-hero h1,
		.gc-svc-hero h1,
		.gc-conversion-copy h1
	) {
		font-size: clamp(44px, 6vw, 48px) !important;
		line-height: 1 !important;
	}

	:is(
		.gc-hero__grid,
		.gc-seo-hero__grid,
		.gc-local-hero__grid,
		.gc-ecom-hero__grid,
		.gc-edtech-hero__grid,
		.gc-ai-hero__grid,
		.gc-hub-hero__grid,
		.gc-proof-hero__grid,
		.gc-svc-hero__grid
	) {
		gap: 30px !important;
	}

	.gc-conversion-preview {
		display: none !important;
	}

	.gc-ai-demo__panels,
	.gc-ai-demo__panel {
		min-height: 370px !important;
	}
}