/**
 * Scopemap — Front-end stylesheet
 *
 * Section decorations, animations, waitlist form, and blog-post prose polish.
 * Design tokens (colors, fonts, spacing) come from theme.json — this file
 * only adds the visual layer core blocks can't express on their own.
 *
 * Structure:
 *   1. Reset & base
 *   2. Utilities (eyebrow, gradient text, brand line, reveal)
 *   3. Header nav + footer
 *   4. Hero (.sm-hero)
 *   5. Cards (.sm-card, .sm-feature-card)
 *   6. Numbered steps (.sm-steps, .sm-step)
 *   7. Waitlist form (.sm-waitlist)
 *   8. Blog list + single-post prose
 *   9. Keyframes
 */

/* ────────────────────────────────────────────────────────────────
 * 1. Reset & base
 * ────────────────────────────────────────────────────────────── */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Full-width sections handle their own gutters — neutralize root padding
 * for any alignfull group / cover, regardless of nesting depth. Sections
 * are inside <main class="alignfull"> now, so a direct-children-only
 * selector wouldn't reach them. */
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
	--wp--style--root--padding-left: 0;
	--wp--style--root--padding-right: 0;
}

/* Inline images inside prose shouldn't blow past their container. */
img {
	max-width: 100%;
	height: auto;
}

/* Honor the HTML `hidden` attribute even when other CSS sets a display
 * value (e.g. `.sm-waitlist__form { display: flex }`). Without this,
 * JS calls like `el.hidden = true` don't hide flex/grid elements. */
[hidden] {
	display: none !important;
}

/* ────────────────────────────────────────────────────────────────
 * 2. Utilities
 * ────────────────────────────────────────────────────────────── */

/* Section eyebrow — small uppercase label above section headings.
 *
 * Only set block-axis margins (top/bottom). Leaving margin-inline unset
 * lets WordPress's constrained-layout keep its `margin-left/right: auto`
 * on the paragraph, so the eyebrow tracks the same left edge as the h2
 * heading beside it. Setting `margin: 0 0 1rem` (with any left/right)
 * escapes the constraint and drops the eyebrow to the section's padding
 * boundary — don't do that.
 */
.sm-eyebrow {
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-block-start: 0 !important;
	margin-block-end: 1rem !important;
}

.sm-eyebrow--indigo { color: var(--wp--preset--color--indigo-core) !important; }
.sm-eyebrow--teal   { color: var(--wp--preset--color--teal-accent) !important; }

/* Brand-gradient text — clips the gradient to whatever text is inside. */
.sm-gradient-text,
.sm-gradient-text * {
	background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 30%, #2DD4BF 70%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* 5px brand-gradient divider between sections. Zero out the block-gap
 * WordPress adds after it so the next section sits flush against the
 * line — no strip of body/navy showing through. */
.sm-brand-line {
	height: 5px;
	margin: 0 !important;
	background: linear-gradient(to right, #6366F1 0%, #8B5CF6 30%, #2DD4BF 70%);
}
.sm-brand-line + * {
	margin-top: 0 !important;
}

/* Scroll-reveal — JS toggles .is-visible when the element enters the viewport. */
.sm-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.sm-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger — parent adds .sm-reveal-stagger; each direct child animates in. */
.sm-reveal-stagger > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.sm-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.30s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.42s; opacity: 1; transform: translateY(0); }
.sm-reveal-stagger.is-visible > *:nth-child(n+9) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.sm-reveal, .sm-reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ────────────────────────────────────────────────────────────────
 * 3. Header nav + footer
 * ────────────────────────────────────────────────────────────── */

.sm-header {
	position: relative;
	z-index: 20;
}

.sm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem clamp(1rem, 4vw, 2rem);
}

.sm-header__logo {
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	text-decoration: none;
	line-height: 1;
}

.sm-header__logo:hover { color: #fff; }

/* ── WordPress Navigation block styling ──
 * The header uses <!-- wp:navigation --> now (managed under Site
 * Editor → Navigation). These rules target the block's rendered
 * markup so it visually matches the previous handcoded links. Any
 * nav item tagged with className "sm-cta" (see auto-provisioned
 * "Join the Waitlist" link) gets the outlined-button treatment. */
.sm-header__nav.wp-block-navigation {
	gap: 1.25rem;
}
.sm-header__nav .wp-block-navigation__container {
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-header__nav .wp-block-navigation-item {
	display: inline-flex;
	align-items: center;
}
.sm-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--cool-gray-300);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color 0.15s ease;
}
.sm-header__nav .wp-block-navigation-item__content:hover {
	color: #fff;
}

