/* =============================================================================
 * Hive Mind landing page — scoped styles.
 *
 * Every selector lives under .hive-mind-page so this file cannot leak into
 * Bricks-rendered pages or other templates. All design tokens are inherited
 * from the parent theme (style.css :root) — colors, fonts, spacing, radius —
 * with the single exception of the local "always-light" override below, which
 * holds the page on the brand's editorial bone ground regardless of the
 * sitewide light/dark toggle.
 *
 * Tokens used (all from style.css):
 *   --ink --bone --yellow --teal --teal-deep --yellow-soft --teal-pale
 *   --f-sans --f-serif --f-italic --f-mono
 *   --t-display --t-h2 --t-h3 --t-lead --t-body --t-eyebrow
 *   --s-1 .. --s-10  --radius --radius-lg --radius-pill
 * ============================================================================= */

.hive-mind-page {
	/* Pin to the editorial light treatment regardless of theme toggle —     */
	/* this is a brochure page, not part of the dark dashboard ecosystem.    */
	--bg:            var(--bone);
	--bg-2:          #ECE6D9;
	--fg:            var(--ink);
	--fg-dim:        rgba(11, 15, 14, 0.62);
	--line:          rgba(11, 15, 14, 0.12);
	--card:          #FFFFFF;
	--accent-italic: var(--teal-deep);

	background: var(--bg);
	color: var(--fg);
	font-family: var(--f-sans);
	font-size: var(--t-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.hive-mind-page * { box-sizing: border-box; }

.hive-mind-page .hm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

@media (min-width: 768px)  { .hive-mind-page .hm-container { padding: 0 40px; } }
@media (min-width: 1024px) { .hive-mind-page .hm-container { padding: 0 56px; } }

/* ── Type ──────────────────────────────────────────────────────────────── */

/* BOLDER PASS: display scale pushed to the brand DESIGN.md spec
   (was clamp(48px, 8vw, 80px) — sat 60% below the committed ceiling).
   The brand voice is "confidently quiet" but the brand's TYPE is allowed
   to be loud — that's the editorial trade. One typographic shout per page.
   Letter-spacing and leading also tightened to brand display spec.
   Affects only the hero h1; section 7's request-access overrides via
   .hm-get-headline so it stays at its own comfortable scale. */
.hive-mind-page .hm-display {
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: clamp(56px, 9vw, 156px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--fg);
	margin: 0;
	text-wrap: balance;
}
.hive-mind-page .hm-display em {
	font-family: var(--f-italic);
	font-style: italic;
	font-weight: 400;
	color: var(--accent-italic);
	letter-spacing: -0.02em;
}

.hive-mind-page .hm-h2 {
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.028em;
	color: var(--fg);
	margin: 0;
	text-wrap: balance;
	max-width: 22ch;
}
.hive-mind-page .hm-h2 em {
	font-family: var(--f-italic);
	font-style: italic;
	font-weight: 400;
	color: var(--accent-italic);
}

.hive-mind-page .hm-h3 {
	font-family: var(--f-serif);
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--fg);
	margin: 0;
}

/* Sub-heading / lead copy — Inter, NOT italic. Italic emphasis is now used  */
/* sparingly (hero + problem + get headlines only) for stronger contrast.    */
.hive-mind-page .hm-lead {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: clamp(18px, 1.9vw, 21px);
	line-height: 1.55;
	color: rgba(11, 15, 14, 0.72);
	/* POLISH: 62ch was producing ~78 chars/line at the actual Inter glyph
	   widths, above the 65-75ch comfort range. 56ch lands at ~68-72 actual
	   characters per line — squarely in the reading sweet spot. */
	max-width: 56ch;
	margin: 28px 0 0;
	text-wrap: pretty;
}

.hive-mind-page .hm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-mono);
	font-size: var(--t-eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-dim);
	margin: 0 0 var(--s-3);
}
.hive-mind-page .hm-eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yellow);
	display: inline-block;
}

.hive-mind-page .hm-mono-num,
.hive-mind-page .hm-mono-tag {
	font-family: var(--f-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-dim);
	margin: 0 0 var(--s-3);
}

.hive-mind-page .hm-code {
	font-family: var(--f-mono);
	font-size: 0.92em;
	background: rgba(243, 182, 28, 0.16);
	color: var(--ink);
	padding: 2px 7px;
	border-radius: 5px;
	white-space: nowrap;
}

