/* ==========================================================================
   homepage.css — hero + homepage sections, plus the shared .pricing-card
   component (also used by WooCommerce loops on shop/search/related pages,
   which is why this file loads on every request, not just the front page).
   ========================================================================== */

/* -- Hero ------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 8vw, 5.5rem) clamp(4rem, 9vw, 6.5rem);
	background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
}

.hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 130%;
	background:
		radial-gradient(ellipse 55% 60% at 30% 10%, rgba(242, 96, 12, 0.20), transparent 60%),
		radial-gradient(ellipse 45% 50% at 85% 25%, rgba(232, 163, 61, 0.22), transparent 60%);
	filter: blur(10px);
	pointer-events: none;
	z-index: 0;
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid !important;
	gap: clamp(2.5rem, 6vw, 4rem);
	grid-template-columns: minmax(0, 1fr) !important;
	align-items: center;
}

.hero-copy {
	text-align: center;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}
.hero-copy > * { max-width: 100%; min-width: 0; }
.hero-eyebrow { max-width: 100%; font-size: 0.7rem; line-height: 1.6; }

.hero-copy h1 {
	font-size: clamp(1.9rem, 7.5vw, 3.6rem);
	margin-bottom: var(--space-md);
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: none;
	min-width: 0;
	max-width: 100%;
}
.hero-copy h1 .text-ember { overflow-wrap: break-word; word-wrap: break-word; }
/* Maximum-specificity, viewport-capped guarantee: even if another rule (a
   cache remnant, a plugin, WooCommerce) sets a larger font-size on the hero
   heading, this caps it at 8.5vw on phones so it can never be wider than the
   screen. The high-specificity selector + !important ensures it wins the
   cascade, and the min() ties the ceiling to viewport width. */
@media (max-width: 767px) {
	.hero .hero-grid .hero-copy h1.wp-block-heading,
	.hero .hero-grid .hero-copy h1 {
		font-size: min(8.5vw, 2.1rem) !important;
		overflow-wrap: break-word !important;
		word-break: break-word !important;
	}
}

.hero-subhead {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	max-width: 46ch;
	min-width: 0;
	margin-inline: auto;
	color: var(--text);
	overflow-wrap: break-word;
}

.hero-actions {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
	margin-block: var(--space-lg) var(--space-md);
}

.hero-trust {
	font-size: 0.9rem;
	color: var(--text-light);
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; }
	.hero-copy, .hero-eyebrow { text-align: left; }
	.hero-copy .hero-eyebrow { margin-inline: 0; }
	.hero-subhead { margin-inline: 0; }
	.hero-actions { justify-content: flex-start; }
}

/* -- Hero terminal (signature element) --------------------------------------- */
.hero-terminal-wrap { position: relative; z-index: 1; }

.hero-terminal {
	background: var(--ink);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}
@media (min-width: 768px) {
	.hero-terminal { margin-inline: 0; transform: rotate(-1deg); }
}

.terminal-bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.85rem 1.1rem;
	background: var(--ink-soft);
	border-bottom: 1px solid var(--ink-border);
}
.terminal-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot-red { background: #E8574A; }
.dot-yellow { background: #E8B23D; }
.dot-green { background: var(--signal); }
.terminal-title {
	margin-left: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--on-dark-muted);
}

.terminal-body { padding: 1.5rem 1.35rem 1.65rem; }

.terminal-prompt-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: rgba(245, 235, 223, 0.06);
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-sm);
	padding: 0.2rem 0.2rem 0.2rem 0.9rem;
	margin-bottom: 1rem;
}
.prompt-symbol { font-family: var(--font-mono); color: var(--signal); font-weight: 600; }

.domain-search-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--on-dark);
	font-family: var(--font-mono);
	font-size: 1rem;
	padding: 0.75rem 0;
	caret-color: var(--signal);
}
.domain-search-input::placeholder { color: var(--on-dark-muted); }
.domain-search-input:focus { outline: none; }