/* CTA-style nav item — className "sm-cta" on any nav-link renders it
 * as an outlined pill button (the "Join the Waitlist" treatment). */
.sm-header__nav .sm-cta .wp-block-navigation-item__content {
	padding: 0.55rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.5rem;
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.sm-header__nav .sm-cta .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.24);
	color: #fff;
}

@media (max-width: 640px) {
	.sm-header__nav .sm-cta { display: none; }
}

/* Footer */
.sm-footer {
	position: relative;
	background: var(--wp--preset--color--navy);
}
.sm-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem clamp(1rem, 4vw, 2rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}
@media (min-width: 640px) {
	.sm-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}
.sm-footer__brand p {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--cool-gray-500);
}
.sm-footer__copyright {
	margin: 0.25rem 0 0 !important;
	font-size: 0.875rem !important;
	color: var(--wp--preset--color--cool-gray-500) !important;
}
/* Footer navigation — WordPress core Navigation block styled to match
 * the previous hand-coded links. Manage under Site Editor → Navigation
 * → Scopemap Footer Nav. */
.sm-footer__nav.wp-block-navigation {
	gap: 1.5rem;
}
.sm-footer__nav .wp-block-navigation__container {
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-footer__nav .wp-block-navigation-item {
	display: inline-flex;
	align-items: center;
}
.sm-footer__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--cool-gray-500);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.15s ease;
}
.sm-footer__nav .wp-block-navigation-item__content:hover {
	color: #fff;
}
/* Social icons — core wp:social-links block, styled to match the
 * previous hand-rolled row. Uses the "logos-only" style variant so
 * each icon renders as a bare SVG on the parent's background. */
.sm-footer__social.wp-block-social-links {
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sm-footer__social .wp-block-social-link {
	background: transparent !important;
	color: var(--wp--preset--color--cool-gray-500);
	transition: color 0.15s ease;
	padding: 0;
	width: 24px;
	height: 24px;
}
.sm-footer__social .wp-block-social-link:hover {
	color: #fff;
	transform: none;
}
.sm-footer__social .wp-block-social-link a {
	color: inherit;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sm-footer__social .wp-block-social-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ────────────────────────────────────────────────────────────────
 * 4. Hero
 * ────────────────────────────────────────────────────────────── */

.sm-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	min-height: 100vh;
	display: flex;
	align-items: center;
}

/* Subtle dot grid overlay */
.sm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.4) 1px, transparent 0);
	background-size: 32px 32px;
	opacity: 0.03;
	pointer-events: none;
}

/* Ambient radial glow, pulsing */
.sm-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(800px, 90vw);
	height: min(600px, 80vh);
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.06) 40%, transparent 70%);
	pointer-events: none;
	animation: sm-glow-pulse 8s ease-in-out infinite;
}

.sm-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	/* Top padding is intentionally small — the hero is flex-centered
	 * vertically, so top+bottom padding shifts the visual centroid.
	 * Trim top → content sits higher, closer to the header. */
	padding: 0.5rem clamp(1rem, 4vw, 2rem) 4rem;
	width: 100%;
}

.sm-hero__eyebrow {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-accent);
	background: rgba(45, 212, 191, 0.08);
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 999px;
	margin-bottom: 1.5rem;
}

/* Hero title — visually one heading, structurally two blocks.
 * Line 1 is <h1> (semantic + a11y anchor), line 2 is <h2> visually
 * matched via these overrides. Splitting into two blocks lets each
 * line be independently bound to post_meta for editing.
 */
.sm-hero__title {
	color: #fff !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.05 !important;
	font-size: clamp(2.5rem, 8vw, 6rem) !important;
	max-width: 22ch;
}
.sm-hero__title--line1 { margin: 0 !important; }
.sm-hero__title--line2 {
	margin: 0 0 1.25rem !important;
	/* -webkit-background-clip: text crops the gradient to the line box,
	 * which chops descenders (g, p, y) when line-height is tight.
	 * A small padding-bottom extends the clip region past the baseline. */
	padding-bottom: 0.15em;
}

