/**
 * setupcompany.eu — Service detail template (Screen 3 of /DESIGN-HANDOFF.md)
 * Loaded only on the "Service Page" template. Inter throughout.
 *
 * Section rhythm (grounds):
 *   1 Hero + sticky CTA card ... #003399 + dot grid
 *   2 Key facts strip ......... on the hero's bottom edge
 *   3 What's included ......... #f8f7f4
 *   4 Process steps ........... #1a1f2e + top-faded dots
 *   5 Who this is for ......... #ffffff + right-faded dots
 *   6 Pricing context ........ #f8f7f4 page, white panel
 *   7 Related services ....... #ffffff
 *   8 FAQ .................... #f8f7f4  (static cards + FAQPage JSON-LD)
 *   9 CTA .................... #f8f7f4 page, #003399 block
 *
 * Self-contained and scoped to .setupco-service / .setupco-servicepage so it
 * never needs to load alongside homepage.css or services-hub.css.
 */

/* ====================================================================== */
/*  Tokens                                                                 */
/* ====================================================================== */
.setupco-service {
	--eu-blue: #003399;
	--eu-blue-deep: #002673;
	--eu-blue-tint: #e8edf9;
	--eu-blue-tint-bd: #c9d5f0;
	--yellow: #ffcc00;
	--yellow-hover: #e6b800;
	--yellow-pressed: #cca300;
	--ink: #1a1f2e;
	--text-2: #4a5068;
	--text-3: #6b7280;
	--warm: #f8f7f4;
	--white: #ffffff;
	--border: #e6e4de;
	--border-white: #eeedea;
	--on-blue-body: #c0cde6;
	--on-blue-cap: #8fa4cc;
	--on-ink-body: #d5d8e0;
	--on-ink-cap: #a8aebd;
	--maxw: 1240px;
	--pad-x: 24px;
	--sec-y: 96px;

	font-family: var(--setupco-font, "Inter", system-ui, sans-serif);
	color: var(--ink);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.setupco-service,
.setupco-service *,
.setupco-service *::before,
.setupco-service *::after {
	box-sizing: border-box;
}

/* ====================================================================== */
/*  Break out of the GeneratePress content container                       */
/* ====================================================================== */
.setupco-servicepage #page,
.setupco-servicepage #content,
.setupco-servicepage .site-content,
.setupco-servicepage #primary,
.setupco-servicepage #main {
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.setupco-servicepage #main {
	display: block;
}

.setupco-servicepage .setupco-service {
	margin: 0;
	padding: 0;
	border: 0;
}

.setupco-servicepage .site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(248, 247, 244, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}

.setupco-servicepage .site-header .inside-header {
	background: transparent;
}

/* ====================================================================== */
/*  Shared primitives                                                      */
/* ====================================================================== */
.setupco-service h1,
.setupco-service h2,
.setupco-service h3,
.setupco-service p,
.setupco-service ul,
.setupco-service ol {
	margin: 0;
}

.sc-ico {
	display: block;
	flex: none;
}

.sc-section {
	position: relative;
	overflow: hidden;
	padding: var(--sec-y) var(--pad-x);
}

.sc-inner {
	position: relative;
	max-width: var(--maxw);
	margin: 0 auto;
}

.sc-h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.08;
	text-wrap: balance;
	max-width: 20ch;
}

.sc-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eu-blue);
}

.sc-eyebrow--yellow {
	color: var(--yellow);
}

.sc-eyebrow--onBlue {
	color: var(--on-blue-body);
}

.sc-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 44px;
}

.sc-head--split {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(240px, 1fr);
	gap: 48px;
	align-items: end;
}

.sc-head--split .sc-head__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sc-head__aside {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--text-2);
	margin-bottom: 4px;
}

.sc-head__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--eu-blue);
	text-decoration: none;
	padding-bottom: 6px;
}

.sc-head__link:hover {
	text-decoration: underline;
}

.sc-head--onDark {
	grid-template-columns: minmax(300px, 1.1fr) minmax(260px, 0.9fr);
}