.domain-search-tld {
	flex-shrink: 0;
	background: rgba(245, 235, 223, 0.08);
	border: 1px solid var(--ink-border);
	color: var(--on-dark);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	padding: 0.6rem 0.7rem;
	border-radius: 8px;
	max-width: 10.5em;
	/* The native dropdown list is painted by the OS, not by the rules below.
	   Without color-scheme:dark it renders on a WHITE panel while the options
	   inherit the pale --on-dark text = unreadable white-on-white. This line
	   is the actual fix; the option rules below cover browsers that honour
	   author colours on the popup (Chromium/Firefox on Windows + Linux). */
	color-scheme: dark;
}
.domain-search-tld option,
.domain-search-tld optgroup {
	/* Must be an OPAQUE colour — a translucent rgba() would sit on the OS's
	   white popup and put us right back where we started. */
	background-color: var(--ink-soft);
	color: var(--on-dark);
}
.domain-search-tld optgroup {
	color: var(--ember);
	font-style: normal;
	font-weight: 600;
}
.domain-search-tld option { font-weight: 400; }
.domain-search-tld:focus { outline: 2px solid var(--ember); }

@media (max-width: 420px) {
	.domain-search-tld {
		max-width: 8.4em;
		font-size: 0.78rem;
		padding: 0.6rem 0.4rem;
	}
}

.terminal-results {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s ease;
	margin-bottom: 0.25rem;
}
.terminal-results.is-visible { grid-template-rows: 1fr; }
.terminal-results > * { overflow: hidden; }
.terminal-results::before { content: ""; display: block; height: 0; }

.terminal-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.15rem;
	font-family: var(--font-mono);
	font-size: 0.88rem;
	border-bottom: 1px dashed var(--ink-border);
	color: var(--on-dark);
}
.result-domain b { font-weight: 600; color: var(--on-dark-muted); }
.result-status { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.8rem; }
.result-status.is-available { color: var(--signal); }
.result-status.is-available .icon { width: 0.95em; height: 0.95em; }
.result-status.is-taken { color: var(--on-dark-muted); }
.result-status.is-checking { color: var(--gold); }
.result-status.is-checking::before {
	content: "";
	width: 0.7em; height: 0.7em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sadomainz-spin 0.7s linear infinite;
}
.result-status.is-error { color: #ff8a6a; font-style: italic; }
@keyframes sadomainz-spin { to { transform: rotate(360deg); } }
.terminal-example-note {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--on-dark-muted);
	margin: 0.6rem 0 0;
	opacity: 0.8;
}

.terminal-submit { margin-top: 0.35rem; }

/* -- Features ----------------------------------------------------------------- */
.features-grid {
	display: grid !important;
	gap: var(--space-md);
	grid-template-columns: 1fr !important;
}
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(4, 1fr) !important; } }

.feature-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-md);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--ember), var(--ember-dark));
	color: var(--white);
	margin-bottom: var(--space-md);
}
.feature-icon .icon { width: 1.5em; height: 1.5em; }
.feature-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.feature-card p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 0; }

/* -- How it works --------------------------------------------------------------- */
.steps-row {
	display: grid !important;
	gap: var(--space-lg);
	grid-template-columns: 1fr !important;
	align-items: start;
	margin-top: var(--space-xl);
}

.step-card { text-align: center; max-width: 320px; margin-inline: auto; }
.step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--ember);
	color: var(--ember-dark);
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: var(--space-sm);
}
.step-card h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.step-card p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 0; }

.step-connector {
	display: none !important;
	color: var(--ember);
	opacity: 0.55;
	align-self: center;
	justify-content: center;
}
.step-connector .icon { width: 1.6em; height: 1.6em; }

@media (min-width: 900px) {
	.steps-row { grid-template-columns: 1fr 40px 1fr 40px 1fr !important; gap: 0; }
	.step-card { max-width: none; }
	.step-connector { display: flex !important; }
}