.sm-hero__subtitle {
	color: var(--wp--preset--color--cool-gray-300);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	max-width: 40rem;
	margin: 0 0 2.5rem;
}

.sm-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 1.75rem;
	background: var(--wp--preset--color--indigo-core);
	color: #fff;
	border-radius: 0.625rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.5);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sm-hero__cta:hover {
	transform: translateY(-1px);
	background: var(--wp--preset--color--violet-glow);
	box-shadow: 0 12px 45px -8px rgba(139, 92, 246, 0.55);
	color: #fff;
}

/* Bottom fade so the hero blends into the next section. */
.sm-hero__fade {
	position: absolute;
	inset: auto 0 0 0;
	height: 8rem;
	background: linear-gradient(to top, var(--wp--preset--color--navy), transparent);
	pointer-events: none;
	z-index: 1;
}

/* ────────────────────────────────────────────────────────────────
 * 5. Cards (problem + feature)
 * ────────────────────────────────────────────────────────────── */

/* Responsive card grid — 1/2/3 columns, always symmetric. Explicit steps
 * beat auto-fit here: auto-fit fits *as many as possible*, which on wide
 * viewports gives 4+ columns and leaves 6-card sections with an uneven
 * last row. */
.sm-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: stretch;
	/* Force every row to the same height as its tallest card. `1fr`
	 * normalizes all implicit rows to equal shares. */
	grid-auto-rows: 1fr;
}
/* Kill WP's flow-layout `> * + *` block-gap margin wherever our own
 * layout (grid, flex, or hand-tuned padding) already handles spacing.
 * Without this, WP stamps margin-top on every second-and-later child,
 * misaligning grid cells and pushing flex-row items down. */
.sm-cards-grid > *,
.sm-features-grid > *,
.sm-steps > *,
.sm-step > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.sm-features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: stretch;
}
@media (min-width: 640px) {
	.sm-cards-grid,
	.sm-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.sm-cards-grid,
	.sm-features-grid { grid-template-columns: repeat(3, 1fr); }
}

.sm-card {
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.05);
	border-radius: 0.75rem;
	padding: 1.75rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	/* Column flex + justify-center vertically centers icon/title/body.
	 * min-height gives every card a floor so short bodies don't leave
	 * tiny cards. align-self:stretch forces each grid item to fill
	 * its row track — grid's align-items:stretch alone doesn't always
	 * propagate through the wp-block-group wrapper. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Grid + `height: 100%` fills each row track (= max content of the
	 * row), giving every card in a row the same height. `min-height` is
	 * a floor for the whole grid when content is short. */
	min-height: 16rem;
	height: 100%;
}

.sm-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	background: rgba(99, 102, 241, 0.1);
	color: var(--wp--preset--color--indigo-core);
	margin-bottom: 1rem;
}
.sm-card__icon svg { width: 1.5rem; height: 1.5rem; }

.sm-card h3 {
	color: var(--wp--preset--color--cool-gray-900) !important;
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	margin: 0 0 0.5rem !important;
	line-height: 1.4 !important;
}

.sm-card p {
	color: var(--wp--preset--color--cool-gray-700) !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* Feature cards — dark surface with gradient border. Same rule as .sm-card:
 * no `height: 100%` — let grid + align-items:stretch equalize rows. */
.sm-feature-card {
	position: relative;
	border-radius: 0.85rem;
	padding: 1px;
	background: linear-gradient(180deg, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.15));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* Hover: subtle lift with a layered black shadow — reads as
	 * elevation, not glow. cubic-bezier gives a snappy pop on the
	 * way in and a gentle settle on the way out. */
	transition:
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.28s ease;
}
.sm-feature-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.20),
		0 20px 40px -14px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
	.sm-feature-card { transition: none; }
	.sm-feature-card:hover { transform: none; }
}
.sm-feature-card--teal-indigo   { background: linear-gradient(180deg, rgba(45, 212, 191, 0.5),  rgba(99, 102, 241, 0.15)); }
.sm-feature-card--violet-teal   { background: linear-gradient(180deg, rgba(139, 92, 246, 0.5),  rgba(45, 212, 191, 0.15)); }
.sm-feature-card--teal-violet   { background: linear-gradient(180deg, rgba(45, 212, 191, 0.5),  rgba(139, 92, 246, 0.15)); }
.sm-feature-card--indigo-teal   { background: linear-gradient(180deg, rgba(99, 102, 241, 0.5),  rgba(45, 212, 191, 0.15)); }
.sm-feature-card--violet-indigo { background: linear-gradient(180deg, rgba(139, 92, 246, 0.5),  rgba(99, 102, 241, 0.15)); }