.hive-mind-page p { margin: 0; }
.hive-mind-page p + p { margin-top: var(--s-4); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.hive-mind-page .hm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: var(--radius-pill);
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.hive-mind-page .hm-btn:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}
.hive-mind-page .hm-btn-primary {
	background: var(--yellow);
	color: var(--ink);
	border-color: var(--yellow);
}
.hive-mind-page .hm-btn-primary:hover {
	background: var(--yellow-soft);
	border-color: var(--yellow-soft);
	transform: translateY(-1px);
}
.hive-mind-page .hm-btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.hive-mind-page .hm-btn-ghost:hover {
	background: var(--ink);
	color: var(--bone);
}
.hive-mind-page .hm-btn-lg {
	padding: 18px 32px;
	font-size: 17px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hive-mind-page .hm-hero {
	padding: 96px 0 88px;
	border-bottom: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.hive-mind-page .hm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(620px 320px at 88% 18%, rgba(31, 122, 130, 0.10), transparent 60%),
		radial-gradient(540px 280px at 8% 92%, rgba(243, 182, 28, 0.12), transparent 60%);
	pointer-events: none;
}
.hive-mind-page .hm-hero > * { position: relative; z-index: 1; }

.hive-mind-page .hm-hero .hm-display {
	/* BOLDER PASS: tightened from 16ch → 14ch so the headline at the new
	   display scale stacks more aggressively across multiple lines. The
	   editorial cadence — eyebrow whisper → giant Fraunces headline → italic
	   accent dropped onto its own line — is the bolder move. */
	max-width: 14ch;
	margin-top: 28px;
}

.hive-mind-page .hm-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 40px;
}