.sc-head--onDark .sc-h2 {
	color: var(--white);
	max-width: 18ch;
}

.sc-head--onDark .sc-head__aside {
	color: var(--on-ink-cap);
}

.sc-hl {
	color: var(--yellow);
}

/* ---- Buttons ------------------------------------------------------- */
.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	min-height: 44px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease-out, transform 150ms ease-out,
		border-color 150ms ease-out, color 150ms ease-out;
}

.sc-btn:hover {
	text-decoration: none;
}

.sc-btn--primary {
	background: var(--yellow);
	color: var(--ink);
	padding: 17px 30px;
}

.sc-btn--primary:hover {
	background: var(--yellow-hover);
	color: var(--ink);
}

.sc-btn--primary:active {
	background: var(--yellow-pressed);
	transform: translateY(1px);
}

.sc-btn--outline {
	background: transparent;
	color: var(--eu-blue);
	border-color: var(--eu-blue);
	padding: 13px 22px;
}

.sc-btn--outline:hover {
	background: var(--eu-blue-tint);
	color: var(--eu-blue);
}

.sc-btn--outline:active {
	background: var(--eu-blue-tint-bd);
	color: var(--eu-blue-deep);
	border-color: var(--eu-blue-deep);
}

.sc-btn--block {
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 15.5px;
}

.sc-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.sc-btn-row--mixed {
	align-items: center;
	margin-top: 6px;
}

.sc-textlink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 3px;
	min-height: 44px;
}

.sc-textlink:hover {
	color: var(--white);
	border-bottom-color: var(--white);
	text-decoration: none;
}

/* ---- Cards --------------------------------------------------------- */
.sc-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--warm);
	border-radius: 18px;
	padding: 30px 28px;
}

.sc-card__title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.3;
}

.sc-card__body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-2);
	flex: 1;
}

.sc-card__link {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--eu-blue);
	padding-top: 8px;
	border-top: 1px solid var(--border);
}

.sc-iso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 27px;
	border-radius: 3px;
	background: var(--eu-blue-tint);
	border: 1px solid var(--eu-blue-tint-bd);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--eu-blue);
}

.sc-grid {
	display: grid;
	gap: 20px;
}

/* ---- Focus -------------------------------------------------------- */
.setupco-service a:focus-visible,
.setupco-service button:focus-visible {
	outline: 2px solid var(--eu-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.sc-svc-hero a:focus-visible,
.sc-svcproc a:focus-visible,
.sc-cta a:focus-visible {
	outline-color: var(--yellow);
}

/* ---- Breadcrumbs -------------------------------------------------- */
.sc-crumbs {
	position: relative;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 34px var(--pad-x) 0;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--on-blue-cap);
}

.sc-crumbs a {
	color: var(--on-blue-cap);
	text-decoration: none;
}

.sc-crumbs a:hover {
	color: var(--white);
	text-decoration: underline;
}

.sc-crumbs span[aria-hidden] {
	opacity: 0.6;
}

.sc-crumbs [aria-current] {
	color: var(--white);
	font-weight: 500;
}

/* ====================================================================== */
/*  1. Hero                                                                */
/* ====================================================================== */
.sc-svc-hero {
	position: relative;
	/* `clip` (not `hidden`) contains the decorative ring without turning the
	   hero into a scroll container — which would break the sticky CTA card. */
	overflow: clip;
	background: var(--eu-blue);
	color: var(--white);
}

.sc-svc-hero__dots {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0);
	background-size: 26px 26px;
}

.sc-svc-hero__ring {
	position: absolute;
	top: -220px;
	right: -140px;
	width: 580px;
	height: 580px;
	border-radius: 999px;
	border: 84px solid rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.sc-svc-hero__wrap {
	position: relative;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 40px var(--pad-x) 0;
}

.sc-svc-hero__grid {
	display: grid;
	grid-template-columns: minmax(320px, 1.5fr) minmax(260px, 1fr);
	gap: 64px;
	align-items: start;
}

.sc-svc-hero__col {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-bottom: 72px;
}

.sc-counter-pill {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 6px 15px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-blue-body);
}

