/* ==========================================================================
   Blogger Importer Extended – site styles
   ========================================================================== */

:root {
	--accent: oklch(0.72 0.17 50);
	--accent-hover: oklch(0.78 0.15 50);
	--accent-text: oklch(0.6 0.17 50);
	--blue: oklch(0.72 0.17 250);
	--green: oklch(0.78 0.15 150);

	--bg: #f5f5f3;
	--surface: #fbfbfa;
	--border: #e2e2df;
	--underline: #cfd0cc;
	--text: #121315;
	--text-body: #55585e;
	--text-muted: #6b6e74;

	--dark: #0e0f11;
	--dark-2: #16171a;
	--dark-3: #1b1c20;
	--dark-line: #24262a;
	--dark-border: #2a2c31;
	--dark-border-strong: #33363b;
	--light: #f2f2f0;
	--light-body: #e4e5e7;
	--light-muted: #ccc;
	--light-faint: #c5c7cb;

	--font: 'Geist', system-ui, sans-serif;
	--mono: 'Geist Mono', ui-monospace, monospace;
}

/* Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	color: var(--accent);
}
h1, h2, h3 {
	margin: 0;
	font-weight: 600;
}
h2 {
	font-size: clamp(30px, 3.6vw, 42px);
	letter-spacing: -0.03em;
	line-height: 1.1;
}
p {
	margin: 0;
}
img {
	max-width: 100%;
}
[id] {
	scroll-margin-top: 64px;
}

.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.container-narrow {
	max-width: 820px;
}

.eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
}
.btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.btn-lg {
	padding: 15px 22px;
}
.btn-block {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 16px;
}
.btn-arrow {
	font-family: var(--mono);
	font-weight: 400;
}
.btn-accent {
	background: var(--accent);
	color: var(--text);
	font-weight: 600;
}
.btn-accent:hover {
	background: var(--accent-hover);
	color: var(--text);
}
.btn-light {
	background: var(--light);
	color: var(--text);
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 14px;
}
.btn-light:hover {
	background: #fff;
	color: var(--text);
}
.btn-outline {
	border: 1px solid var(--dark-border-strong);
	color: var(--light);
}
.btn-outline:hover {
	border-color: var(--text-muted);
	color: #fff;
}

/* Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(14, 15, 17, 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--dark-line);
	color: var(--light);
}
.header-inner {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.brand-mark {
	display: flex;
	align-items: center;
	gap: 3px;
}
.brand-square,
.brand-circle {
	width: 10px;
	height: 10px;
}
.brand-square {
	border-radius: 2px;
	background: var(--accent);
}
.brand-circle {
	border-radius: 50%;
	background: var(--blue);
}
.brand-arrow {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--light-faint);
}
.site-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 14px;
	color: var(--light-muted);
}
.nav-link {
	white-space: nowrap;
}
.nav-link[aria-current="page"] {
	color: var(--light);
}

/* Hero
   ========================================================================== */