.hive-mind-page .hm-byline {
	margin-top: 28px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

@media (min-width: 768px)  { .hive-mind-page .hm-hero { padding: 120px 0 112px; } }
@media (min-width: 1024px) { .hive-mind-page .hm-hero { padding: 144px 0 136px; } }

/* ── Section base ──────────────────────────────────────────────────────── */

.hive-mind-page .hm-section {
	padding: 80px 0;
	border-bottom: 1px solid var(--line);
}
@media (min-width: 768px)  { .hive-mind-page .hm-section { padding: 96px 0; } }
@media (min-width: 1024px) { .hive-mind-page .hm-section { padding: 120px 0; } }

.hive-mind-page .hm-section-head {
	margin-bottom: 56px;
	max-width: 760px;
}
.hive-mind-page .hm-section-head .hm-h2,
.hive-mind-page .hm-section-head .hm-display {
	margin-top: 12px;
}
/* Section-level subhead. Sits below a hm-h2 to carry a second clause
   that doesn't earn space inside the headline itself. Used in section 4
   (What's in the box) where the headline was tightened to ~10 words. */
.hive-mind-page .hm-section-head .hm-section-lead {
	font-family: var(--f-italic);
	font-style: italic;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.3;
	color: var(--fg-dim);
	margin: 12px 0 0;
	max-width: 60ch;
	text-wrap: pretty;
}

/* Dark variant — pinned to ink ground. */
.hive-mind-page .hm-section-dark {
	background: var(--ink);
	color: var(--bone);
	border-bottom-color: rgba(244, 239, 230, 0.08);
}
.hive-mind-page .hm-section-dark .hm-h2,
.hive-mind-page .hm-section-dark .hm-h3,
.hive-mind-page .hm-section-dark .hm-display { color: var(--bone); }
.hive-mind-page .hm-section-dark .hm-h2 em,
.hive-mind-page .hm-section-dark .hm-display em { color: var(--yellow); }
.hive-mind-page .hm-section-dark .hm-eyebrow,
.hive-mind-page .hm-section-dark .hm-mono-num,
.hive-mind-page .hm-section-dark .hm-mono-tag { color: rgba(244, 239, 230, 0.62); }
.hive-mind-page .hm-section-dark .hm-lead { color: rgba(244, 239, 230, 0.82); }

/* Paper variant — slightly off-white, for the rules section pull-out. */
.hive-mind-page .hm-section-paper { background: var(--bg-2); }

/* Product showcase — figure in section 4 ("What's in the box").
   STEER → OBSIDIAN: Inline SVG (from templates/parts/hive-mind-vault-editor.svg.php)
   shows the actual product — a vault opened in a markdown editor with sidebar tree,
   YAML frontmatter, [[wikilinks]], and citations. Replaces the previous abstract
   data-flow schematic as the page's primary product imagery, per the Obsidian
   homepage's principle: show the product doing the job, not a diagram of it. */
.hive-mind-page .hm-product-showcase {
	margin: 0 0 32px;
	padding: 0;
}
.hive-mind-page .hm-editor-svg {
	display: block;
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	border-radius: 14px;
}
@media (max-width: 760px) {
	/* On narrow viewports the editor mockup gets too small for the body text
	   to be legible. Let it scroll horizontally so the visitor can swipe to
	   see the file tree and the source page at a readable size — same pattern
	   the schematic used. The mockup is product proof; better at scale than
	   shrunk to illegibility. */
	.hive-mind-page .hm-product-showcase {
		overflow-x: auto;
		margin-left: -32px;
		margin-right: -32px;
		padding: 0 32px 8px;
		mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	}
	.hive-mind-page .hm-editor-svg {
		min-width: 920px;
		width: 920px;
	}
}

/* Product showcase section — promoted right after the hero. Obsidian leads
   with the product itself; no header, no eyebrow — the screenshot IS the
   statement. Tighter top padding than .hm-section because it visually
   continues the hero rather than starting a new chapter. */
.hive-mind-page .hm-section-showcase {
	background: var(--bg);
	padding: 56px 0 88px;
	border-bottom: 1px solid var(--line);
}
@media (min-width: 768px)  { .hive-mind-page .hm-section-showcase { padding: 72px 0 112px; } }
@media (min-width: 1024px) { .hive-mind-page .hm-section-showcase { padding: 88px 0 136px; } }

/* Caption sitting under the editor mockup. Instrument Serif italic in the
   brand's editorial-restraint mode — one short line stating what the user
   is looking at. Centered to match the editor visual above. */
.hive-mind-page .hm-showcase-caption {
	margin: 28px auto 0;
	max-width: 56ch;
	text-align: center;
	font-family: var(--f-italic);
	font-style: italic;
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.5;
	color: var(--fg-dim);
	text-wrap: pretty;
}
.hive-mind-page .hm-showcase-caption .hm-code {
	font-style: normal;
}

/* Connectors row — sits below the caption, below the editor mockup. Obsidian's
   homepage lists sync providers as a quiet, comma-separated tray; the same
   move scales to the marketing-stack connectors that drive Hive Mind's value
   prop. Quiet enough to not compete with the headline; specific enough that
   a reader pattern-matches their own stack and feels seen. */
.hive-mind-page .hm-connectors {
	margin: 36px auto 0;
	max-width: 920px;
	text-align: center;
	font-family: var(--f-mono);
	font-size: 11.5px;
	letter-spacing: 0.10em;
	line-height: 1.6;
	color: var(--fg-dim);
	text-transform: uppercase;
	text-wrap: balance;
}
.hive-mind-page .hm-connectors-label {
	font-weight: 600;
	color: var(--fg);
	margin-right: 10px;
	letter-spacing: 0.14em;
}

/* ── Three-column grids ────────────────────────────────────────────────── */

.hive-mind-page .hm-three-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px)  { .hive-mind-page .hm-three-col { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1024px) { .hive-mind-page .hm-three-col { gap: 40px; } }

/* ── Problem cards ─────────────────────────────────────────────────────── */

.hive-mind-page .hm-problem-card {
	padding: 28px 0;
	border-top: 1px solid var(--line);
}
.hive-mind-page .hm-problem-card .hm-problem-title {
	font-family: var(--f-serif);
	font-weight: 700;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--fg);
	margin: 8px 0 10px;
	max-width: 32ch;
}
.hive-mind-page .hm-problem-card p:not(.hm-mono-num) {
	font-size: 16px;
	line-height: 1.55;
	color: var(--fg-dim);
	max-width: 36ch;
	margin: 0;
}

.hive-mind-page .hm-closer {
	margin-top: 56px;
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.35;
	letter-spacing: -0.018em;
	color: var(--fg);
	max-width: 38ch;
}
.hive-mind-page .hm-closer em {
	font-family: var(--f-italic);
	font-style: italic;
	color: var(--accent-italic);
}