.sc-counter-pill__dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 999px;
	background: var(--yellow);
}

.sc-svc-hero__title {
	font-size: clamp(36px, 5vw, 62px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.03;
	color: var(--white);
	max-width: 17ch;
	text-wrap: balance;
}

.sc-svc-hero__sub {
	font-size: 19px;
	line-height: 1.65;
	color: var(--on-blue-body);
	max-width: 60ch;
}

.sc-svc-hero--bare .sc-svc-hero__wrap {
	padding-bottom: 72px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

/* Hero CTA card (sticky on desktop) */
.sc-svc-hero__card {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 12px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 20px;
	padding: 28px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.sc-svc-card__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-blue-cap);
}

.sc-svc-card__line {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--white);
}

.sc-svc-card__note {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--on-blue-cap);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 14px;
}

/* ====================================================================== */
/*  2. Key facts strip                                                     */
/* ====================================================================== */
.sc-svc-facts {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.sc-svc-facts__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	list-style: none;
}

.sc-fact {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px;
	border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.sc-fact:first-child {
	padding-left: 0;
}

.sc-fact:last-child {
	border-right: 0;
}

.sc-fact .sc-ico {
	color: var(--yellow);
}

.sc-fact__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sc-fact__value {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--white);
}

.sc-fact__label {
	font-size: 13px;
	color: var(--on-blue-cap);
}

/* ====================================================================== */
/*  3. What's included                                                     */
/* ====================================================================== */
.sc-incl {
	background: var(--warm);
}

.sc-incl__grid {
	display: grid;
	grid-template-columns: minmax(300px, 1.15fr) minmax(300px, 0.85fr);
	gap: 56px;
	align-items: start;
}

.sc-incl__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sc-incl__body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-2);
}

.sc-incl__reassure {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--white);
	border-radius: 18px;
	padding: 26px 28px;
	box-shadow: 0 1px 2px rgba(26, 31, 46, 0.04), 0 10px 28px rgba(26, 31, 46, 0.06);
}

.sc-incl__reassure-title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.sc-incl__reassure p {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--text-2);
}

/* Deliverables panel */
.sc-deliver {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: var(--white);
	border-radius: 20px;
	padding: 34px 32px;
	box-shadow: 0 1px 2px rgba(26, 31, 46, 0.04), 0 14px 36px rgba(26, 31, 46, 0.08);
}

.sc-deliver__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border-white);
}

.sc-deliver__title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.sc-deliver__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

.sc-deliver__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
	padding: 0;
}

.sc-deliver__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.sc-deliver__item .sc-ico {
	color: var(--eu-blue);
	margin-top: 2px;
}

.sc-deliver__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sc-deliver__item-title {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sc-deliver__item-detail {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text-2);
}

/* ====================================================================== */
/*  4. Process steps                                                       */
/* ====================================================================== */
.sc-svcproc {
	background: var(--ink);
	color: var(--white);
}

.sc-svcproc__dots {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000, transparent);
	mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000, transparent);
}

.sc-psteps {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
}

.sc-pstep {
	position: relative;
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 28px;
	align-items: start;
	padding-bottom: 34px;
}

.sc-pstep:last-child {
	padding-bottom: 0;
}

.sc-pstep__line {
	position: absolute;
	left: 21px;
	top: 46px;
	bottom: 0;
	width: 2px;
	background: rgba(255, 255, 255, 0.16);
}

.sc-pstep__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	position: relative;
	z-index: 1;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	color: var(--white);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sc-pstep.is-first .sc-pstep__circle {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--ink);
}

.sc-pstep__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 6px;
	min-width: 0;
}

.sc-pstep__titlerow {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.sc-pstep__title {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--white);
}

.sc-pstep__chip {
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 11px;
	color: var(--on-ink-cap);
	border: 1px solid rgba(255, 255, 255, 0.24);
	white-space: nowrap;
}

.sc-pstep.is-first .sc-pstep__chip {
	color: var(--yellow);
	border-color: rgba(255, 204, 0, 0.4);
}

