/* Page-specific styling for /share-advertising-access/.
   Palette and fonts mirror the Elementor global kit used by /solutions/facebook-automation/. */

/* Tokens sit on :root so the footer rules at the end of this file can reuse
   them — the footer renders outside .sa-page. */
:root {
	--sa-ink: #291f3d;
	--sa-purple: #835baf;
	--sa-purple-light: #bc7dff;
	--sa-purple-lighter: #d5aeff;
	--sa-pink: #fe7cb8;
	--sa-tint: #f8fbfe;
	--sa-body: #4a4459;
	--sa-rule: #e6e1ef;
}

.sa-page {
	--sa-band-pad: 88px;
	font-family: 'Inter', sans-serif;
	color: var(--sa-body);
}

/* Bands are full-bleed; .sa-inner holds content to the theme's 1200px measure. */
.sa-band {
	width: 100%;
	padding: var(--sa-band-pad) 24px;
}

.sa-inner {
	max-width: 900px;
	margin: 0 auto;
}

.sa-band--white {
	background-color: #ffffff;
}

.sa-band--tint {
	background-color: var(--sa-tint);
}

.sa-band--ink {
	background-color: var(--sa-ink);
	color: #cfc7dd;
}

/* ---------- Hero ---------- */

.sa-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #291f3d 0%, #4a2f6b 52%, #835baf 100%);
	color: #ffffff;
	padding: 104px 24px 96px;
}

/* Decorative only — the shapes must never sit above the hero text. */
.sa-hero::before,
.sa-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.sa-hero::before {
	width: 620px;
	height: 620px;
	top: -300px;
	right: -170px;
	background: radial-gradient(circle, rgba(188, 125, 255, .40) 0%, rgba(188, 125, 255, 0) 70%);
}

.sa-hero::after {
	width: 460px;
	height: 460px;
	bottom: -260px;
	left: -140px;
	background: radial-gradient(circle, rgba(254, 124, 184, .30) 0%, rgba(254, 124, 184, 0) 70%);
}

.sa-hero .sa-inner {
	position: relative;
	z-index: 1;
}

.sa-eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sa-purple-light);
	margin: 0 0 14px;
}

.sa-hero h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(2rem, 4.4vw, 3rem);
	line-height: 1.15;
	color: #ffffff;
	margin: 0 0 20px;
}

.sa-lede {
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82);
	max-width: 62ch;
	margin: 0 0 32px;
}

/* ---------- Buttons ---------- */

.sa-btn {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	padding: 17px 32px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.sa-btn--primary {
	background-color: var(--sa-pink);
	color: var(--sa-ink);
	box-shadow: 0 10px 26px rgba(254, 124, 184, .34);
}

.sa-btn--primary:hover,
.sa-btn--primary:focus {
	background-color: #ff94c6;
	color: var(--sa-ink);
	transform: translateY(-2px);
}

/* ---------- Jump links ---------- */

.sa-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

.sa-jump li {
	margin: 0;
}

.sa-jump a {
	display: block;
	font-size: .9375rem;
	font-weight: 500;
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 999px;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.sa-jump a:hover,
.sa-jump a:focus {
	background-color: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .6);
	color: #ffffff;
}

/* ---------- Section headers ---------- */

.sa-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 28px;
}

.sa-step {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: var(--sa-purple);
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(131, 91, 175, .32);
}

.sa-band h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.25;
	color: var(--sa-ink);
	margin: 0;
}

.sa-band--ink h2 {
	color: #ffffff;
}

.sa-band p {
	font-size: 1.0625rem;
	line-height: 1.72;
	margin: 0 0 18px;
}

.sa-band p:last-child {
	margin-bottom: 0;
}

.sa-band a:not(.sa-btn):not(.sa-jump a) {
	color: var(--sa-purple);
	text-decoration: underline;
	text-decoration-color: rgba(131, 91, 175, .4);
	text-underline-offset: 3px;
}

.sa-band a:not(.sa-btn):hover {
	text-decoration-color: var(--sa-purple);
}

.sa-band--ink a:not(.sa-btn) {
	color: var(--sa-purple-light);
	text-decoration-color: rgba(188, 125, 255, .5);
}

/* ---------- Callouts ---------- */

/* Fastest path — the Leadsie one-click link for a section. */
.sa-quick {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	background: linear-gradient(100deg, rgba(131, 91, 175, .09) 0%, rgba(188, 125, 255, .05) 100%);
	border-left: 4px solid var(--sa-purple);
	border-radius: 0 10px 10px 0;
	padding: 20px 24px;
	margin: 0 0 28px;
}

.sa-quick__tag {
	flex: 0 0 auto;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sa-purple);
}

.sa-quick p {
	margin: 0;
	font-size: 1.0625rem;
}

/* Permissions we ask for, and why. */
.sa-note {
	background-color: #ffffff;
	border: 1px solid var(--sa-rule);
	border-radius: 12px;
	padding: 22px 26px;
	margin: 0 0 28px;
	box-shadow: 0 2px 10px rgba(41, 31, 61, .04);
}

.sa-band--white .sa-note {
	background-color: var(--sa-tint);
}

.sa-note__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--sa-ink);
	margin: 0 0 10px;
}

.sa-note p:last-child {
	margin-bottom: 0;
}

.sa-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95em;
	font-weight: 600;
	background-color: rgba(131, 91, 175, .12);
	color: var(--sa-ink);
	border-radius: 5px;
	padding: 2px 7px;
}

/* ---------- Screenshots ---------- */

.sa-figure {
	margin: 28px 0 0;
	background-color: #ffffff;
	border: 1px solid var(--sa-rule);
	border-radius: 14px;
	padding: 14px;
	box-shadow: 0 14px 40px rgba(41, 31, 61, .09);
}

/* width:auto keeps the narrower screenshots at native size rather than
   upscaling them to the frame, which would soften the UI text in them. */
.sa-figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}

.sa-figure figcaption {
	font-size: .875rem;
	line-height: 1.5;
	color: #7e868c;
	text-align: center;
	padding: 14px 10px 4px;
	margin: 0;
}

/* ---------- Closing band ---------- */

.sa-band--ink p {
	color: rgba(255, 255, 255, .78);
}

.sa-outro {
	margin-top: 32px;
}

@media (max-width: 767px) {
	.sa-page {
		--sa-band-pad: 60px;
	}

	.sa-hero {
		padding: 72px 20px 64px;
	}

	.sa-head {
		gap: 14px;
		margin-bottom: 22px;
	}

	.sa-step {
		width: 38px;
		height: 38px;
		font-size: 1rem;
	}

	.sa-quick,
	.sa-note {
		padding: 18px 20px;
	}

	.sa-figure {
		padding: 10px;
	}
}

/* ---------- Footer links ---------- */

/* The footer kit paints nav links white but leaves the address and credit
   links at the normalize.css grey, which is unreadable on the dark ground.
   !important is needed to outrank Elementor's generated per-widget rules. */
.elementor-location-footer a,
.elementor-location-footer .elementor-item {
	color: var(--sa-purple-light) !important;
}

.elementor-location-footer a:hover,
.elementor-location-footer a:focus,
.elementor-location-footer .elementor-item:hover,
.elementor-location-footer .elementor-item:focus {
	color: var(--sa-purple-lighter) !important;
}