/* -- Pricing / product cards (shared with WooCommerce loop) --------------------- */
.pricing-grid, .pricing-grid-placeholder, ul.products {
	display: grid !important;
	gap: var(--space-md) !important;
	grid-template-columns: 1fr !important;
	list-style: none !important;
	margin: var(--space-xl) 0 0 !important;
	padding: 0 !important;
	clear: none !important;
}
@media (min-width: 720px) {
	.pricing-grid, .pricing-grid-placeholder, ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
	.pricing-grid, .pricing-grid-placeholder, ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

/* WooCommerce adds ul.products::before / ::after as a float clearfix. Once the
   list becomes a grid, those pseudo-elements turn into grid ITEMS — ::before
   steals the very first cell and shifts every product one column across, which
   leaves an empty first cell and a ragged final row (3 products rendering as
   [empty][1][2] then [3] alone). Remove them so products fill from cell one. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

.pricing-card, ul.products li.pricing-card.product {
	position: relative;
	display: flex !important;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	text-align: left !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.pricing-card.is-featured, .pricing-card.featured {
	border-color: var(--ember);
	box-shadow: var(--shadow-md);
}
.pricing-card.is-featured::before, .pricing-card.featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--ember), var(--gold));
}

.pricing-badge, .pricing-card .onsale {
	position: absolute !important;
	top: 1rem;
	right: 1rem;
	left: auto !important;
	background: linear-gradient(135deg, var(--ember), var(--ember-dark));
	color: var(--white);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.4em 0.85em;
	border-radius: var(--radius-pill);
	z-index: 2;
	margin: 0 !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
}

.pricing-card-media-link { display: block; background: var(--paper-tint); }
.pricing-card-media-link img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.pricing-card-body {
	padding: var(--space-lg) var(--space-md) var(--space-md);
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem;
	flex: 1;
}

.pricing-card-title { font-size: 1.2rem; margin-bottom: 0; }
.pricing-card-title a { color: var(--heading); }

.pricing-card-price {
	font-family: var(--font-mono);
	font-size: 2rem;
	font-weight: 800;
	color: var(--ember-dark);
	line-height: 1.1;
}
/* The amount itself is prominent and in the theme's dark ember. Only the
   suffix span (e.g. "/month") stays small and muted. */
.pricing-card-price .woocommerce-Price-amount,
.pricing-card-price bdi {
	color: var(--ember-dark);
	font-weight: 800;
	font-size: inherit;
}
.pricing-card-price .woocommerce-Price-currencySymbol {
	font-family: var(--font-mono);
	font-size: 0.62em;
	font-weight: 700;
	color: var(--ember-dark);
	vertical-align: 0.12em;
	margin-right: 0.04em;
}
.pricing-card-price > span:not(.woocommerce-Price-amount):not(.amount) {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-light);
}
.pricing-card-price del { opacity: 0.5; font-size: 1.1rem; margin-right: 0.4rem; }
.pricing-card-price ins { text-decoration: none; }

.pricing-card-excerpt { color: var(--text-light); font-size: 0.92rem; flex: 1; }

/* Bulleted feature list — used when a card description has multiple lines
   or tick-separated items. */
.pricing-card-features {
	list-style: none;
	margin: 0.1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	font-size: 0.9rem;
	color: var(--text);
}
.pricing-card-features li {
	position: relative;
	padding-left: 1.7rem;
	line-height: 1.35;
}
.pricing-card-features li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.15rem;
	height: 1.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--ember), var(--ember-dark));
	border-radius: 50%;
	line-height: 1;
}

.pricing-card-action { margin-top: auto; padding-top: 0.5rem; }
.pricing-card-action a,
.pricing-card-action .button {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-weight: 600;
	padding: 0.9em 1.4em;
	border-radius: var(--radius-pill);
	border: 2px solid var(--ink-border);
	color: var(--heading);
	background: transparent;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}
.pricing-card-action a:hover,
.pricing-card-action .button:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.pricing-card.is-featured .pricing-card-action a,
.pricing-card.is-featured .pricing-card-action .button,
.pricing-card .pricing-card-action .button.add_to_cart_button,
.pricing-card .pricing-card-action .button.product_type_variable {
	background: linear-gradient(135deg, var(--ember), var(--ember-dark));
	border-color: transparent;
	color: var(--white);
}
.pricing-card .pricing-card-action .button.loading { opacity: 0.7; }
.pricing-card .pricing-card-action .added_to_cart {
	display: block;
	text-align: center;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--signal);
}

/* -- Stats ------------------------------------------------------------------- */
.stats-section { background: var(--ink); padding-block: var(--space-xl); }
.stats-grid {
	display: grid !important;
	gap: var(--space-lg) var(--space-md);
	grid-template-columns: repeat(2, 1fr) !important;
	text-align: center;
}
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(4, 1fr) !important; } }

.stat-value {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	color: var(--white);
	background: linear-gradient(135deg, var(--gold), var(--ember));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.stat-label {
	display: block;
	font-size: 0.85rem;
	color: var(--on-dark-muted);
	margin-top: 0.35rem;
}

/* -- Testimonials -------------------------------------------------------------- */
.testimonials-grid {
	display: grid !important;
	gap: var(--space-md);
	grid-template-columns: 1fr !important;
}
@media (min-width: 720px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr) !important; } }