.sc-pstep__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--on-ink-cap);
	max-width: 68ch;
}

/* ====================================================================== */
/*  5. Who this is for                                                     */
/* ====================================================================== */
.sc-svcaud {
	background: var(--white);
}

.sc-svcaud__dots {
	position: absolute;
	top: 0;
	right: 0;
	width: 42%;
	height: 100%;
	pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(0, 51, 153, 0.09) 1px, transparent 0);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(to left, #000, transparent);
	mask-image: linear-gradient(to left, #000, transparent);
}

.sc-svcaud .sc-head {
	max-width: 24ch;
}

.sc-svcaud__grid {
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.sc-aud-card {
	color: var(--ink);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.sc-aud-card:hover {
	color: var(--ink);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(26, 31, 46, 0.08);
}

.sc-aud-card:hover .sc-card__link {
	text-decoration: underline;
}

.sc-aud-card__title {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.3;
}

.sc-aud-card__body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-2);
	flex: 1;
}

/* ====================================================================== */
/*  6. Pricing context                                                     */
/* ====================================================================== */
.sc-svcprice {
	background: var(--warm);
	padding: 0 var(--pad-x) var(--sec-y);
}

.sc-svcprice__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-top: var(--sec-y);
}

.sc-svcprice__panel {
	display: grid;
	grid-template-columns: minmax(280px, 1.25fr) minmax(240px, 0.75fr);
	gap: 48px;
	align-items: center;
	background: var(--white);
	border-radius: 24px;
	padding: clamp(36px, 5vw, 56px);
	box-shadow: 0 1px 2px rgba(26, 31, 46, 0.04), 0 16px 44px rgba(26, 31, 46, 0.07);
}

.sc-svcprice__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sc-svcprice__main .sc-h2 {
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.12;
	max-width: 22ch;
}

.sc-svcprice__body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-2);
	max-width: 58ch;
}

.sc-svcprice__figure {
	display: flex;
	align-items: center;
	border-left: 3px solid var(--yellow);
	padding-left: 28px;
}

/* ====================================================================== */
/*  7. Related services                                                    */
/* ====================================================================== */
.sc-svcrel {
	background: var(--white);
}

.sc-svcrel__grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sc-rel-card {
	color: var(--ink);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.sc-rel-card:hover {
	color: var(--ink);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(26, 31, 46, 0.08);
}

.sc-rel-card:hover .sc-card__link {
	text-decoration: underline;
}

.sc-rel-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--eu-blue);
}

.sc-rel-card__num {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/*  8. FAQ                                                                 */
/* ====================================================================== */
.sc-svcfaq {
	background: var(--warm);
}

.sc-svcfaq__grid {
	display: grid;
	grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
	gap: 56px;
	align-items: start;
}

.sc-svcfaq__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sc-svcfaq__intro .sc-h2 {
	max-width: 16ch;
}

.sc-svcfaq__note {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-2);
	max-width: 40ch;
}

.sc-svcfaq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sc-svcfaq__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--white);
	border-radius: 16px;
	padding: 26px 28px;
	box-shadow: 0 1px 2px rgba(26, 31, 46, 0.04);
}

.sc-svcfaq__q {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.sc-svcfaq__a {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-2);
}

/* ====================================================================== */
/*  9. CTA                                                                 */
/* ====================================================================== */
.sc-cta {
	background: var(--warm);
	padding: 0 var(--pad-x) var(--sec-y);
}

.sc-cta__block {
	position: relative;
	overflow: hidden;
	max-width: var(--maxw);
	margin: 0 auto;
	background: var(--eu-blue);
	border-radius: 28px;
	padding: clamp(44px, 6vw, 80px) clamp(32px, 6vw, 72px);
	color: var(--white);
}

.sc-cta__dots {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0);
	background-size: 26px 26px;
}

.sc-cta__ring {
	position: absolute;
	bottom: -220px;
	right: -140px;
	width: 520px;
	height: 520px;
	border-radius: 999px;
	border: 80px solid rgba(255, 204, 0, 0.09);
	pointer-events: none;
}