/* ── How it works · steps ──────────────────────────────────────────────── */

.hive-mind-page .hm-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.hive-mind-page .hm-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 24px;
	padding: 32px 0;
	border-top: 1px solid rgba(244, 239, 230, 0.10);
	align-items: start;
}
.hive-mind-page .hm-step:last-child { border-bottom: 1px solid rgba(244, 239, 230, 0.10); }
.hive-mind-page .hm-step-num {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--yellow);
	padding-top: 4px;
}
.hive-mind-page .hm-step-body p {
	font-size: 18px;
	line-height: 1.5;
	max-width: 60ch;
	color: var(--bone);
}
.hive-mind-page .hm-section-dark .hm-code {
	/* Symmetric with the light-mode chip: soft yellow tint background,
	   page-foreground text. Avoids the yellow-on-yellow highlighter
	   effect that was flagged in the critique. */
	background: rgba(243, 182, 28, 0.11);
	color: rgba(244, 239, 230, 0.92);
}

@media (min-width: 768px) {
	.hive-mind-page .hm-step { grid-template-columns: 96px 1fr; padding: 40px 0; }
	.hive-mind-page .hm-step-body p { font-size: 20px; }
}

/* ── What's in the box · 2-column skill / command catalog ─────────────── */

.hive-mind-page .hm-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}
@media (min-width: 900px) { .hive-mind-page .hm-two-col { grid-template-columns: 1fr 1fr; gap: 40px; } }

.hive-mind-page .hm-skill-group {
	padding: 32px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.hive-mind-page .hm-skill-group-head { display: flex; flex-direction: column; gap: 10px; }
.hive-mind-page .hm-skill-group-head .hm-mono-tag {
	background: var(--ink);
	color: var(--yellow);
	display: inline-block;
	width: max-content;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
}
.hive-mind-page .hm-skill-group-head .hm-h3 { margin: 0; }

/* Definition list of skill or command + one-line description. */
.hive-mind-page .hm-defs {
	margin: 0;
	display: flex;
	flex-direction: column;
}
.hive-mind-page .hm-def {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}
.hive-mind-page .hm-def:last-child { border-bottom: 1px solid var(--line); }
.hive-mind-page .hm-def dt {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 13px;
	line-height: 1.4;
}
.hive-mind-page .hm-def dt code {
	font-family: inherit;
	background: transparent;
	color: var(--fg);
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}
.hive-mind-page .hm-def dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-dim);
}

.hive-mind-page .hm-box-footnote {
	margin-top: 40px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--fg-dim);
	text-align: center;
}

/* ── Rules ─────────────────────────────────────────────────────────────── */

.hive-mind-page .hm-rules {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
}
@media (min-width: 768px)  { .hive-mind-page .hm-rules { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
@media (min-width: 1024px) { .hive-mind-page .hm-rules { column-gap: 88px; } }

.hive-mind-page .hm-rule {
	display: grid;
	gap: 8px;
	padding: 28px 0;
	border-top: 2px solid var(--ink);
}
.hive-mind-page .hm-rule dt {
	font-family: var(--f-serif);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--fg);
}
.hive-mind-page .hm-rule dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--fg-dim);
	max-width: 42ch;
}

/* ── Persona cards ─────────────────────────────────────────────────────── */

.hive-mind-page .hm-persona {
	padding: 32px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	min-height: 200px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hive-mind-page .hm-persona p:not(.hm-mono-tag) {
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--fg);
	max-width: 22ch;
}

/* ── Get Hive Mind ─────────────────────────────────────────────────────── */

.hive-mind-page .hm-section-get { padding: 96px 0 120px; }
@media (min-width: 1024px) { .hive-mind-page .hm-section-get { padding: 144px 0 160px; } }

.hive-mind-page .hm-get-container { max-width: 880px; }
.hive-mind-page .hm-get-headline {
	font-size: clamp(40px, 7vw, 88px);
	max-width: 16ch;
	margin-top: 16px;
}
.hive-mind-page .hm-get-headline em { color: var(--yellow); }
.hive-mind-page .hm-get-lead {
	color: rgba(244, 239, 230, 0.82);
	margin-top: 16px;
}

.hive-mind-page .hm-get-cta-wrap { margin-top: 44px; }