.hero {
	background: var(--dark);
	color: var(--light);
}
.hero-inner {
	padding-top: 88px;
	padding-bottom: 72px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: 56px;
	align-items: center;
}
.hero-copy {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.hero-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--light-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
}
.hero h1 {
	font-size: clamp(40px, 5.6vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.hero-lead {
	font-size: 19px;
	line-height: 1.5;
	color: var(--light-muted);
	max-width: 520px;
	text-wrap: pretty;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.hero-note {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--light-faint);
}
.hero-rule {
	border-top: 1px solid var(--dark-line);
}

/* Import illustration */
.import-visual {
	--app-size: clamp(64px, 18vw, 120px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 24px 0;
}
.import-flow {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(10px, 3vw, 20px);
	width: 100%;
	max-width: 520px;
}
.import-app {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.import-app-icon {
	width: var(--app-size);
	height: var(--app-size);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(30px, 8.4vw, 56px);
	font-weight: 700;
	color: var(--text);
}
.import-app-blogger {
	border-radius: clamp(16px, 5vw, 28px);
	background: var(--accent);
	box-shadow: 0 20px 50px -16px oklch(0.72 0.17 50 / 0.6);
}
.import-app-wordpress {
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 20px 50px -16px oklch(0.72 0.17 250 / 0.6);
}
.import-app-name {
	font-size: 15px;
	font-weight: 500;
	color: var(--light-body);
}
.import-middle {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: calc(var(--app-size) / 2 - 6px);
	min-width: 0;
}
.import-track {
	position: relative;
	height: 12px;
}
.import-track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 5px;
	border-top: 2px dashed var(--dark-border-strong);
}
.import-dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: var(--light);
	opacity: 0;
}
.import-status {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--dark-2);
	border: 1px solid var(--dark-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: var(--mono);
}
.import-status-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
}
.import-status-label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--accent);
}
.import-status-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.import-status-label.is-done {
	color: var(--green);
}
.import-status-pct {
	color: var(--light-faint);
}
.import-counts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 12px;
}
.import-count {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.import-count-num {
	font-size: 15px;
	color: var(--light);
}
.import-count-label {
	font-size: 10px;
	color: var(--light-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.import-caption {
	font-size: 15px;
	color: var(--light-faint);
	text-align: center;
}

/* Sections
   ========================================================================== */

.section {
	border-bottom: 1px solid var(--border);
}
.section-inner {
	padding-top: 96px;
	padding-bottom: 96px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.section-compact {
	padding-top: 60px;
	padding-bottom: 60px;
}
.section-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* How it works */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}
.step {
	background: var(--surface);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.step-num {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--accent-text);
}
.step h3 {
	font-size: 20px;
	letter-spacing: -0.01em;
}
.step p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-body);
}

/* Pricing */
.pricing-inner {
	padding-top: 96px;
	padding-bottom: 96px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 48px 80px;
	align-items: center;
}
.pricing-copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 460px;
}
.pricing-copy p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}
.free-link {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: 15px;
	color: var(--text);
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.free-link-arrow {
	font-family: var(--mono);
	color: var(--text-muted);
}
.free-link-cta {
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}
.price-card {
	background: var(--dark);
	color: var(--light);
	border-radius: 16px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	max-width: 480px;
	justify-self: center;
}
.plan-toggle {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	min-width: 0;
	margin: 0;
	background: var(--dark-3);
	border: 1px solid var(--dark-border);
	border-radius: 10px;
	padding: 4px;
}
/* Radios stay focusable and submit with the form; their labels are the visible buttons. */
.plan-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.plan-option {
	cursor: pointer;
	text-align: center;
	padding: 10px 12px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	color: var(--light-muted);
}
.plan-radio:focus-visible + .plan-option {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.plan-radio:checked + .plan-option {
	background: var(--light);
	color: var(--text);
}
.plan-badge {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 6px;
	border-radius: 4px;
	background: var(--accent);
	color: var(--text);
}
.price-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.price-line {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.price-amount {
	font-size: 60px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}
.price-period {
	font-size: 15px;
	color: var(--light-faint);
}
.price-note {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--light-faint);
}
.price-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
	color: var(--light-body);
}
.price-features li {
	display: flex;
	gap: 12px;
}
.check {
	font-family: var(--mono);
	color: var(--accent);
}
.price-terms {
	font-size: 13px;
	color: var(--light-faint);
	text-align: center;
	margin-top: -12px;
}

/* Reviews */
.reviews-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 16px;
}
.reviews-all {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--text-body);
}
.reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}
.review {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.review-tag {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--accent-text);
}
.review blockquote {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}
.review figcaption {
	margin-top: auto;
	font-size: 14px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 12px;
}
.review figcaption img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: none;
	background: var(--border);
	object-fit: cover;
}
.review figcaption a {
	color: var(--text-muted);
	text-decoration: underline;
	text-decoration-color: var(--underline);
	text-underline-offset: 3px;
}
.review figcaption a:hover {
	color: var(--text);
}

/* FAQ */
.faq-inner {
	gap: 32px;
}
.faq {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
}
.faq details {
	border-bottom: 1px solid var(--border);
}
.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	font-size: 17px;
	font-weight: 500;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq-icon {
	font-family: var(--mono);
	color: var(--text-muted);
	flex: none;
	transition: transform 0.2s ease;
}
.faq details[open] .faq-icon {
	transform: rotate(45deg);
}
.faq details p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-body);
	max-width: 680px;
}