.sm-feature-card__inner {
	background: var(--wp--preset--color--slate-surface);
	border-radius: 0.8rem;
	padding: 1.75rem;
	flex: 1;   /* fill the parent card so the gradient border wraps content */
}

.sm-feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	color: var(--wp--preset--color--indigo-core);
	margin-bottom: 1.25rem;
}
.sm-feature-card--teal-indigo .sm-feature-card__icon,
.sm-feature-card--indigo-teal .sm-feature-card__icon   { color: var(--wp--preset--color--teal-accent); }
.sm-feature-card--violet-teal .sm-feature-card__icon,
.sm-feature-card--violet-indigo .sm-feature-card__icon { color: var(--wp--preset--color--violet-glow); }

.sm-feature-card__icon svg { width: 1.5rem; height: 1.5rem; }

.sm-feature-card h3 {
	color: #fff !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	margin: 0 0 0.75rem !important;
}

.sm-feature-card p {
	color: var(--wp--preset--color--cool-gray-300) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────────
 * 6. Numbered steps
 * ────────────────────────────────────────────────────────────── */

.sm-steps {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}

/* Vertical connector line running through all step numbers */
.sm-steps::before {
	content: "";
	position: absolute;
	left: 1.5rem;
	top: 1.5rem;
	bottom: 1.5rem;
	width: 2px;
	background: linear-gradient(to bottom, var(--wp--preset--color--indigo-core), var(--wp--preset--color--violet-glow), var(--wp--preset--color--teal-accent));
	opacity: 0.2;
}

.sm-step {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding-bottom: 2.5rem;
	position: relative;
}
.sm-step:last-child { padding-bottom: 0; }

.sm-step__number {
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wp--preset--color--indigo-core), var(--wp--preset--color--violet-glow));
	color: #fff;
	font-weight: 700;
	font-size: 1.125rem;
	box-shadow: 0 10px 20px -8px rgba(99, 102, 241, 0.5);
}

.sm-step__content {
	flex: 1;
	min-width: 0;
	padding-top: 0.375rem;
}

.sm-step h3 {
	color: var(--wp--preset--color--cool-gray-900) !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	margin: 0 0 0.5rem !important;
	line-height: 1.3 !important;
}

.sm-step p {
	color: var(--wp--preset--color--cool-gray-700) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────────
 * 7. Waitlist form
 * ────────────────────────────────────────────────────────────── */

/* Early-access card wrapper. */
.sm-early-card {
	max-width: 640px;
	margin: 0 auto;
	background: var(--wp--preset--color--slate-surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.05);
}

.sm-waitlist { position: relative; }

/* Honeypot: kept in the DOM for bots to auto-fill, hidden from real users
 * (both visually and to assistive tech). NOT display:none — some spam bots
 * skip display:none fields specifically to avoid honeypots. */
.sm-waitlist__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sm-waitlist__form {
	display: flex;
	gap: 0.75rem;
	flex-direction: column;
	margin-top: 2rem;
}
@media (min-width: 640px) {
	.sm-waitlist__form { flex-direction: row; }
}

.sm-waitlist__input {
	flex: 1;
	padding: 0.9rem 1rem;
	background: var(--wp--preset--color--navy);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: #fff;
	font-size: 1rem;
	font-family: inherit;
	transition: border-color 0.15s ease;
}
.sm-waitlist__input::placeholder { color: var(--wp--preset--color--cool-gray-500); }
.sm-waitlist__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--indigo-core);
}
.sm-waitlist.is-error .sm-waitlist__input {
	border-color: var(--wp--preset--color--error);
}

.sm-waitlist__button {
	padding: 0.9rem 1.5rem;
	background: var(--wp--preset--color--indigo-core);
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}
.sm-waitlist__button:hover {
	background: var(--wp--preset--color--violet-glow);
	box-shadow: 0 0 24px rgba(99, 102, 241, 0.4);
}

.sm-waitlist__error {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--error);
}

