/* Mobile annotations — labels in side gutters around focal content (not stacked) */

@media (max-width: 980px) {
	/* ---- Hero compare (Google / Meta / WM landing heroes) ---- */
	.svc-meta-hero-compare__panel--before .svc-meta-hero-compare__ad-wrap,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad:not(.svc-ga-diff__ad--after) .svc-ga-diff__ad-stage,
	.ii-special__ad:not(.ii-special__ad--after) .ii-special__ad-stage {
		display: grid;
		grid-template-columns: minmax(5rem, 31%) minmax(0, 1fr);
		grid-template-rows: 1fr;
		gap: 0.35rem 0.3rem;
		align-items: stretch;
	}

	.svc-meta-hero-compare__panel--after .svc-meta-hero-compare__ad-wrap,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad--after .svc-ga-diff__ad-stage,
	.ii-special__ad--after .ii-special__ad-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(5rem, 31%);
		grid-template-rows: 1fr;
		gap: 0.35rem 0.3rem;
		align-items: stretch;
	}

	.svc-meta-hero-compare__ad-frame,
	.svc-ga-diff__ad-stage .svc-ga-diff__ad-frame,
	.ii-special__ad-stage .ii-special__ad-frame {
		grid-row: 1;
		width: 100%;
		min-width: 0;
		max-width: none;
		margin-inline: 0;
		order: unset;
	}

	.svc-meta-hero-compare__panel--before .svc-meta-hero-compare__ad-frame,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad:not(.svc-ga-diff__ad--after) .svc-ga-diff__ad-stage .svc-ga-diff__ad-frame,
	.ii-special__ad:not(.ii-special__ad--after) .ii-special__ad-stage .ii-special__ad-frame {
		grid-column: 2;
	}

	.svc-meta-hero-compare__panel--after .svc-meta-hero-compare__ad-frame,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad--after .svc-ga-diff__ad-stage .svc-ga-diff__ad-frame,
	.ii-special__ad--after .ii-special__ad-stage .ii-special__ad-frame {
		grid-column: 1;
	}

	.svc-meta-hero-compare__notes:not(.svc-wm-hero-compare__slot-notes),
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad-stage .svc-ga-diff__notes,
	.ii-special__ad-stage .ii-ad-notes {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		gap: 0.45rem;
		min-height: 100%;
		margin: 0;
		padding: 0.15rem 0;
		order: unset;
	}

	.svc-meta-hero-compare__panel--before .svc-meta-hero-compare__notes,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad:not(.svc-ga-diff__ad--after) .svc-ga-diff__ad-stage .svc-ga-diff__notes,
	.ii-special__ad:not(.ii-special__ad--after) .ii-special__ad-stage .ii-ad-notes {
		grid-column: 1;
		grid-row: 1;
	}

	.svc-meta-hero-compare__panel--after .svc-meta-hero-compare__notes,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad--after .svc-ga-diff__ad-stage .svc-ga-diff__notes,
	.ii-special__ad--after .ii-special__ad-stage .ii-ad-notes {
		grid-column: 2;
		grid-row: 1;
	}

	.svc-meta-hero-compare__note:not(.svc-meta-hero-compare__note--below),
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__note,
	.ii-ad-note {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.12rem;
		width: 100%;
		margin: 0;
	}

	.svc-meta-hero-compare__notes--bad:not(.svc-wm-hero-compare__slot-notes) .svc-meta-hero-compare__note,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__notes--bad .svc-ga-diff__note,
	.ii-ad-notes--bad .ii-ad-note {
		flex-direction: row;
		justify-content: flex-end;
		text-align: right;
	}

	.svc-meta-hero-compare__notes--good:not(.svc-wm-hero-compare__slot-notes) .svc-meta-hero-compare__note,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__notes--good .svc-ga-diff__note,
	.ii-ad-notes--good .ii-ad-note {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}

	.svc-meta-hero-compare__notes:not(.svc-wm-hero-compare__slot-notes) .svc-meta-hero-compare__note-label,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__note-label,
	.ii-ad-note__label {
		max-width: 100%;
		width: auto;
		font-size: clamp(0.58rem, 2.6vw, 0.72rem);
		line-height: 1.25;
		transform: none !important;
	}

	.svc-meta-hero-compare__notes--bad:not(.svc-wm-hero-compare__slot-notes) .svc-meta-hero-compare__note-label,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__notes--bad .svc-ga-diff__note-label,
	.ii-ad-notes--bad .ii-ad-note__label {
		text-align: right;
	}

	.svc-meta-hero-compare__notes--good:not(.svc-wm-hero-compare__slot-notes) .svc-meta-hero-compare__note-label,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__notes--good .svc-ga-diff__note-label,
	.ii-ad-notes--good .ii-ad-note__label {
		text-align: left;
	}

	.svc-meta-hero-compare__curve:not(.svc-meta-hero-compare__curve--below),
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__curve,
	.ii-ad-note__curve {
		display: block !important;
		flex: 0 0 auto;
		width: 1.55rem;
		height: 0.95rem;
		transform: none !important;
		margin: 0 !important;
		opacity: 0.95;
	}

	/* Meta compare: distribute labels beside tall feed / portrait creatives */
	.svc-ga-diff__ads--meta .svc-ga-diff__ad-stage .svc-ga-diff__notes,
	.service--meta-ads .svc-meta-hero-compare__notes {
		display: grid;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		align-content: stretch;
		align-self: stretch;
		height: 100%;
		min-height: 100%;
		gap: 0.3rem;
		padding-block: 0.5rem;
		justify-content: stretch;
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__notes--bad,
	.service--meta-ads .svc-meta-hero-compare__notes--bad {
		justify-items: end;
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__notes--good,
	.service--meta-ads .svc-meta-hero-compare__notes--good {
		justify-items: start;
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__note--headline,
	.service--meta-ads .svc-meta-hero-compare__note--headline {
		align-self: start;
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__note--body,
	.service--meta-ads .svc-meta-hero-compare__note--body {
		align-self: center;
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__note--cta,
	.service--meta-ads .svc-meta-hero-compare__note--cta {
		align-self: end;
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__ad:not(.svc-ga-diff__ad--after) .svc-ga-diff__ad-stage,
	.service--meta-ads .svc-meta-hero-compare__panel--before .svc-meta-hero-compare__ad-wrap {
		grid-template-columns: minmax(6.75rem, 38%) minmax(0, 1fr);
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__ad--after .svc-ga-diff__ad-stage,
	.service--meta-ads .svc-meta-hero-compare__panel--after .svc-meta-hero-compare__ad-wrap {
		grid-template-columns: minmax(0, 1fr) minmax(6.75rem, 38%);
	}

	.svc-ga-diff__ads--meta .svc-ga-diff__note-label,
	.service--meta-ads .svc-meta-hero-compare__note-label {
		max-width: 100%;
	}

	/* ---- Opportunity demo (Google Ads feature — side gutter notes) ---- */
	.svc-ga-opp:not(.svc-ga-opp--meta) .svc-ga-opp__frame {
		display: grid;
		grid-template-columns: minmax(5rem, 31%) minmax(0, 1fr);
		gap: 0.35rem 0.3rem;
		align-items: stretch;
	}

	.svc-ga-opp:not(.svc-ga-opp--meta) .svc-ga-opp__notes {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		gap: 0.45rem;
		padding: 0.25rem 0;
		order: unset;
	}

	.svc-ga-opp:not(.svc-ga-opp--meta) .svc-ga-opp__stage {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.svc-ga-opp:not(.svc-ga-opp--meta) .svc-ga-opp__note {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 0.12rem;
		text-align: right;
	}

	.svc-ga-opp:not(.svc-ga-opp--meta) .svc-ga-opp__note-label {
		max-width: 100%;
		font-size: clamp(0.58rem, 2.5vw, 0.68rem);
		line-height: 1.25;
		transform: none !important;
	}

	.svc-ga-opp:not(.svc-ga-opp--meta) .svc-ga-opp__curve {
		display: block !important;
		width: 1.55rem;
		height: 0.95rem;
		transform: none !important;
		margin: 0 !important;
	}

	/* ---- Do & Deliver tour callouts ---- */
	.dd-gads-stage,
	.dd-meta-stage,
	.dd-site-stage {
		display: grid;
		grid-template-columns: minmax(4.5rem, 28%) minmax(0, 1fr) minmax(4.5rem, 28%);
		gap: 0.3rem 0.25rem;
		align-items: center;
	}

	.dd-gads-stage .dd-tour__browser,
	.dd-meta-stage .dd-tour__phone,
	.dd-site-stage .dd-tour__browser {
		grid-column: 2;
		grid-row: 1 / span 3;
		width: 100%;
		max-width: none;
		margin-inline: 0;
		order: unset;
	}

	.dd-curl {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		padding: 0.35rem 0.4rem;
		width: auto;
		max-width: 100%;
	}

	.dd-curl--left {
		grid-column: 1;
		text-align: right;
		align-items: flex-end;
	}

	.dd-curl--right {
		grid-column: 3;
		text-align: left;
		align-items: flex-start;
	}

	.dd-curl__label {
		font-size: clamp(0.52rem, 2.4vw, 0.65rem);
		line-height: 1.2;
	}

	.dd-curl__text {
		font-size: clamp(0.5rem, 2.2vw, 0.62rem);
		line-height: 1.25;
	}

	.dd-curl__arrow {
		display: block !important;
		width: 1.65rem;
		height: 1.35rem;
		margin: 0.05rem 0 0 !important;
		transform: none !important;
	}

	.dd-curl--left.dd-curl--arrow .dd-curl__arrow {
		align-self: flex-end;
	}

	.dd-curl--right.dd-curl--arrow .dd-curl__arrow {
		align-self: flex-start;
	}

	.dd-curl__brace {
		display: none;
	}

	/* ---- Ad card sizing ---- */
	.svc-meta-hero-compare .svc-gad--hero,
	.svc-ga-diff__ad-frame .svc-gad,
	.ii-special__ad-frame .svc-gad,
	.svc-ga-opp__stage .svc-gad {
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.svc-meta-hero-compare .svc-gad--hero {
		font-size: clamp(0.62rem, 2.8vw, 0.78rem);
	}

	.svc-ga-hero--meta-compare .svc-meta-hero-compare__ad-frame {
		padding: 0.3rem;
		background: #fff;
		border-radius: 0.9rem;
		box-shadow:
			0 16px 36px -26px rgba(14, 36, 38, 0.22),
			0 0 0 1px rgba(14, 36, 38, 0.07);
	}
}

@media (max-width: 480px) {
	.svc-meta-hero-compare__panel--before .svc-meta-hero-compare__ad-wrap,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad:not(.svc-ga-diff__ad--after) .svc-ga-diff__ad-stage,
	.ii-special__ad:not(.ii-special__ad--after) .ii-special__ad-stage,
	.svc-ga-opp:not(.svc-ga-opp--meta) .svc-ga-opp__frame {
		grid-template-columns: minmax(4.25rem, 34%) minmax(0, 1fr);
	}

	.svc-meta-hero-compare__panel--after .svc-meta-hero-compare__ad-wrap,
	.svc-ga-diff__ads:not(.svc-ga-diff__ads--meta):not(.svc-wm-diff__compare) .svc-ga-diff__ad--after .svc-ga-diff__ad-stage,
	.ii-special__ad--after .ii-special__ad-stage {
		grid-template-columns: minmax(0, 1fr) minmax(4.25rem, 34%);
	}

	.dd-gads-stage,
	.dd-meta-stage,
	.dd-site-stage {
		grid-template-columns: minmax(3.75rem, 32%) minmax(0, 1fr) minmax(3.75rem, 32%);
	}
}