.sc-cta__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(300px, 1.35fr) minmax(230px, 0.65fr);
	gap: 48px;
	align-items: end;
}

.sc-cta__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sc-cta__title {
	font-size: clamp(32px, 4.6vw, 54px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.03;
	color: var(--white);
	max-width: 16ch;
	text-wrap: balance;
}

.sc-cta__text {
	font-size: 18px;
	line-height: 1.65;
	color: var(--on-blue-body);
	max-width: 52ch;
}

.sc-cta__aside {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sc-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
}

.sc-channels .sc-channel {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--white);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}

.sc-channels .sc-channel:hover,
.sc-channels .sc-channel:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--yellow);
	color: var(--white);
}

.sc-cta__contact {
	font-size: 15px;
	line-height: 1.6;
	color: var(--on-blue-body);
	padding-top: 6px;
}

.sc-cta__contact a {
	color: var(--on-blue-body);
}

.sc-cta__contact a:hover {
	color: var(--white);
}

/* ====================================================================== */
/*  Mobile sticky CTA bar                                                  */
/* ====================================================================== */
.sc-svc-mobilecta {
	display: none;
}

.sc-svc-mobilecta[hidden] {
	display: none;
}

/* ====================================================================== */
/*  Responsive — 1280 / 1024 / 900 / 768 / 480                             */
/* ====================================================================== */
@media (max-width: 1024px) {
	.setupco-service {
		--sec-y: 64px;
	}

	.sc-head {
		margin-bottom: 40px;
	}
}

@media (max-width: 900px) {
	.sc-svc-hero__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.sc-svc-hero__col {
		padding-bottom: 40px;
	}

	.sc-svc-hero__card {
		position: static;
		margin-top: 0;
	}

	.sc-incl__grid,
	.sc-svcprice__panel {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sc-svcprice__panel {
		align-items: start;
	}

	.sc-svcprice__figure {
		border-left: 0;
		border-top: 3px solid var(--yellow);
		padding-left: 0;
		padding-top: 22px;
	}
}

@media (max-width: 768px) {
	.setupco-service {
		--sec-y: 48px;
	}

	.sc-head--split,
	.sc-svcfaq__grid,
	.sc-cta__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		align-items: start;
	}

	.sc-head__aside {
		margin-bottom: 0;
	}

	.sc-svc-facts__inner {
		grid-template-columns: 1fr 1fr;
	}

	.sc-fact {
		padding: 20px;
	}

	.sc-fact:nth-child(odd) {
		padding-left: 0;
	}

	.sc-fact:nth-child(even) {
		border-right: 0;
	}

	/* Process timeline: tighten the label column on small screens */
	.sc-pstep {
		grid-template-columns: 56px 1fr;
		gap: 18px;
	}

	.sc-pstep__line {
		left: 21px;
	}

	/* Mobile sticky CTA bar */
	.sc-svc-mobilecta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(248, 247, 244, 0.94);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--border);
	}

	.sc-svc-mobilecta[hidden] {
		display: none;
	}
}

@media (max-width: 480px) {
	.sc-svc-facts__inner {
		grid-template-columns: 1fr;
	}

	.sc-fact {
		padding: 16px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	.sc-fact:last-child {
		border-bottom: 0;
	}

	.sc-btn,
	.sc-btn-row {
		width: 100%;
	}

	.sc-btn-row--mixed {
		align-items: stretch;
	}

	.sc-textlink {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.setupco-service * {
		transition-duration: 0.01ms !important;
	}

	.sc-aud-card:hover,
	.sc-rel-card:hover {
		transform: none;
	}
}

/* .sc-svc-facts__inner's margin-left/right (meant to center it at max-width
   like .sc-svc-hero__wrap above it) get overridden back to 0 somewhere in the
   cascade — verified by screenshot, not tied to display/float. !important
   forces the intended centering so the key-facts strip lines up with the
   hero content above it instead of sitting flush against the left edge. */
.sc-svc-facts__inner {
	margin-left: auto !important;
	margin-right: auto !important;
}