/*
 * /youtube-ads-management/, the cleanup redesign (ops repo docs/design/2026-11-08-youtube-ads-management-cleanup/
 * 03-plan.md; Brandon 2026-11-08: "should redesign skill clean it up", "Make sure it's mobile first"; the default since
 * his "Go" the same night). inc/managed-ads.php loads it on that page, whose main carries .mga-v2, on top of
 * css/managed-ads.css and css/set-it-up.css. Tokens frozen: the explainer's ink, body, meta, accent, tint, rule, the
 * form's yellow ring and rule, the existing gradients and Founders Grotesk.
 *
 * Phone first at 375: label, headline, lead, both cards and the trust row inside an iPhone SE's 667 px. Then 640 (cards
 * side by side), 768 (steps in three columns) and 900 (two columns: the pitch beside the form).
 */

/* ---- Hero: the whole pitch and both doors -------------------------------- */

.template-managed.mga-v2 .mga-hero {
	padding: 20px 16px 48px;
	grid-template-areas: "text" "how" "form" "quote" "video";
	row-gap: 32px;
}

.mga-v2 .mga-how { grid-area: how; }
.mga-v2 .mga-quote--hero { grid-area: quote; margin: 0; }
.mga-v2 .mga-videoslot { grid-area: video; }

.template-managed.mga-v2 .mga-sell {
	margin-top: 8px;
	font-size: 28px;
	line-height: 1.1;
}

.template-managed.mga-v2 .mga-hero .mga-answer {
	margin-top: 10px;
	font-size: 18px;
	line-height: 1.45;
	color: var(--xp-body);
}

.mga-v2 .mga-answer b {
	font-weight: 600;
	color: var(--xp-ink);
}

.mga-v2 .mga-choices {
	margin-top: 16px;
}

.mga-v2 .mga-choice {
	padding: 14px 88px 14px 16px;
}

.mga-v2 .mga-choice:active {
	transform: scale(0.99);
}

/* The renewal line (plan section 6, row 6): printed only once sprizzy-a6 fills it. */
.mga-v2 .mga-choice__renew {
	font-size: 14px;
	line-height: 1.4;
	color: #d9e2ff;
}

.template-managed.mga-v2 .mga-choices + .mga-points {
	margin-top: 14px;
}

.mga-v2 .mga-points {
	font-size: 16px;
}

/* The trust row's two links keep their text size; the tap box is 44 px tall (padding offset by negative margins, so
   the row does not grow). */
.mga-v2 .mga-points a:not(.gp-partner) {
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;
	text-decoration-thickness: 1px;
}

.mga-v2 .mga-points a.gp-partner {
	padding: 13px 0;
	margin-top: -13px;
	margin-bottom: -13px;
}

.mga-v2 .mga-points a:hover,
.mga-v2 .mga-points a:focus-visible {
	text-decoration-thickness: 2px;
}

.mga-v2 .mga-points a:focus-visible {
	outline: 3px solid var(--xp-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- How it works: Brandon's three steps, always printed ------------------- */

.template-managed .mga-how h2 {
	font-size: 24px;
	line-height: 1.15;
	font-weight: 600;
	color: var(--xp-ink);
}

.mga-how__steps {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.mga-how__steps li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.mga-how__n {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--xp-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
}

.mga-how__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--xp-body);
}

.mga-how__text b {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--xp-ink);	text-wrap: balance;
}

/* ---- The form: the choice asked once ---------------------------------------- */

.mga-v2 .mga-hero__form {
	scroll-margin-top: 12px;
}

/* "Rather do it yourself?": the quiet sibling, a 44 px tall link. */
.template-managed.mga-v2 .mga-under {
	margin-top: 8px;
}

.mga-v2 .mga-under a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	text-underline-offset: 3px;
}

.mga-v2 .mga-under a:hover,
.mga-v2 .mga-under a:focus-visible {
	text-decoration-thickness: 2px;
}

