/* Dynamite SEO Rollout bridge pages — front-end only. Scoped so it does not leak into the theme. */
.di-seo-rollout-guide,
.di-seo-rollout-guide *{
	box-sizing:border-box;
}

.di-seo-rollout-guide{
	--di-rollout-bg:#ffffff;
	--di-rollout-panel:#f8fafc;
	--di-rollout-panel-strong:#eef2f7;
	--di-rollout-border:#cbd5e1;
	--di-rollout-border-soft:#e2e8f0;
	--di-rollout-text:#0f172a;
	--di-rollout-muted:#475569;
	--di-rollout-faint:#64748b;
	--di-rollout-link:#0f766e;
	--di-rollout-link-hover:#115e59;
	--di-rollout-accent:#f97316;
	--di-rollout-shadow:0 16px 40px rgba(15,23,42,.12);
	width:min(100%,920px);
	max-width:920px;
	margin:0 auto;
	padding:clamp(20px,4vw,44px) clamp(16px,3vw,28px) clamp(32px,5vw,56px);
	line-height:1.68;
	color:#f8fafc;
}

.di-seo-rollout-guide > p:not(.di-seo-rollout-eyebrow),
.di-seo-rollout-guide > h2:not(.di-seo-rollout-title){
	max-width:780px;
}

.di-seo-rollout-guide > p:not(.di-seo-rollout-eyebrow){
	font-size:clamp(1rem,1.7vw,1.12rem);
	color:inherit;
}

.di-seo-rollout-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:0 0 10px;
	padding:7px 11px;
	border:1px solid rgba(248,250,252,.18);
	border-radius:999px;
	background:rgba(255,255,255,.08);
	color:#e2e8f0;
	font-size:.76rem;
	font-weight:800;
	letter-spacing:.11em;
	line-height:1;
	text-transform:uppercase;
}

.di-seo-rollout-title{
	margin:0 0 clamp(16px,2vw,22px) !important;
	max-width:820px;
	color:#ffffff !important;
	font-size:clamp(2rem,5vw,4rem) !important;
	line-height:.98 !important;
	letter-spacing:-.055em;
	font-weight:900;
}

.di-seo-rollout-guide > h2:not(.di-seo-rollout-title){
	margin:clamp(28px,4vw,42px) 0 8px;
	padding-top:clamp(18px,3vw,28px);
	border-top:1px solid rgba(226,232,240,.18);
	color:#ffffff;
	font-size:clamp(1.28rem,2.4vw,1.75rem);
	line-height:1.2;
	letter-spacing:-.025em;
	font-weight:850;
}

.di-seo-rollout-answer,
.di-seo-rollout-disclosure,
.di-seo-rollout-related{
	border:1px solid var(--di-rollout-border);
	border-radius:22px;
	background:var(--di-rollout-panel);
	color:var(--di-rollout-text) !important;
	box-shadow:var(--di-rollout-shadow);
}

.di-seo-rollout-answer{
	position:relative;
	margin:clamp(18px,3vw,28px) 0 clamp(20px,3vw,32px);
	padding:clamp(18px,3vw,24px) clamp(18px,3vw,28px) clamp(18px,3vw,24px) clamp(22px,3vw,32px);
	font-size:clamp(1.02rem,1.8vw,1.18rem);
	font-weight:600;
}

.di-seo-rollout-answer::before{
	content:"";
	position:absolute;
	left:0;
	top:18px;
	bottom:18px;
	width:4px;
	border-radius:999px;
	background:var(--di-rollout-accent);
}

.di-seo-rollout-answer strong,
.di-seo-rollout-disclosure strong{
	color:var(--di-rollout-text) !important;
	font-weight:850;
}

.di-seo-rollout-related{
	margin:clamp(28px,4vw,44px) 0;
	padding:clamp(18px,3vw,28px);
}

