/*
 * AtomicAdmin Theme - Home hero
 */

@keyframes atomic-hero-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

body {
	margin: 0;
	background: #070606;
}

.atomic-hero-page {
	--hero-gutter: clamp(28px, 5vw, 72px);
	--hero-max: 1280px;

	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #070606;
	color: #fbfaf8;
	font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
}

.atomic-hero-page a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.atomic-hero-page a:hover {
	color: #ffffff;
}

/* Shared container - nav, hero and footer share the same edges */

.atomic-hero-row {
	width: 100%;
	max-width: var(--hero-max);
	margin-inline: auto;
	padding-inline: var(--hero-gutter);
	box-sizing: border-box;
}

/* Backdrop */

.atomic-hero-backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.atomic-hero-glow-a,
.atomic-hero-glow-b,
.atomic-hero-grain {
	position: absolute;
	pointer-events: none;
}

.atomic-hero-glow-a {
	top: -38vw;
	left: -6vw;
	width: 88vw;
	height: 88vw;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 252, 246, 0.075), rgba(255, 252, 246, 0.022) 42%, rgba(0, 0, 0, 0) 68%);
	opacity: 0.52;
	transform: translate3d(2vw, 1.5vh, 0) scale(1.04);
}

.atomic-hero-glow-b {
	bottom: -52vw;
	right: -22vw;
	width: 96vw;
	height: 96vw;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 250, 240, 0.05), rgba(0, 0, 0, 0) 62%);
	transform: translate3d(-2.5vw, -1.5vh, 0) scale(1);
}

.atomic-hero-grain {
	inset: -6%;
	opacity: 0.6;
	mix-blend-mode: overlay;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.5"/></svg>');
}

/* Header */

.atomic-hero-header {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 22px;
}

.atomic-hero-header-left {
	display: flex;
	align-items: baseline;
	gap: clamp(26px, 4vw, 52px);
}

.atomic-hero-brand {
	display: flex;
	align-items: center;
	gap: 11px;
}

.atomic-hero-mark {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
}

.atomic-hero-mark-ring {
	position: absolute;
	inset: 0;
	border: 1.2px solid #6f685f;
	border-radius: 50%;
}

.atomic-hero-mark-core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: #ffffff;
}

.atomic-hero-mark-dot-a,
.atomic-hero-mark-dot-b {
	position: absolute;
	width: 3.5px;
	height: 3.5px;
	border-radius: 50%;
}

.atomic-hero-mark-dot-a {
	top: 1px;
	right: 1px;
	background: #b3aca2;
}

.atomic-hero-mark-dot-b {
	bottom: 2px;
	left: 0;
	background: #6f685f;
}

.atomic-hero-brand-name {
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: -0.005em;
}

.atomic-hero-brand-name span {
	color: #736d65;
}

.atomic-hero-nav {
	display: flex;
	gap: 28px;
	font-size: 14px;
}

.atomic-hero-page .atomic-hero-nav a,
.atomic-hero-page .atomic-hero-header-right a {
	color: #8f887e;
}

/* The header CTA is excluded: it keeps its own dark-on-light hover, which
   this rule would otherwise win against and turn white-on-white. */
.atomic-hero-page .atomic-hero-nav a:hover,
.atomic-hero-page .atomic-hero-header-right a:not(.atomic-hero-btn-primary):hover {
	color: #ffffff;
}

.atomic-hero-header-right {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 14px;
}

/* Main - two columns, vertically centred inside a capped band */

.atomic-hero-main {
	position: relative;
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(56px, 5vw, 88px);
	align-items: stretch;
	align-content: center;
	min-height: 0;
	padding-block: clamp(16px, 3vh, 48px);
}

.atomic-hero-copy {
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(18px, 2.6vh, 30px);
}

.atomic-hero-meta {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	color: #a49c92;
	text-transform: uppercase;
}

.atomic-hero-meta > span {
	white-space: nowrap;
}

.atomic-hero-meta .atomic-hero-sep {
	color: #5d574f;
}