.mga-v2 .mga-under a:focus-visible {
	outline: 3px solid var(--xp-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* The two-option switch (js/set-it-up.js page mode): native radios styled as two segments, each at least 48 px. */
.mga-v2 .siu-switch {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.mga-v2 .siu-seg {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 6px 10px;
	border: 1px solid var(--hm-rule, #d9d6d2);
	border-radius: var(--hm-radius, 8px);
	background: #fff;
	color: var(--xp-ink);
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.mga-v2 .siu-seg input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Each option's line shows only from 900 px, where the form is the only picker (see the end of this file). */
.mga-v2 .siu-seg__d {
	display: none;
}

.mga-v2 .siu-seg:hover {
	background: var(--xp-tint);
}

.mga-v2 .siu-seg.is-on {
	border-color: var(--xp-accent);
	background: var(--xp-accent);
	color: #fff;
}

.mga-v2 .siu-seg:focus-within {
	box-shadow: 0 0 0 3px var(--hm-yellow, #ffd600);
}

.mga-v2 .siu-monthly {
	margin-top: 10px;
}

.mga-v2 .siu-monthly[hidden],
.mga-v2 .siu-check[hidden] {
	display: none;
}

.mga-v2 .siu-monthly a {
	color: var(--xp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mga-v2 .siu-err:not([hidden]) {
	margin-top: -4px;
}

/* ---- Grow my channel: what happens every month (navy) ----------------------- */

.mga-loop__go {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.template-managed .mga-section--navy .mga-loop__go .mga-loop__note {
	margin-top: 0;
}

.mga-btn--light {
	background: #fff;
	color: var(--xp-accent) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.mga-btn--light:hover,
.mga-btn--light:focus-visible {
	background: var(--xp-tint);
}

.mga-btn--light:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.mga-textbtn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #fff !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mga-textbtn:hover,
.mga-textbtn:focus-visible {
	text-decoration-thickness: 2px;
}

.mga-textbtn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Small links below: 44 px tap boxes, same look ----------------------------- */

.mga-v2 .xp-glance li a,
.mga-v2 .mga-quote figcaption a {
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;
}

.template-managed.mga-v2 .mga-close .xp-links {
	row-gap: 24px;
}

.template-managed.mga-v2 .mga-close .xp-links a {
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;
}

/* ---- The guarantee sheet on this page: its button is the plain accent button ------ */

#spz-mbg.mga-plain .mb-go {
	padding: 0;
	background: var(--mb-accent);
	box-shadow: none;
	border-radius: 10px;
}

#spz-mbg.mga-plain .mb-go__label {
	border-radius: 10px;
}

#spz-mbg.mga-plain .mb-go:focus-visible {
	box-shadow: var(--mb-focus);
}

/* ---- Phones: the chat button never covers the pitch, a field or the sticky bar ---------- */

@media (max-width: 899px) {
	html.mga-chat-off .spc-launch {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	body.mga-sticky-on .spc-launch {
		transform: translateY(-80px);
	}
}

/* ---- 640 and wider: the two cards side by side ------------------------------------- */

@media (min-width: 640px) {
	.mga-v2 .mga-hero__text {
		max-width: 640px;
	}

	.mga-v2 .mga-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.mga-v2 .mga-choice {
		padding: 16px 16px 64px;
	}

	.mga-v2 .mga-choice__go {
		top: auto;
		bottom: 14px;
		left: 16px;
		right: auto;
		transform: none;
	}

	.mga-loop__go {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 24px;
	}
}

/* ---- 768 and wider: the steps in three columns ------------------------------------ */

@media (min-width: 768px) {
	.template-managed.mga-v2 .mga-hero {
		padding-top: 32px;
	}

	.template-managed.mga-v2 .mga-sell {
		font-size: 32px;
	}

	.mga-how__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.mga-how__steps li {
		flex-direction: column;
		gap: 12px;
	}

	.mga-v2 .mga-hero__form,
	.mga-v2 .mga-quote--hero {
		max-width: 560px;
	}

	.template-managed.mga-v2 .mga-close .xp-links {
		row-gap: 10px;
	}
}

/* ---- 900 and wider: the pitch beside the form; the form is the only picker -------------- */
/* Brandon 2026-11-08, on the 1440 preview: "Is it odd that there are two sets of buttons to select one video vs
   channel?" Where the form sits beside the hero, the two cards go and the form's two tiles (with each option's line)
   are the only picker. The freed left column carries the label, headline, lead, Brandon's three steps (compact), the
   trust row, the quote, and the answer video once one is registered; the separate "How it works" band is not printed
   twice: the same section moves into the left column. .mga-hero__text gives up its box (display: contents) so its
   children and the steps can be ordered in one column; phones and tablets keep the layout above. */

@media (min-width: 900px) {
	.template-managed.mga-v2 .mga-hero {
		padding: 72px 24px 72px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
		grid-template-areas:
			"label form"
			"sell form"
			"lead form"
			"how form"
			"points form"
			"quote form"
			"video form"
			". form";
		grid-template-rows: repeat(7, auto) 1fr;
		column-gap: 56px;
		row-gap: 0;
	}

	.mga-v2 .mga-hero__text {
		display: contents;
	}

	.mga-v2 .mga-hero__text > .mga-eyebrow { grid-area: label; }
	.mga-v2 .mga-hero__text > .mga-sell { grid-area: sell; }
	.mga-v2 .mga-hero__text > .mga-answer { grid-area: lead; }
	.mga-v2 .mga-hero__text > .mga-points { grid-area: points; }

	.mga-v2 .mga-hero__text > .mga-choices {
		display: none;
	}

	.template-managed.mga-v2 .mga-sell {
		font-size: 46px;
		line-height: 1.08;
	}

	.template-managed.mga-v2 .mga-hero .mga-answer {
		max-width: none;
		font-size: 20px;
	}

	/* The three steps, compact: a small disc, the step on one line, its detail line under it. */
	.mga-v2 .mga-how {
		margin-top: 24px;
	}

	.template-managed.mga-v2 .mga-how h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.mga-v2 .mga-how__steps {
		margin: 0;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.mga-v2 .mga-how__steps li {
		flex-direction: row;
		gap: 12px;
	}

	.mga-v2 .mga-how__n {
		flex: 0 0 28px;
		width: 28px;
		height: 28px;
		margin-top: 1px;
		padding-top: 2px;
		box-sizing: border-box;
		font-size: 15px;
		line-height: 1;
	}

	.mga-v2 .mga-how__text {
		gap: 2px;
		font-size: 15px;
		line-height: 1.4;
	}

	.mga-v2 .mga-how__text b {
		font-size: 18px;
		line-height: 1.3;
	}

	.template-managed.mga-v2 .mga-choices + .mga-points,
	.mga-v2 .mga-points {
		margin-top: 22px;
	}

	.mga-v2 .mga-quote--hero {
		align-self: start;
		max-width: none;
		margin-top: 28px;
	}

	.mga-v2 .mga-videoslot {
		margin-top: 28px;
	}

	.mga-v2 .mga-hero__form {
		max-width: none;
		align-self: start;
	}

	/* The form's two options as tiles, each with its line. */
	.mga-v2 .siu-seg {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 4px;
		min-height: 0;
		padding: 12px 14px 13px;
		text-align: left;
	}

	.mga-v2 .siu-seg__t {
		font-size: 17px;
		line-height: 1.2;
		font-weight: 700;
	}

	.mga-v2 .siu-seg__d {
		display: block;
		font-size: 14px;
		line-height: 1.35;
		font-weight: 400;
		color: var(--xp-body);
	}

	.mga-v2 .siu-seg.is-on .siu-seg__d {
		color: #d9e2ff;
	}

	.mga-loop__go {
		margin-top: 32px;
	}
}