.gp { color: #243049; background: #f4f7f8; }
.gp h1, .gp h2, .gp h3 { color: #052d37; letter-spacing: -0.02em; }
.gp-wrap { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }

.gp-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(1200px 480px at 80% -10%, rgba(114, 192, 44, 0.28), transparent 55%), #052d37;
	color: #f4f7f8;
	padding: 72px 0 64px;
}
.gp-hero h1, .gp-hero p { color: #f4f7f8; }
.gp-kicker {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(114, 192, 44, 0.16);
	color: #b6e986;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.gp-hero h1 { max-width: 16ch; margin: 0 0 16px; font-size: clamp(36px, 5vw, 58px); line-height: 1.05; font-weight: 700; }
.gp-hero h1 em { font-style: normal; color: #8ed45a; }
.gp-lead { max-width: 38rem; margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: #d5e2e6; }
.gp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
	background: #72c02c; color: #052d37; font-weight: 700; text-decoration: none;
	transition: transform .2s ease, background .2s ease;
}
.gp-btn:hover, .gp-btn:focus { background: #8ed45a; color: #052d37; text-decoration: none; transform: translateY(-1px); }
.gp-btn.secondary { background: transparent; color: #f4f7f8; border: 1px solid rgba(255,255,255,.35); }
.gp-btn.secondary:hover { background: rgba(255,255,255,.08); color: #fff; }
.gp-btn[disabled], .gp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.gp-rise { animation: gp-rise .7s ease both; }
.gp-d1 { animation-delay: .08s; }
.gp-d2 { animation-delay: .16s; }
.gp-d3 { animation-delay: .24s; }
@keyframes gp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.gp-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -28px; position: relative; z-index: 1; }
.gp-rank {
	background: #fff; border-radius: 16px; padding: 22px 18px;
	box-shadow: 0 12px 30px rgba(5, 45, 55, .08);
	text-align: center;
}
.gp-rank strong { display: block; font-size: 36px; line-height: 1; color: #052d37; }
.gp-rank span { display: block; margin-top: 6px; color: #5d6b76; font-size: 14px; }
.gp-fine { margin: 14px 0 0; color: #6b7780; font-size: 13px; line-height: 1.5; }

.gp-section { padding: 56px 0; }
.gp-section h2 { margin: 0 0 8px; font-size: 32px; }
.gp-section .gp-intro { margin: 0 0 28px; max-width: 40rem; color: #4d5b66; font-size: 17px; }

.gp-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gp-card {
	background: #fff; border-radius: 16px; padding: 22px;
	border: 1px solid #e4ecee;
	transition: transform .2s ease, box-shadow .2s ease;
}
.gp-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(5, 45, 55, .08); }
.gp-card i { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: #eef8e4; color: #3d8c12; margin-bottom: 12px; }
.gp-card h3 { margin: 0 0 8px; font-size: 18px; }
.gp-card p { margin: 0; color: #4d5b66; line-height: 1.5; }

.gp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.gp-steps:before {
	content: ""; position: absolute; left: 8%; right: 8%; top: 22px; height: 2px;
	background: linear-gradient(90deg, #72c02c, #052d37);
	transform-origin: left; animation: gp-draw 1s ease both;
}
@keyframes gp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gp-step { position: relative; background: #fff; border-radius: 16px; padding: 22px; border: 1px solid #e4ecee; }
.gp-step b {
	display: inline-flex; width: 36px; height: 36px; border-radius: 50%;
	align-items: center; justify-content: center; background: #052d37; color: #fff; margin-bottom: 12px;
}
.gp-step h3 { margin: 0 0 8px; font-size: 18px; }
.gp-step p { margin: 0; color: #4d5b66; }

.gp-offer {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center;
	background: #f4f7f8; border-radius: 16px; padding: 22px; margin: 8px 0 16px;
}
.gp-offer .amount { font-size: 64px; line-height: 1; font-weight: 700; color: #052d37; margin: 0; }
.gp-offer .amount span { font-size: 22px; color: #5d6b76; font-weight: 600; }
.gp-offer ul { margin: 16px 0 0; padding: 0; list-style: none; }
.gp-offer li { padding: 6px 0 6px 26px; position: relative; color: #243049; }
.gp-offer li:before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #72c02c; }

.gp-form { background: #fff; border-radius: 20px; padding: 28px; border: 1px solid #e4ecee; }
.gp-form h2 { margin-top: 0; }
#guest-post { scroll-margin-top: 110px; }
.gp-field { margin: 0 0 16px; }
.gp-field label { display: block; margin-bottom: 6px; font-weight: 700; color: #052d37; }
.gp-field input, .gp-field textarea {
	width: 100%; border: 1px solid #d5e0e4; border-radius: 12px; padding: 12px 14px;
	font: inherit; color: #243049; background: #fff;
}
.gp-field textarea { min-height: 180px; resize: vertical; }
.gp-field small { display: block; margin-top: 6px; color: #6b7780; }
.gp-editor { border: 1px solid #d5e0e4; border-radius: 12px; background: #fff; overflow: hidden; }
#gp-image, #gp-feature-file { display: none; }
.gp-feature {
	border: 1.5px dashed #9db4bc; border-radius: 16px; padding: 18px; background: #f8fbf8;
}
.gp-feature.is-ready { border-color: #72c02c; background: #f3faea; }
.gp-feature .gp-fine { margin: 0; }
.gp-feature-pick, .gp-feature-remove {
	margin-top: 12px; min-height: 40px; padding: 0 16px; border-radius: 999px;
	border: 1px solid #c5d4d8; background: #fff; color: #052d37; font: inherit; font-weight: 700; cursor: pointer;
}
.gp-feature-remove { display: none; margin-left: 8px; }
.gp-feature.is-ready .gp-feature-remove { display: inline-flex; align-items: center; }
.gp-feature-preview { display: none; max-width: min(100%, 640px); height: auto; margin: 14px auto 0; border-radius: 12px; }
.gp-feature.is-ready .gp-feature-preview { display: block; }
.gp-editor:focus-within { border-color: #72c02c; box-shadow: 0 0 0 3px rgba(114, 192, 44, .18); }
.gp-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid #e4ecee; background: #f7fafb; }
.gp-tools button {
	width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent;
	color: #052d37; font: inherit; font-weight: 700; cursor: pointer;
}
.gp-tools button:hover, .gp-tools button:focus { background: #e7f6d8; }
.gp-editor-body { min-height: 220px; max-height: 640px; overflow: auto; padding: 12px 14px; outline: none; line-height: 1.6; }
.gp-editor-body.is-empty:before { content: "Write the article here."; color: #8a97a1; }
.gp-editor-body img { display: block; max-width: 100%; height: auto; margin: 12px 0; border-radius: 8px; }
.gp-editor-body h2, .gp-editor-body h3 { margin: .8em 0 .35em; }
.gp-drop {
	border: 1.5px dashed #9db4bc; border-radius: 16px; padding: 22px; text-align: center; background: #f8fbf8;
	margin: 0 0 16px;
}
.gp-drop.is-ready { border-color: #72c02c; background: #f3faea; }
.gp-drop input { margin-top: 10px; }
.gp-alert { display: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #fff4f4; color: #8d1d1d; }
.gp-alert.show { display: block; }
.gp-done { display: none; text-align: center; padding: 28px 8px; }
.gp-done.show { display: block; }
.gp-done h2 { margin-bottom: 8px; }
.gp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 800px) {
	.gp-ranks, .gp-benefits, .gp-steps, .gp-offer { grid-template-columns: 1fr; }
	.gp-steps:before { display: none; }
	.gp-hero { padding: 48px 0 40px; }
	.gp-hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.gp-rise, .gp-steps:before, .gp-card { animation: none; transition: none; }
}