.atomic-hero-title {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
	margin: 0 0 0 -0.045em;
	font-size: clamp(36px, 4vw, 58px);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 500;
	max-width: 14ch;
	text-wrap: balance;
}

.atomic-hero-title span {
	font-weight: 300;
	color: #8b847b;
}

.atomic-hero-lead {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
	margin: 0;
	max-width: 52ch;
	font-size: 17px;
	line-height: 1.6;
	color: #a9a299;
}

.atomic-hero-actions {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: min(560px, 100%);
}

/* Install command */

.atomic-hero-install {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 8px 7px 18px;
	border-radius: 999px;
	background: rgba(236, 234, 231, 0.055);
}

.atomic-hero-install code {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: clamp(11.5px, 1vw, 13px);
	line-height: 1.5;
	color: #f2efea;
	overflow-wrap: anywhere;
}

.atomic-hero-prompt {
	flex: none;
	color: #57514b;
}

.atomic-hero-copy-btn {
	flex: none;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #8f887e;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.atomic-hero-copy-btn:hover {
	background: #ffffff;
	color: #0a0908;
}

.atomic-hero-copy-btn.is-copied,
.atomic-hero-copy-btn.is-copied:hover {
	background: #fbfaf8;
	color: #0a0908;
}

/* Buttons */