.sm-waitlist__success {
	text-align: center;
	padding: 1rem 0;
}
.sm-waitlist__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(16, 185, 129, 0.12);
	color: var(--wp--preset--color--success);
	margin-bottom: 1rem;
}
.sm-waitlist__check svg { width: 2rem; height: 2rem; }
.sm-waitlist__success h3 {
	color: #fff !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	margin: 0 0 0.5rem !important;
}
.sm-waitlist__success p {
	color: var(--wp--preset--color--cool-gray-300);
	margin: 0;
}

.sm-waitlist__meta {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
	align-items: center;
}
@media (min-width: 640px) {
	.sm-waitlist__meta {
		flex-direction: row;
		justify-content: space-between;
	}
}
.sm-waitlist__built {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--cool-gray-300);
}
.sm-waitlist__built strong { color: #fff; font-weight: 600; }
.sm-waitlist__fine {
	margin: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--cool-gray-500);
}

/* ────────────────────────────────────────────────────────────────
 * 8. Blog list + single-post prose
 * ────────────────────────────────────────────────────────────── */

/* Blog card in the archive/index grid */
.sm-post-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--slate-surface);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0.75rem;
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
	height: 100%;
}
.sm-post-card:hover {
	border-color: rgba(99, 102, 241, 0.4);
	transform: translateY(-2px);
}

/* Single-post body — WP wraps post_content in .entry-content when using core
 * post-content block. Add spacing rhythm + list markers + link underlines. */
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content > * + h2 { margin-top: 2.5rem; }
.entry-content > * + h3 { margin-top: 2rem; }

.entry-content ul,
.entry-content ol {
	color: var(--wp--preset--color--cool-gray-300);
	padding-left: 1.5rem;
}
.entry-content li::marker { color: var(--wp--preset--color--indigo-core); }
.entry-content li + li { margin-top: 0.4rem; }

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(45, 212, 191, 0.4);
}
.entry-content a:hover {
	text-decoration-color: currentColor;
}

.entry-content hr {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 2.5rem 0;
}

/* Constrain nice reading measure on wide screens. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: 65ch;
}

/* Inline code — theme.json handles the code block; this is <code> inline. */
.entry-content :not(pre) > code {
	background: rgba(30, 41, 59, 0.6);
	color: var(--wp--preset--color--teal-accent);
	padding: 0.15em 0.4em;
	border-radius: 0.25rem;
	font-size: 0.9em;
	font-family: var(--wp--preset--font-family--mono);
}

/* Post meta line under the title on single */
.sm-post-meta {
	color: var(--wp--preset--color--cool-gray-500) !important;
	font-size: 0.875rem !important;
	margin: 0 0 2rem !important;
}

/* ────────────────────────────────────────────────────────────────
 * 9. Keyframes
 * ────────────────────────────────────────────────────────────── */

@keyframes sm-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

@keyframes sm-glow-pulse {
	0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes sm-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}

/* ────────────────────────────────────────────────────────────────
 * 10. Background noise canvas
 * ────────────────────────────────────────────────────────────── */

.sm-noise {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.035;
	image-rendering: pixelated;
	z-index: 0;
}

/* ────────────────────────────────────────────────────────────────
 * 11. Cursor trail — desktop only, respects reduced motion
 * ────────────────────────────────────────────────────────────── */

.sm-cursor-trail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 1;
	display: none;
	filter: drop-shadow(0 0 6px rgba(79, 82, 200, 0.2));
}