.testimonial-card {
	background: var(--white);
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-md);
}
.testimonial-card .star-rating { margin-bottom: var(--space-sm); }
.testimonial-quote {
	font-style: italic;
	color: var(--heading);
	font-size: 1.02rem;
}
.testimonial-author { font-size: 0.85rem; color: var(--text-light); margin-bottom: 0; }

/* -- Final CTA ------------------------------------------------------------------ */
.final-cta-section {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ember-dark) 0%, var(--ember) 55%, var(--gold) 100%);
	padding-block: clamp(3.5rem, 8vw, 6rem);
	margin-top: var(--space-2xl);
}
.final-cta-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(255,255,255,0.18), transparent 60%);
}
.final-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 620px; margin-inline: auto; }
.final-cta-inner h2 { color: var(--white); font-size: clamp(1.8rem, 4vw, 2.5rem); }
.final-cta-inner p { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; margin-bottom: var(--space-lg); }

/* -- Scroll reveal -------------------------------------------------------------- */
.feature-card, .step-card, .pricing-card, .testimonial-card, .stat-item, .blog-card {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.feature-card.in-view, .step-card.in-view, .pricing-card.in-view,
.testimonial-card.in-view, .stat-item.in-view, .blog-card.in-view {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.feature-card, .step-card, .pricing-card, .testimonial-card, .stat-item, .blog-card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* .in-view sets transform:none at equal specificity to the :hover lift
   effects defined earlier in this file — restate the hover transforms here
   (same specificity, later in source) so hovering still lifts the card
   after it has scrolled into view, rather than the reveal state winning. */
.feature-card.in-view:hover { transform: translateY(-4px); }
.pricing-card.in-view:hover { transform: translateY(-6px); }

/* ==========================================================================
   WordPress inner-container compatibility.
   Some WP configurations render Group blocks with an extra
   <div class="wp-block-group__inner-container"> wrapper between the group
   and its children. When that happens the grid classes land on the outer
   element but the actual columns are nested one level deeper, so the grid
   sees a single child and everything stacks. These rules re-apply each
   grid to that inner wrapper whenever it is present, so the layout is
   identical with or without the wrapper. (Also mirrored in the inline
   critical CSS so it survives aggressive CSS-delivery optimizers.)
   ========================================================================== */
.hero-grid > .wp-block-group__inner-container{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:clamp(2.5rem,6vw,4rem) !important;align-items:center !important;}
/* Force the inner wrapper to fill its grid cell (see inline critical CSS note). */
.hero-grid > .wp-block-group__inner-container,
.features-grid > .wp-block-group__inner-container,
.steps-row > .wp-block-group__inner-container,
.pricing-grid > .wp-block-group__inner-container,
.pricing-grid-placeholder > .wp-block-group__inner-container,
.stats-grid > .wp-block-group__inner-container,
.testimonials-grid > .wp-block-group__inner-container{
	grid-column:1/-1 !important;justify-self:stretch !important;
	width:100% !important;max-width:none !important;
	margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important;
}
.features-grid > .wp-block-group__inner-container{display:grid !important;grid-template-columns:1fr !important;gap:var(--space-md) !important;}
.steps-row > .wp-block-group__inner-container{display:grid !important;grid-template-columns:1fr !important;gap:var(--space-lg) !important;}
.pricing-grid > .wp-block-group__inner-container,
.pricing-grid-placeholder > .wp-block-group__inner-container{display:grid !important;grid-template-columns:1fr !important;gap:var(--space-md) !important;}
.stats-grid > .wp-block-group__inner-container{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:var(--space-lg) var(--space-md) !important;}
.testimonials-grid > .wp-block-group__inner-container{display:grid !important;grid-template-columns:1fr !important;gap:var(--space-md) !important;}

@media (min-width:640px){
	.features-grid > .wp-block-group__inner-container{grid-template-columns:repeat(2,1fr) !important;}
}
@media (min-width:720px){
	.stats-grid > .wp-block-group__inner-container{grid-template-columns:repeat(4,1fr) !important;}
	.testimonials-grid > .wp-block-group__inner-container{grid-template-columns:repeat(3,1fr) !important;}
	.pricing-grid > .wp-block-group__inner-container,
	.pricing-grid-placeholder > .wp-block-group__inner-container{grid-template-columns:repeat(3,1fr) !important;}
}
@media (min-width:768px){
	.hero-grid > .wp-block-group__inner-container{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important;}
}
@media (min-width:900px){
	.steps-row > .wp-block-group__inner-container{grid-template-columns:1fr 40px 1fr 40px 1fr !important;gap:0 !important;}
}
@media (min-width:1024px){
	.features-grid > .wp-block-group__inner-container{grid-template-columns:repeat(4,1fr) !important;}
}

/* ==========================================================================
   Homepage guide (1.15.0) — the long-form "domains and hosting" copy at the
   foot of the homepage, laid out by inc/home-guide.php: the opening beside
   its picture, each question as a numbered card, the price table as a wide
   card and "Where do I start?" as a dark call-to-action card.
   ========================================================================== */
.home-guide {
	position: relative;
	overflow: hidden;
	background: var(--paper);
}
.home-guide::before {
	content: "";
	position: absolute;
	inset: 0 -10% auto -10%;
	height: 620px;
	background:
		radial-gradient(ellipse 42% 55% at 12% 0%, rgba(242, 96, 12, 0.13), transparent 65%),
		radial-gradient(ellipse 38% 48% at 92% 12%, rgba(232, 163, 61, 0.16), transparent 65%);
	filter: blur(6px);
	pointer-events: none;
}
.home-guide > .container { position: relative; z-index: 1; }

/* Opening: copy beside the picture. */
.home-guide-intro {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
@media (min-width: 960px) {
	.home-guide-intro.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}
.home-guide-copy { min-width: 0; }
.home-guide-copy h2 {
	font-size: clamp(1.8rem, 3.4vw, 2.75rem);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-md);
}
.home-guide-copy p:not(.eyebrow) {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--text);
	max-width: 60ch;
}
.home-guide-copy p:last-child { margin-bottom: 0; }

.home-guide-media { min-width: 0; }
.home-guide-media .wp-block-image,
.home-guide-media figure { margin: 0; }
.home-guide-media img {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow:
		0 0 0 1px rgba(242, 96, 12, 0.22),
		0 40px 80px -30px rgba(126, 39, 8, 0.55);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
}
@media (min-width: 960px) {
	.home-guide-media img { transform: rotate(1.2deg); }
	.home-guide-media img:hover {
		transform: rotate(0deg) translateY(-4px);
		box-shadow:
			0 0 0 1px rgba(242, 96, 12, 0.35),
			0 46px 90px -28px rgba(242, 96, 12, 0.5);
	}
}

/* Questions: cards, two to a row. */
.home-guide-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
	.home-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.guide-card {
	position: relative;
	min-width: 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: clamp(1.5rem, 3vw, 2.1rem);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.guide-card::after {
	/* An ember line that draws across the top on hover. */
	content: "";
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	top: -1px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--ember), var(--gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}
.guide-card:hover {
	transform: translateY(-4px);
	border-color: rgba(242, 96, 12, 0.28);
	box-shadow: var(--shadow-md), 0 18px 40px -22px rgba(242, 96, 12, 0.45);
}
.guide-card:hover::after { transform: scaleX(1); }
.guide-card--wide { grid-column: 1 / -1; }

.guide-card-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--ember);
	background: var(--paper-tint);
	color: var(--ember-dark);
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: var(--space-sm);
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.guide-card:hover .guide-card-num {
	background: linear-gradient(135deg, var(--ember), var(--ember-dark));
	color: var(--white);
	box-shadow: 0 8px 20px -6px rgba(242, 96, 12, 0.55);
}

.guide-card-body { min-width: 0; }
.guide-card h3 {
	font-size: clamp(1.12rem, 1.6vw, 1.3rem);
	margin-bottom: 0.65rem;
}
.guide-card p {
	color: var(--text);
	font-size: 0.98rem;
	line-height: 1.72;
}
.guide-card p:last-child { margin-bottom: 0; }
.guide-card p a {
	color: var(--ember-dark);
	font-weight: 600;
	border-bottom: 1px solid rgba(242, 96, 12, 0.35);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.guide-card p a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* The price table. */
.guide-card--table .wp-block-table {
	margin: 1.4rem 0 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--white);
}
.guide-card--table table {
	width: 100%;
	min-width: 520px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.97rem;
}
.guide-card--table .wp-block-table thead { border-bottom: 0; }
.guide-card--table .wp-block-table th,
.guide-card--table .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--border);
	padding: 1rem 1.25rem;
	text-align: center;
	white-space: nowrap;
}
.guide-card--table .wp-block-table th:first-child,
.guide-card--table .wp-block-table td:first-child { text-align: left; }
.guide-card--table .wp-block-table thead th {
	background: var(--ink);
	color: var(--gold);
	font-family: var(--font-mono);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 0;
}
.guide-card--table .wp-block-table tbody td { color: var(--text); transition: background 0.2s ease; }
.guide-card--table .wp-block-table tbody tr:nth-child(even) td { background: #FFFCF8; }
.guide-card--table .wp-block-table tbody tr:hover td { background: var(--paper-tint); }
.guide-card--table .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.guide-card--table .wp-block-table tbody td:first-child {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--heading);
}
.guide-card--table .wp-block-table tbody td:nth-child(2) {
	font-family: var(--font-mono);
	font-weight: 800;
	color: var(--ember-dark);
}