/* Recommended by */
.recommended-inner {
	gap: 32px;
	align-items: center;
}
.recommended-title {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.recommended-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px 64px;
}
.recommended-logos img {
	display: block;
	max-width: 100%;
	height: auto;
	filter: grayscale(1);
	opacity: 0.7;
}

/* Footer
   ========================================================================== */

.site-footer {
	background: var(--dark);
	color: var(--light);
}
.footer-cta {
	padding-top: 96px;
	padding-bottom: 96px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
}
.footer-cta h2 {
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.05;
	max-width: 600px;
}
.footer-cta .btn-lg {
	padding: 16px 24px;
}
.footer-bottom {
	border-top: 1px solid var(--dark-line);
}
.footer-bottom .container {
	padding-top: 24px;
	padding-bottom: 24px;
	font-size: 13px;
	color: var(--light-faint);
}
.footer-bottom a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.footer-bottom a:hover {
	color: var(--light);
}

/* Plain pages (success, errors)
   ========================================================================== */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.page-plain {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.plain-main {
	flex: 1;
	width: 100%;
	padding-top: 72px;
	padding-bottom: 96px;
}
.plain-card {
	max-width: 680px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.plain-card h1 {
	font-size: clamp(30px, 4vw, 40px);
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.plain-card h2 {
	margin-top: 16px;
	font-size: 20px;
	letter-spacing: -0.01em;
}
.plain-card p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-body);
}
.plain-card .plain-note {
	font-size: 14px;
	color: var(--text-muted);
}
/* Long-form text (privacy policy) */
.legal {
	gap: 16px;
}
.legal h2 {
	margin-top: 24px;
}
.legal h3 {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 600;
}
.legal ul,
.legal ol {
	margin: 0;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-body);
}
.legal strong {
	color: var(--text);
	font-weight: 600;
}
.legal code {
	font-family: var(--mono);
	font-size: 14px;
	overflow-wrap: anywhere;
}
/* Step-by-step guide with screenshots */
.guide-cta {
	align-self: flex-start;
	margin-top: 4px;
}
.guide .guide-steps {
	gap: 28px;
}
.guide-steps li > * + * {
	margin-top: 14px;
}
.guide-steps li::marker {
	color: var(--text);
	font-weight: 600;
}
.guide-shot {
	display: block;
	width: auto;
	height: auto;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #fff;
}
/* Unfinished wording; there must be none left at launch */
.todo {
	padding: 1px 4px;
	border-radius: 3px;
	background: oklch(0.92 0.12 95);
	color: var(--text);
}
.text-link {
	color: var(--text);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.license-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--dark);
	color: var(--light);
	border-radius: 12px;
	padding: 24px 28px;
}
.license-key {
	font-family: var(--mono);
	font-size: clamp(20px, 4.5vw, 30px);
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
	user-select: all;
}
.license-copy {
	flex: none;
}
.license-meta strong {
	color: var(--text);
}
.resend-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.field-label {
	font-size: 14px;
	font-weight: 500;
}
.field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.text-input {
	flex: 1 1 260px;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid var(--underline);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font-family: inherit;
	font-size: 16px;
}
.text-input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.text-input[aria-invalid="true"] {
	border-color: var(--accent-text);
}
.plain-card .field-error {
	font-size: 14px;
	font-weight: 500;
	color: var(--accent-text);
}
/* Honeypot: hidden from people (and screen readers); bots fill it in. */
.hp-field {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.next-steps {
	margin: 0;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-body);
}

/* Responsive
   ========================================================================== */

@media (max-width: 880px) {
	.nav-link {
		display: none;
	}
}
@media (max-width: 480px) {
	.container {
		padding: 0 16px;
	}
	.brand {
		font-size: 14px;
	}
	.hero-inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.price-card {
		padding: 20px;
	}
	.plan-option {
		padding: 10px 6px;
		gap: 6px;
	}
	.plan-badge {
		padding: 3px 4px;
		letter-spacing: 0.02em;
	}
	.section-inner,
	.pricing-inner,
	.footer-cta {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.section-compact {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.plain-main {
		padding-top: 48px;
		padding-bottom: 64px;
	}
	.license-box {
		padding: 20px;
	}
	.btn-lg {
		white-space: normal;
	}
}