@media (min-width: 1024px) {
	.sm-cursor-trail { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.sm-cursor-trail { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
 * 12. Hero floating code snippets
 * ────────────────────────────────────────────────────────────── */

.sm-hero__code {
	position: absolute;
	font-family: var(--wp--preset--font-family--mono);
	line-height: 1.6;
	white-space: pre;
	pointer-events: none;
	user-select: none;
	margin: 0;
	display: none;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.sm-hero__code--right {
	right: 3rem;
	top: 50%;
	font-size: 0.875rem;
	opacity: 0.25;
	background-image: linear-gradient(135deg, #6366F1, #8B5CF6, #2DD4BF);
	animation: sm-float 6s ease-in-out infinite;
	transform: translateY(-50%);
}

.sm-hero__code--left {
	left: 3rem;
	top: 62%;
	font-size: 0.75rem;
	opacity: 0.18;
	background-image: linear-gradient(135deg, #2DD4BF, #8B5CF6, #6366F1);
	animation: sm-float 7s ease-in-out 1.5s infinite;
	transform: translateY(-50%);
}

@media (min-width: 1024px) { .sm-hero__code--right { display: block; } }
@media (min-width: 1280px) { .sm-hero__code--left  { display: block; } }

@media (prefers-reduced-motion: reduce) {
	.sm-hero__code { animation: none !important; }
}

/* ────────────────────────────────────────────────────────────────
 * 13. Streaming icons illustration (Solution section)
 *
 * 12 outline icons scattered around a central Scopemap logo, all
 * pulsing softly with staggered delays. Each icon slug carries the
 * position and animation-delay as CSS custom properties.
 * ────────────────────────────────────────────────────────────── */

.sm-streaming {
	position: relative;
	width: 100%;
	max-width: 720px;
	/* !important to beat WP's block-gap that otherwise trims this top
	 * margin down. Gives the burst clear separation from the subtitle. */
	margin: 6rem auto 0 !important;
	aspect-ratio: 4 / 3;
}

/* Atmospheric glow behind the logo — three stacked radials so the
 * center reads as a lit core, with violet in the mid-ring and a
 * teal outer halo. aspect-ratio: 1 keeps it a true circle instead
 * of an oval stretched by the 4:3 parent. */
.sm-streaming__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 75%;
	aspect-ratio: 1;
	background:
		/* Inner indigo core — the hot spot */
		radial-gradient(circle at center,
			rgba(99, 102, 241, 0.55)  0%,
			rgba(99, 102, 241, 0.25) 15%,
			rgba(99, 102, 241, 0.00) 40%),
		/* Mid violet ring — adds saturation & depth */
		radial-gradient(circle at center,
			rgba(139, 92, 246, 0.30)  5%,
			rgba(139, 92, 246, 0.10) 35%,
			rgba(139, 92, 246, 0.00) 60%),
		/* Outer teal halo — barely-there brand touch that lifts the edges */
		radial-gradient(circle at center,
			rgba(45, 212, 191, 0.10) 30%,
			rgba(45, 212, 191, 0.00) 75%);
	pointer-events: none;
	z-index: 1;
}

.sm-streaming__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: visible;
}

.sm-streaming__line {
	/* Indigo-300 with a stronger peak opacity so the dashes read as
	 * "connective tissue" without going dim against the navy bg. Kept
	 * a step below the icon color (#C7D2FE / indigo-200) so icons stay
	 * the visual anchors. */
	stroke: #A5B4FC;
	stroke-width: 0.18;
	stroke-dasharray: 1.5 2.5;
	opacity: 0;
	animation: sm-stream-line-in 0.8s ease-out forwards;
}

.sm-streaming__icon {
	position: absolute;
	left: var(--sm-x, 50%);
	top:  var(--sm-y, 50%);
	/* Steady brightness — no more opacity pulsing. */
	color: #C7D2FE;
	opacity: 0.85;
	/* Gentle vertical bob. The stagger --sm-delay makes each icon
	 * float at a different phase, giving an organic drift. */
	transform: translate(-50%, -50%);
	/* Duration and direction are per-icon CSS vars set inline in
	 * solution.php — each icon drifts to a different offset over a
	 * different cycle length, so they don't move in lockstep. */
	animation: sm-stream-float var(--sm-dur, 5s) ease-in-out infinite;
	animation-delay: var(--sm-delay, 0s);
	z-index: 3;
}

.sm-streaming__icon svg {
	width: 2.75rem;
	height: 2.75rem;
	display: block;
}

.sm-streaming__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
	line-height: 1;
}
.sm-streaming__logo .sm-gradient-text { display: inline-block; }
.sm-streaming__logo .sm-logo-text {
	color: #fff;
	background: none;
	-webkit-text-fill-color: #fff;
}

@keyframes sm-stream-float {
	0%, 100% { transform: translate(-50%, -50%); }
	50%      { transform: translate(-50%, -50%) translate(var(--sm-fx, 0px), var(--sm-fy, -6px)); }
}

@keyframes sm-stream-line-in {
	from { opacity: 0; }
	to   { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.sm-streaming__icon { animation: none !important; opacity: 0.85; }
	.sm-streaming__line { animation: none !important; opacity: 0.5; }
}