/* On a phone the table would scroll sideways and hide columns, so each plan
   stacks as its own small card: name and price on top, the other columns
   as labelled tiles (labels come from the header row, see
   sadomainz_guide_label_table()). */
@media (max-width: 639px) {
	.guide-card-num { width: 38px; height: 38px; font-size: 0.84rem; margin-bottom: 0.75rem; }

	.guide-card--table .wp-block-table.has-cell-labels {
		border: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
		margin-top: 1.1rem;
	}
	.guide-card--table .wp-block-table.has-cell-labels table { display: block; min-width: 0; }
	.guide-card--table .wp-block-table.has-cell-labels thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
	}
	.guide-card--table .wp-block-table.has-cell-labels tbody { display: grid; gap: 0.7rem; }
	.guide-card--table .wp-block-table.has-cell-labels tbody tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
		padding: 0.95rem;
		border: 1px solid var(--border);
		border-radius: var(--radius-md);
		background: var(--white);
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}
	.guide-card--table .wp-block-table.has-cell-labels tbody tr:hover {
		border-color: rgba(242, 96, 12, 0.35);
		box-shadow: 0 12px 26px -16px rgba(242, 96, 12, 0.45);
	}
	.guide-card--table .wp-block-table.has-cell-labels tbody tr:nth-child(n) td {
		display: block;
		padding: 0;
		border: 0;
		background: none;
		text-align: left;
		white-space: normal;
		min-width: 0;
	}
	.guide-card--table .wp-block-table.has-cell-labels tbody tr:nth-child(n) td:first-child {
		grid-column: 1 / 3;
		align-self: center;
		font-size: 1.05rem;
		padding-left: 0.15rem;
	}
	.guide-card--table .wp-block-table.has-cell-labels tbody tr:nth-child(n) td:nth-child(2) {
		grid-column: 3;
		align-self: center;
		text-align: right;
		font-size: 1.2rem;
		padding-right: 0.15rem;
	}
	.guide-card--table .wp-block-table.has-cell-labels tbody tr:nth-child(n) td:nth-child(n+3) {
		background: var(--paper-tint);
		border-radius: var(--radius-sm);
		padding: 0.5rem 0.4rem 0.55rem;
		text-align: center;
		font-family: var(--font-display);
		font-weight: 600;
		color: var(--heading);
	}
	.guide-card--table .wp-block-table.has-cell-labels td[data-label]:nth-child(n+3)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.1rem;
		font-family: var(--font-mono);
		font-size: 0.64rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ember-dark);
	}
}