.atomic-hero-buttons {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

.atomic-hero-page .atomic-hero-btn-primary {
	display: inline-flex;
	align-items: center;
	padding: 13px 28px;
	border-radius: 999px;
	background: #fbfaf8;
	color: #0a0908;
	font-size: 14.5px;
	font-weight: 500;
	transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.atomic-hero-page .atomic-hero-btn-primary:hover {
	background: #ffffff;
	color: #0a0908;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.atomic-hero-page .atomic-hero-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 28px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	background: transparent;
	font-size: 14.5px;
	font-weight: 500;
	color: #e8e4dd;
	transition: color 0.2s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.atomic-hero-page .atomic-hero-btn-ghost:hover {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.32);
	background: rgba(255, 255, 255, 0.045);
	transform: translateY(-2px);
}

.atomic-hero-btn-ghost span {
	color: #8f887e;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.atomic-hero-page .atomic-hero-btn-ghost:hover span {
	transform: translateX(4px);
}

/* Code panel */

.atomic-hero-panel-wrap {
	animation: atomic-hero-rise 0.66s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: stretch;
}

.atomic-hero-panel {
	/* Tabs on row 1, every pane stacked in row 2 - the panel sizes to the
	   tallest pane, so switching tabs never resizes the block. */
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	gap: 16px;
	width: 100%;
	height: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 22px 30px;
	border: 1px solid rgba(236, 234, 231, 0.11);
	border-radius: 6px;
	background: rgba(255, 252, 246, 0.022);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.atomic-hero-tabs {
	grid-row: 1;
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: 0;
	overflow: hidden;
	border-bottom: 1px solid rgba(236, 234, 231, 0.08);
	margin-bottom: 2px;
}

.atomic-hero-tab {
	padding: 0 0 7px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	color: #9a938a;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	cursor: pointer;
	transition: color 0.2s ease;
}

.atomic-hero-tab:hover {
	color: #e8e4dd;
}

.atomic-hero-tab.is-active {
	border-bottom-color: #e6e0d8;
	color: #fbfaf8;
}

.atomic-hero-tab-file {
	margin-left: auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-bottom: 7px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: #7d766d;
}

.atomic-hero-pane {
	grid-row: 2;
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
	visibility: hidden;
	pointer-events: none;
}

.atomic-hero-pane.is-active {
	visibility: visible;
	pointer-events: auto;
}

.atomic-hero-pane pre {
	margin: 0;
	padding: 0;
	flex: 1;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: clamp(13px, 1.15vw, 15px);
	line-height: 1.85;
	color: #928b81;
	overflow: auto;
	min-height: 0;
}

.atomic-hero-pane .atomic-hero-code-comment {
	color: #6f685f;
}

.atomic-hero-pane .atomic-hero-code-fn {
	color: #ffffff;
}

.atomic-hero-pane .atomic-hero-code-str {
	color: #b9b2a6;
}

.atomic-hero-pane-cmd {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: #a49c92;
	overflow-wrap: anywhere;
	padding-top: 14px;
	border-top: 1px solid rgba(236, 234, 231, 0.08);
}

.atomic-hero-pane-cmd .atomic-hero-prompt {
	color: #6f685f;
}

/* Footer */

.atomic-hero-footer {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.46s both;
	position: relative;
	padding-block: clamp(14px, 2vh, 20px) clamp(18px, 2.5vh, 26px);
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.5vw, 34px);
	flex-wrap: nowrap;
}

/* Rule spans the content edges, not the container padding */
.atomic-hero-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: var(--hero-gutter);
	right: var(--hero-gutter);
	border-top: 1px solid rgba(236, 234, 231, 0.09);
}

.atomic-hero-footer-label {
	flex: none;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	color: #9a938a;
	line-height: 1.55;
}

.atomic-hero-footer-list {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
	font-size: 13.5px;
	color: #8b847b;
	white-space: nowrap;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
	mask-image: linear-gradient(90deg, #000 82%, transparent);
}

/* Narrow viewports - stack, panel below the copy */

@media (max-width: 900px) {
	/* Stacked layout can't fit one viewport - let it scroll */
	.atomic-hero-page {
		height: auto;
		min-height: 100svh;
		overflow: visible;
	}

	.atomic-hero-main {
		grid-template-columns: 1fr;
		gap: clamp(32px, 6vw, 56px);
	}

	.atomic-hero-pane pre {
		overflow-x: auto;
	}

	.atomic-hero-panel-wrap {
		width: 100%;
	}

	.atomic-hero-nav {
		display: none;
	}

	.atomic-hero-footer {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atomic-hero-page *,
	.atomic-hero-page *::before,
	.atomic-hero-page *::after {
		animation: none !important;
		transition: none !important;
	}

	.atomic-hero-page [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Scroll reveal - hero.js marks the targets, so nothing is hidden when the
   script does not run. Everything below the hero rises in as it comes into
   view; the stagger inside a group comes from an inline transition-delay. */

.atomic-hero-page [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.atomic-hero-page [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ─────────────────────────────────────────────────────────
   Stores landing  ·  scrolling view, framework hero kept
   behind the header toggle
   ───────────────────────────────────────────────────────── */

/* The stores view scrolls; only the framework view is a single screen. */
.atomic-hero-page[data-view="stores"] {
	height: auto;
	min-height: 100svh;
	overflow: visible;
}

/* Stays absolute and spans the whole scrolling page: `fixed` pulls the grain
   out of the page blending context, so its overlay stops darkening and the
   raw noise shows as grey; clipping it to one screen instead leaves a hard
   lit edge where the backdrop ends. Glow-a fades out on its own near the top,
   glow-b settles at the page bottom as it does in the framework view. */
.atomic-hero-page[data-view="stores"] .atomic-hero-backdrop {
	position: absolute;
}

.atomic-hero-view {
	position: relative;
	min-width: 0;
}

.atomic-hero-view[data-view-pane="framework"] {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.atomic-hero-view[hidden] {
	display: none;
}

/* Header segmented toggle */

.atomic-hero-seg {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(236, 234, 231, 0.055);
}

.atomic-hero-seg-btn {
	padding: 7px 15px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #8f887e;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.atomic-hero-seg-btn:hover {
	color: #ffffff;
}

.atomic-hero-seg-btn.is-active {
	background: #fbfaf8;
	color: #0a0908;
}

.atomic-hero-btn-sm {
	padding: 10px 22px !important;
	font-size: 14px !important;
}

/* Landing hero */

.atomic-land-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(48px, 5vw, 88px);
	align-items: center;
	padding-block: clamp(48px, 7vh, 84px) clamp(56px, 8vh, 96px);
}

.atomic-land-hero-copy {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.atomic-land-hero .atomic-hero-title {
	max-width: 15ch;
}

.atomic-land-cta {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.atomic-land-cta-center {
	justify-content: center;
}

.atomic-land-note {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 4px;
	font-size: 13.5px;
	color: #736d65;
	flex-wrap: wrap;
}

.atomic-land-note-sep {
	color: #4a453f;
}

/* Entrance - the stores hero picks up the framework stagger where the shared
   meta / title / lead classes leave off (0.16s, 0.28s, 0.43s). Scoped to the
   hero so the closing CTA further down the page is not held back. */

.atomic-land-hero .atomic-land-cta {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}

.atomic-land-hero .atomic-land-note {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Payment panel */

.atomic-land-panel-wrap {
	min-width: 0;
	animation: atomic-hero-rise 0.66s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
}

.atomic-land-panel .atomic-land-paytabs {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
}

.atomic-land-panel .atomic-land-paypane.is-active {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.46s both;
}

.atomic-land-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	padding: 22px 30px 26px;
	border: 1px solid rgba(236, 234, 231, 0.11);
	border-radius: 6px;
	background: rgba(255, 252, 246, 0.022);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.atomic-land-paytabs {
	display: flex;
	align-items: center;
	gap: 22px;
	border-bottom: 1px solid rgba(236, 234, 231, 0.08);
}

.atomic-land-paytab {
	padding: 0 0 7px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	color: #9a938a;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	cursor: pointer;
	transition: color 0.2s ease;
}

.atomic-land-paytab:hover {
	color: #ffffff;
}

.atomic-land-paytab.is-active {
	border-bottom-color: #e6e0d8;
	color: #fbfaf8;
}

.atomic-land-payfile {
	margin-left: auto;
	padding-bottom: 7px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: #7d766d;
}

.atomic-land-paypane {
	display: none;
	flex-direction: column;
	gap: 18px;
	min-height: 300px;
}

.atomic-land-paypane.is-active {
	display: flex;
}

.atomic-land-paypane-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.atomic-land-paypane-title {
	font-size: 15px;
	font-weight: 500;
	color: #e8e4dd;
}

.atomic-land-paypane-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #928b81;
}

.atomic-land-payrows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.atomic-land-payrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 16px;
	border: 1px solid rgba(236, 234, 231, 0.09);
	border-radius: 6px;
	background: rgba(255, 252, 246, 0.02);
	font-size: 13.5px;
	color: #d8d3cb;
}

.atomic-land-payrow-meta {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #7d766d;
}

.atomic-land-paypane-cmd {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(236, 234, 231, 0.08);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: #a49c92;
}

/* Sections */

.atomic-land-section {
	position: relative;
	padding-block: clamp(48px, 7vw, 76px);
	border-top: 1px solid rgba(236, 234, 231, 0.08);
}

.atomic-land-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 60ch;
	margin-bottom: 44px;
}

.atomic-land-split .atomic-land-head {
	margin-bottom: 0;
}

.atomic-land-eyebrow {
	flex: none;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	color: #9a938a;
}

.atomic-land-h2 {
	margin: 0;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 500;
}

.atomic-land-h2-lg {
	font-size: clamp(32px, 3.6vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.035em;
	max-width: 20ch;
	text-wrap: balance;
}

.atomic-land-h2 span {
	font-weight: 300;
	color: #8b847b;
}

.atomic-land-lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #a9a299;
	max-width: 60ch;
}

/* Cards */

.atomic-land-cards-3,
.atomic-land-cards-2 {
	display: grid;
	gap: 20px;
}

.atomic-land-cards-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atomic-land-cards-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.atomic-land-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px 28px;
	border: 1px solid rgba(236, 234, 231, 0.11);
	border-radius: 6px;
	background: rgba(255, 252, 246, 0.022);
	transition: border-color 0.25s ease, background 0.25s ease;
}

.atomic-land-card:hover {
	border-color: rgba(236, 234, 231, 0.2);
	background: rgba(255, 252, 246, 0.038);
}

.atomic-land-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.atomic-land-card-title {
	font-size: 15.5px;
	font-weight: 500;
	color: #f2efea;
}

.atomic-land-card-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #928b81;
}

.atomic-land-tag {
	flex: none;
	padding: 4px 9px;
	border: 1px solid rgba(236, 234, 231, 0.11);
	border-radius: 999px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	color: #7d766d;
}

/* Commerce split */

.atomic-land-split {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(48px, 5vw, 88px);
	align-items: start;
}

.atomic-land-sources {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

.atomic-land-source {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid rgba(236, 234, 231, 0.09);
	border-radius: 6px;
	font-size: 14px;
	color: #f2efea;
}

.atomic-land-source.is-lead {
	border-color: rgba(236, 234, 231, 0.16);
	background: rgba(255, 252, 246, 0.03);
}

.atomic-land-source-dim {
	color: #8b847b;
}

.atomic-land-source-meta {
	margin-left: auto;
	font-size: 13px;
	color: #736d65;
}

.atomic-land-source .atomic-land-tag {
	margin-left: auto;
}

/* Inline strips */

.atomic-land-strip {
	display: flex;
	align-items: center;
	gap: 34px;
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid rgba(236, 234, 231, 0.09);
}

.atomic-land-core-strip {
	position: relative;
	padding-block: 20px 26px;
}

.atomic-land-core-strip .atomic-land-strip {
	margin-top: 0;
}

.atomic-land-strip-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	font-size: 13.5px;
	color: #8b847b;
}

/* Banner */

.atomic-land-banner {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 30px 34px;
	border: 1px solid rgba(236, 234, 231, 0.11);
	border-radius: 6px;
	background: rgba(255, 252, 246, 0.022);
}

.atomic-land-banner-copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.atomic-land-banner-title {
	font-size: 17px;
	font-weight: 500;
	color: #f2efea;
}

.atomic-land-banner-body {
	margin: 0;
	max-width: 68ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: #928b81;
}

.atomic-land-banner .atomic-hero-btn-ghost {
	margin-left: auto;
	flex: none;
	font-family: inherit;
	cursor: pointer;
}

/* Closing CTA */

.atomic-land-closing {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	padding-block: clamp(48px, 6vw, 70px) clamp(60px, 8vw, 90px);
	border-top: 1px solid rgba(236, 234, 231, 0.08);
	text-align: center;
}

/* Footer */

.atomic-land-footer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 26px 40px;
	border-top: 1px solid rgba(236, 234, 231, 0.08);
	font-size: 13px;
	color: #6f685f;
}

.atomic-land-footer-links {
	display: flex;
	align-items: center;
	gap: 24px;
}

.atomic-hero-page .atomic-land-footer a {
	color: #8f887e;
}

.atomic-hero-page .atomic-land-footer a:hover {
	color: #ffffff;
}

@media (max-width: 900px) {
	.atomic-land-hero,
	.atomic-land-split {
		grid-template-columns: 1fr;
	}

	.atomic-land-cards-3,
	.atomic-land-cards-2 {
		grid-template-columns: 1fr;
	}

	.atomic-land-strip,
	.atomic-land-banner,
	.atomic-land-footer {
		flex-wrap: wrap;
		gap: 20px;
	}

	.atomic-land-banner .atomic-hero-btn-ghost {
		margin-left: 0;
	}
}

/* Analytics block (sample figures) */

.atomic-land-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}

.atomic-land-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 22px 24px;
	border: 1px solid rgba(236, 234, 231, 0.11);
	border-radius: 6px;
	background: rgba(255, 252, 246, 0.022);
}

.atomic-land-stat-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.atomic-land-stat-value {
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 600;
	color: #fbfaf8;
	font-variant-numeric: tabular-nums;
}

.atomic-land-stat-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
}

.atomic-land-stat-label {
	font-size: 13px;
	color: #8f887e;
}

.atomic-land-stat-change {
	font-size: 12.5px;
	font-weight: 600;
	color: #f2efea;
	font-variant-numeric: tabular-nums;
}

.atomic-land-stat-change.is-down {
	color: oklch(0.66 0.18 22);
}

.atomic-land-charts {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 20px;
}

.atomic-land-chart {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 26px 26px;
	border: 1px solid rgba(236, 234, 231, 0.11);
	border-radius: 6px;
	background: rgba(255, 252, 246, 0.022);
}

.atomic-land-table-panel {
	margin-top: 20px;
	padding-bottom: 12px;
}

.atomic-land-chart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.atomic-land-chart-title {
	font-size: 15px;
	font-weight: 500;
	color: #f2efea;
}

.atomic-land-chart-meta {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: #7d766d;
}

.atomic-land-spark {
	display: block;
	overflow: visible;
}

.atomic-land-chart-axis {
	display: flex;
	justify-content: space-between;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: #6f685f;
}

.atomic-land-bars {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.atomic-land-bar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
	font-size: 13.5px;
	color: #d8d3cb;
}

.atomic-land-bar-share {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: #8f887e;
}

.atomic-land-bar-track {
	height: 8px;
	border-radius: 4px;
	background: rgba(236, 234, 231, 0.06);
	overflow: hidden;
}

.atomic-land-bar-fill {
	height: 8px;
	border-radius: 4px;
	background: #e8e4dd;
}

/* Top products table */

.atomic-land-table {
	display: flex;
	flex-direction: column;
}

.atomic-land-tr {
	display: grid;
	grid-template-columns: 2.4fr 1.1fr 0.6fr 1fr;
	gap: 24px;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid rgba(236, 234, 231, 0.055);
	transition: background 0.16s ease;
}

.atomic-land-tr:last-child {
	border-bottom: 0;
}

.atomic-land-th {
	align-items: baseline;
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(236, 234, 231, 0.09);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: #7d766d;
}

.atomic-land-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.atomic-land-td-product {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.atomic-land-td-title {
	font-size: 14.5px;
	color: #f2efea;
}

.atomic-land-td-sku {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: #6f685f;
}

.atomic-land-td-cat {
	font-size: 13.5px;
	color: #8f887e;
}

.atomic-land-td-sales {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 13px;
	color: #a9a299;
}

.atomic-land-td-revenue {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.atomic-land-td-revenue .atomic-land-num {
	font-size: 14.5px;
	font-weight: 500;
	color: #fbfaf8;
}

.atomic-land-td-track {
	display: block;
	height: 3px;
	border-radius: 999px;
	background: rgba(236, 234, 231, 0.06);
	overflow: hidden;
}

.atomic-land-td-fill {
	display: block;
	height: 3px;
	border-radius: 999px;
	background: #e8e4dd;
}

@media (max-width: 1100px) {
	.atomic-land-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.atomic-land-charts {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.atomic-land-stats {
		grid-template-columns: 1fr;
	}

	.atomic-land-tr {
		grid-template-columns: 1.6fr 0.9fr;
		row-gap: 10px;
	}

	.atomic-land-th,
	.atomic-land-td-cat {
		display: none;
	}
}

/* Framework view keeps the original one-screen composition: its own
   IN THE CORE footer closes the page, so the landing footer stays out. */
.atomic-hero-page[data-view="framework"] .atomic-land-footer {
	display: none;
}

/* The payments section sits in the first screen on a tall viewport, so it
   runs the same load-time stagger as the hero instead of waiting for a
   scroll that never comes. hero.js skips these targets. */

#payments .atomic-land-head {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}

#payments .atomic-land-card {
	animation: atomic-hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both;
}

#payments .atomic-land-card:nth-child(2) { animation-delay: 0.68s; }
#payments .atomic-land-card:nth-child(3) { animation-delay: 0.74s; }
#payments .atomic-land-card:nth-child(4) { animation-delay: 0.8s; }
#payments .atomic-land-card:nth-child(5) { animation-delay: 0.86s; }
#payments .atomic-land-card:nth-child(6) { animation-delay: 0.92s; }