.hive-mind-page .hm-flow {
	list-style: none;
	margin: 56px 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.hive-mind-page .hm-flow li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	padding: 20px 0;
	border-top: 1px solid rgba(244, 239, 230, 0.10);
	align-items: start;
}
.hive-mind-page .hm-flow li:last-child { border-bottom: 1px solid rgba(244, 239, 230, 0.10); }
.hive-mind-page .hm-flow-num {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--yellow);
	padding-top: 4px;
}
.hive-mind-page .hm-flow p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--bone);
	max-width: 64ch;
}

.hive-mind-page .hm-footnote {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid rgba(244, 239, 230, 0.10);
	font-size: 13px;
	line-height: 1.6;
	color: rgba(244, 239, 230, 0.62);
	max-width: 68ch;
}
.hive-mind-page .hm-footnote em {
	font-family: var(--f-italic);
	font-style: italic;
	color: var(--yellow);
}

/* ── MailerLite waitlist form — brand override ─────────────────────────── */
/* The form is a third-party MailerLite embed (account 2445695) pasted    */
/* verbatim into templates/parts/hive-mind-waitlist-form.php. Its default */
/* skin ships in Open Sans with a black-pill Submit and 4px radii, which  */
/* breaks the brand at the conversion moment. These overrides re-skin     */
/* the embed: Fraunces heading, Inter body, brand-card wrapper, and the   */
/* primary Margin Yellow pill button matching .btn-primary.               */
/* Scoped under .hive-mind-page so they only fire on this template AND    */
/* outrank MailerLite's inline #mlb2 rules on specificity.                */

.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper {
	background: var(--card) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: 0 24px 60px -32px color-mix(in oklch, var(--ink) 38%, transparent) !important;
}
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
	padding: 32px !important;
}
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
	margin: 0 0 24px 0 !important;
}

/* Heading: Fraunces 400 editorial title, full ink on the white card. */
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
	font-family: var(--f-serif) !important;
	font-weight: 400 !important;
	font-size: 28px !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: var(--ink) !important;
	margin: 0 0 8px !important;
	text-wrap: balance;
}

/* Body copy: Inter, ink-dim on the white card. */
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
	font-family: var(--f-sans) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: rgba(11, 15, 14, 0.65) !important;
	margin: 0 !important;
}

/* Email input: brand .field-input treatment. */
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
	background-color: #ffffff !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 10px !important;
	font-family: var(--f-sans) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	padding: 12px 14px !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
}
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder { color: rgba(11, 15, 14, 0.45) !important; }
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder { color: rgba(11, 15, 14, 0.45) !important; }
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus {
	outline: none !important;
	border-color: var(--yellow) !important;
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--yellow) 22%, transparent) !important;
}

/* Submit: brand primary button — pill Margin Yellow with ink text and lift on hover. */
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
	margin: 0 !important;
	float: none !important;
}
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
	background: var(--yellow) !important;
	border: 1px solid transparent !important;
	border-radius: var(--radius-pill) !important;
	box-shadow: none !important;
	color: var(--ink) !important;
	font-family: var(--f-sans) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	padding: 14px 24px !important;
	width: 100% !important;
	transition: transform 0.15s, background 0.15s !important;
	cursor: pointer !important;
}
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
	background: var(--yellow) !important;
	transform: translateY(-1px) !important;
}
.hive-mind-page #mlb2-42613097.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible {
	outline: 2px solid var(--yellow) !important;
	outline-offset: 3px !important;
}

/* Loader ring: ink on the yellow button (was white-on-black). */
.hive-mind-page .ml-form-embedSubmitLoad:after {
	border-color: var(--ink) var(--ink) var(--ink) transparent !important;
}

/* ── Delight: MailerLite form success state celebration ────────────────── */
/* When the form submits, MailerLite's success body is shown (display swap).
   The h4 + p elements get a soft reveal — the conversion moment ends with a
   branded moment, not a generic snap-in. Peak-end-rule. */
.hive-mind-page #mlb2-42613097 .ml-form-successBody h4 {
	animation: hmSuccessRevealH 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.08s;
}
.hive-mind-page #mlb2-42613097 .ml-form-successBody p {
	animation: hmSuccessRevealP 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.28s;
}

@keyframes hmSuccessRevealH {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hmSuccessRevealP {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Motion preferences ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hive-mind-page * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}