/* The domain price table (a Table block with the class "domain-prices"):
   prices read "R109/yr" and the extensions column is a wrapping list. */
.guide-card--table .wp-block-table.domain-prices tbody td:nth-child(2)::after {
	content: "/yr";
	margin-left: 1px;
	font-size: 0.72em;
	font-weight: 600;
	color: var(--text-light);
}
.guide-card--table .wp-block-table.domain-prices th:last-child,
.guide-card--table .wp-block-table.domain-prices td:last-child {
	text-align: left;
	white-space: normal;
}
.guide-card--table .wp-block-table.domain-prices tbody td:last-child {
	font-family: var(--font-mono);
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--heading);
}
@media (max-width: 639px) {
	/* A row's only labelled tile (such as the extensions list) runs full width. */
	.guide-card--table .wp-block-table.has-cell-labels tbody tr:nth-child(n) td:nth-child(3):last-child { grid-column: 1 / -1; }
	/* Type left, price right on one line, the extensions list underneath. */
	.guide-card--table .wp-block-table.domain-prices.has-cell-labels tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
	.guide-card--table .wp-block-table.domain-prices.has-cell-labels tbody tr:nth-child(n) td:first-child { grid-column: 1; }
	.guide-card--table .wp-block-table.domain-prices.has-cell-labels tbody tr:nth-child(n) td:nth-child(2) { grid-column: 2; white-space: nowrap; }
	/* The header row is hidden on a phone, so say "from" beside the price. */
	.guide-card--table .wp-block-table.domain-prices.has-cell-labels tbody td:nth-child(2)::before {
		content: "from ";
		font-family: var(--font-body);
		font-size: 0.68em;
		font-weight: 600;
		color: var(--text-light);
	}
	.guide-card--table .wp-block-table.domain-prices.has-cell-labels tbody tr:nth-child(n) td:nth-child(3):last-child {
		text-align: left;
		padding: 0.6rem 0.8rem 0.7rem;
		font-family: var(--font-mono);
		font-size: 0.84rem;
		font-weight: 500;
		line-height: 1.6;
	}
}

