@import url("./home-front.css");

.wpak-plugin-page {
	background: #111111;
}

.wpak-plugin-page__hero {
	position: relative;
	overflow: hidden;
	padding: clamp(72px, 9vw, 118px) 0;
	background:
		linear-gradient(180deg, rgba(17, 17, 17, 0.72), rgba(17, 17, 17, 0.96)),
		url("../../img/wpak-site/ChatGPT-Image-Mar-11-2026-10_04_36-PM.webp") center/cover no-repeat,
		#111111;
	color: #ffffff;
}

.wpak-plugin-page__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.72fr);
	gap: clamp(34px, 7vw, 84px);
	align-items: center;
}

.wpak-plugin-page__copy h1 {
	max-width: 13ch;
	margin: 0;
	color: #ffffff;
	font-family: var(--wpak-site-heading);
	font-size: clamp(3rem, 6.6vw, 5.35rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: 0;
}

.wpak-plugin-page__lead {
	max-width: 46rem;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1.08rem, 2vw, 1.32rem);
	font-weight: 700;
	line-height: 1.65;
}

.wpak-plugin-page__hint {
	display: inline-flex;
	max-width: 52rem;
	margin: 22px 0 0;
	padding: 12px 14px;
	border: 1px solid rgba(233, 69, 96, 0.4);
	border-radius: 8px;
	background: rgba(233, 69, 96, 0.12);
	color: #ffffff;
	font-family: var(--wpak-site-mono);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.55;
}

.wpak-plugin-page__hero-card {
	display: grid;
	gap: 18px;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.wpak-plugin-page__logo {
	width: 108px;
	height: 108px;
	object-fit: contain;
	border-radius: 8px;
	background: transparent;
}

.wpak-plugin-page__product {
	width: 100%;
	max-height: 460px;
	object-fit: contain;
	border-radius: 6px;
	background: transparent;
}

.wpak-plugin-page__band {
	padding: clamp(70px, 9vw, 116px) 0;
}

.wpak-plugin-page__band--light,
.wpak-plugin-page__band--workflow,
.wpak-plugin-page__band--faq {
	background: #f5f5f5;
	color: var(--wpak-site-text);
}

.wpak-plugin-page__feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.wpak-plugin-page__feature-grid article,
.wpak-plugin-page__steps article,
.wpak-plugin-page__workflow-group,
.wpak-plugin-page__faq-groups section {
	border: 1px solid var(--wpak-site-rule);
	border-radius: 8px;
	background: #ffffff;
}

.wpak-plugin-page__feature-grid article {
	padding: 28px 24px;
}

.wpak-plugin-page__feature-grid h3,
.wpak-plugin-page__steps h3,
.wpak-plugin-page__steps h4,
.wpak-plugin-page__workflow-group h3,
.wpak-plugin-page__faq-groups h3 {
	margin: 0;
	color: var(--wpak-site-text);
	font-family: var(--wpak-site-heading);
	line-height: 1.1;
}

.wpak-plugin-page__feature-grid p,
.wpak-plugin-page__steps p,
.wpak-plugin-page__faq p {
	color: var(--wpak-site-muted);
	line-height: 1.7;
}

.wpak-plugin-page__band--compare {
	background:
		linear-gradient(180deg, rgba(17, 17, 17, 0.78), rgba(17, 17, 17, 0.94)),
		url("../../img/wpak-site/ChatGPT-Image-Apr-21-2026-11_08_34-AM.webp") center/cover no-repeat,
		#111111;
	color: #ffffff;
}

.wpak-plugin-page__band--workflow .wpak-site-section-head {
	margin-bottom: 36px;
}

.wpak-plugin-page__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.wpak-plugin-page__steps article {
	padding: 26px 22px;
}

.wpak-plugin-page__steps b {
	display: inline-grid;
	width: 38px;
	height: 38px;
	margin-bottom: 18px;
	place-items: center;
	border-radius: 8px;
	background: var(--wpak-site-red);
	color: #ffffff;
	font-family: var(--wpak-site-mono);
}

.wpak-plugin-page__workflow-groups {
	display: grid;
	gap: 24px;
}

.wpak-plugin-page__workflow-group {
	padding: 28px;
}

.wpak-plugin-page__workflow-group > span {
	display: block;
	margin-bottom: 8px;
	color: var(--wpak-site-red);
	font-family: var(--wpak-site-mono);
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.wpak-plugin-page__workflow-group .wpak-plugin-page__steps {
	margin-top: 22px;
}

.wpak-plugin-page__band--screens {
	background: #ffffff;
	color: var(--wpak-site-text);
}

.wpak-plugin-page__screens-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 24px;
	align-items: end;
	margin-bottom: 34px;
}

.wpak-plugin-page__screens-head h2 {
	margin: 0;
	color: var(--wpak-site-text);
	font-family: var(--wpak-site-heading);
}

.wpak-plugin-page__screens-head img {
	width: 180px;
	height: 136px;
	object-fit: cover;
	border-radius: 8px;
}

.wpak-plugin-page__screens {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.wpak-plugin-page__screens figure {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wpak-site-rule);
	border-radius: 8px;
	background: #f7f7f7;
}

.wpak-plugin-page__screens img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
	transition: transform 0.2s ease;
}

.wpak-plugin-page__screens figure:hover img {
	transform: scale(1.025);
}

.wpak-plugin-page__faq-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.wpak-plugin-page__faq-groups section {
	padding: 26px;
}

.wpak-plugin-page__faq {
	border-top: 1px solid var(--wpak-site-rule);
}

.wpak-plugin-page__faq summary {
	cursor: pointer;
	padding: 18px 0;
	color: var(--wpak-site-text);
	font-weight: 800;
	line-height: 1.45;
}

.wpak-plugin-page__faq summary::marker {
	color: var(--wpak-site-red);
}

.wpak-plugin-page__faq p {
	margin: 0 0 18px;
}

@media (max-width: 980px) {
	.wpak-plugin-page__hero-grid,
	.wpak-plugin-page__feature-grid,
	.wpak-plugin-page__steps,
	.wpak-plugin-page__faq-groups {
		grid-template-columns: 1fr;
	}

	.wpak-plugin-page__copy h1 {
		max-width: 100%;
	}
}

@media (max-width: 680px) {
	.wpak-plugin-page__screens-head {
		grid-template-columns: 1fr;
	}

	.wpak-plugin-page__screens-head img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.wpak-plugin-page__screens {
		grid-template-columns: 1fr;
	}
}