.di-seo-rollout-related h2{
	margin:0 0 8px !important;
	padding:0 !important;
	border:0 !important;
	color:var(--di-rollout-text) !important;
	font-size:clamp(1.25rem,2vw,1.55rem) !important;
	line-height:1.2;
	letter-spacing:-.025em;
}

.di-seo-rollout-related p{
	margin:0 0 18px;
	max-width:720px;
	color:var(--di-rollout-muted) !important;
	font-size:1rem;
}

.di-seo-rollout-card-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:14px;
}

.di-seo-rollout-card,
.entry-content .di-seo-rollout-card,
.di-seo-rollout-guide a.di-seo-rollout-card{
	display:flex;
	min-height:122px;
	flex-direction:column;
	justify-content:space-between;
	gap:14px;
	padding:16px;
	border:1px solid var(--di-rollout-border-soft);
	border-radius:18px;
	background:var(--di-rollout-bg);
	color:var(--di-rollout-text) !important;
	text-decoration:none !important;
	box-shadow:0 8px 22px rgba(15,23,42,.06);
	transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.di-seo-rollout-card::before{
	content:"";
	display:block;
	width:64px;
	height:2px;
	border-radius:999px;
	background:var(--di-rollout-accent);
}

.di-seo-rollout-card:hover,
.di-seo-rollout-card:focus-visible{
	transform:translateY(-2px);
	border-color:#94a3b8;
	box-shadow:0 16px 30px rgba(15,23,42,.12);
	outline:none;
}

.di-seo-rollout-card strong,
.entry-content .di-seo-rollout-card strong{
	display:block;
	color:var(--di-rollout-text) !important;
	font-size:1rem;
	line-height:1.25;
	font-weight:850;
	text-decoration:none !important;
}

.di-seo-rollout-card span,
.entry-content .di-seo-rollout-card span{
	display:block;
	margin-top:8px;
	color:var(--di-rollout-muted) !important;
	font-size:.93rem;
	line-height:1.45;
	text-decoration:none !important;
}

.di-seo-rollout-disclosure{
	margin:clamp(28px,4vw,44px) 0 0;
	padding:clamp(16px,3vw,22px) clamp(18px,3vw,28px);
	background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
	color:var(--di-rollout-muted) !important;
	font-size:.98rem;
}

.di-seo-rollout-guide a:not(.di-seo-rollout-card){
	color:var(--di-rollout-link);
	text-decoration-thickness:1px;
	text-underline-offset:3px;
}

.di-seo-rollout-guide a:not(.di-seo-rollout-card):hover{
	color:var(--di-rollout-link-hover);
}

@media (prefers-color-scheme:light){
	.di-seo-rollout-guide{
		color:#111827;
	}
	.di-seo-rollout-eyebrow{
		border-color:#dbe3ef;
		background:#f8fafc;
		color:#475569;
	}
	.di-seo-rollout-title,
	.di-seo-rollout-guide > h2:not(.di-seo-rollout-title){
		color:#0f172a !important;
	}
	.di-seo-rollout-guide > h2:not(.di-seo-rollout-title){
		border-top-color:#e2e8f0;
	}
}

@media (max-width:820px){
	.di-seo-rollout-card-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:560px){
	.di-seo-rollout-guide{
		padding-left:14px;
		padding-right:14px;
	}
	.di-seo-rollout-title{
		font-size:clamp(2rem,11vw,3.1rem) !important;
	}
	.di-seo-rollout-answer,
	.di-seo-rollout-related,
	.di-seo-rollout-disclosure{
		border-radius:18px;
	}
	.di-seo-rollout-card-grid{
		grid-template-columns:1fr;
	}
	.di-seo-rollout-card{
		min-height:auto;
	}
}

@media (prefers-reduced-motion:reduce){
	.di-seo-rollout-card{
		transition:none;
	}
	.di-seo-rollout-card:hover,
	.di-seo-rollout-card:focus-visible{
		transform:none;
	}
}