/* "Where do I start?" — a dark call to action with the links as buttons. */
.guide-card--start {
	background:
		radial-gradient(ellipse 60% 120% at 100% 0%, rgba(242, 96, 12, 0.30), transparent 60%),
		radial-gradient(ellipse 45% 80% at 0% 100%, rgba(232, 163, 61, 0.18), transparent 60%),
		var(--ink);
	border-color: var(--ink-border);
	padding: clamp(1.75rem, 4vw, 3rem);
	color: var(--on-dark-muted);
}
.guide-card--start:hover {
	border-color: rgba(242, 96, 12, 0.45);
	box-shadow: var(--shadow-lg), 0 24px 60px -24px rgba(242, 96, 12, 0.55);
}
.guide-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--ember), var(--ember-dark));
	color: var(--white);
	margin-bottom: var(--space-md);
	box-shadow: 0 10px 26px -8px rgba(242, 96, 12, 0.6);
}
.guide-card-icon .icon { width: 1.5em; height: 1.5em; }
.guide-card--start h3 {
	color: var(--white);
	font-size: clamp(1.45rem, 2.6vw, 1.9rem);
	margin-bottom: 0;
}
.guide-card--start ul {
	list-style: none;
	margin: 1.6rem 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .guide-card--start ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guide-card--start ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-card--start li { margin: 0; min-width: 0; }
.guide-card--start li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	height: 100%;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-md);
	background: rgba(245, 235, 223, 0.06);
	border: 1px solid var(--ink-border);
	color: var(--on-dark);
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.3;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.guide-card--start li a::after {
	content: "\2192";
	flex-shrink: 0;
	color: var(--ember);
	font-size: 1.1rem;
	transition: transform 0.2s ease, color 0.2s ease;
}
.guide-card--start li:first-child a,
.guide-card--start li a:hover,
.guide-card--start li a:focus-visible {
	background: linear-gradient(135deg, var(--ember), var(--ember-dark));
	border-color: transparent;
	color: var(--white);
}
.guide-card--start li:first-child a::after,
.guide-card--start li a:hover::after,
.guide-card--start li a:focus-visible::after { color: var(--white); }
.guide-card--start li a:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(242, 96, 12, 0.65);
}
.guide-card--start li a:hover::after { transform: translateX(4px); }
.guide-card--start p {
	color: var(--on-dark-muted);
	font-size: 0.98rem;
}
.guide-card--start p a {
	color: var(--gold);
	border-bottom-color: rgba(232, 163, 61, 0.4);
}
.guide-card--start p a:hover { color: var(--white); border-bottom-color: var(--white); }

/* Scroll reveal, only once main.js has started it (html.js-reveal), so the
   guide is never hidden when scripts are delayed or switched off. */
.js-reveal .guide-card {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.js-reveal .guide-card.in-view { opacity: 1; transform: none; }
.js-reveal .guide-card.in-view:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
	.js-reveal .guide-card { opacity: 1; transform: none; transition: none; }
	.guide-card::after, .home-guide-media img { transition: none; }
}