/* ==========================================================================
   Soana home page
   --------------------------------------------------------------------------
   The front page used to be a stack of sections that each carried their own
   inline styles, so spacing, type scale, cards and buttons drifted apart from
   one section to the next. This sheet is the shared system they are rebuilt on:
   one rhythm, one type scale, one card, one button.

   The scroll-driven image-sequence hero is deliberately NOT styled here — it
   keeps its own markup and behaviour untouched.

   Colours come from the Customizer via the :root variables main.css sets
   (--teal-900/-700/-600/-500, --green, --green-300, --ink, --light), so a
   colour change in the admin still flows through everything below.
   ========================================================================== */

:root {
	/* Vertical rhythm — one scale, so no section invents its own padding. */
	--s-pad: clamp(60px, 7vw, 104px);
	--s-pad-tight: clamp(44px, 5vw, 76px);
	--s-gap: clamp(28px, 3.4vw, 56px);
	--wrap: 1240px;
	--gutter: clamp(20px, 6vw, 64px);

	/* Corners + elevation. */
	/* --r-scale comes from Customize → Typography & Shape (1 = theme default). */
	--r-sm: calc(14px * var(--r-scale, 1));
	--r-md: calc(20px * var(--r-scale, 1));
	--r-lg: calc(26px * var(--r-scale, 1));
	--r-xl: calc(34px * var(--r-scale, 1));
	--r-pill: 999px;

	--sh-card: 0 2px 18px rgba(var(--teal-accent-rgb, 27, 154, 170), .07);
	--sh-lift: 0 18px 46px rgba(var(--teal-accent-rgb, 27, 154, 170), .16);
	--sh-dark: 0 24px 64px rgba(0, 0, 0, .3);

	/* Hairlines, light ground and dark ground. */
	--line: rgba(var(--ink-rgb, 26, 37, 53), .09);
	--line-dark: rgba(255, 255, 255, .12);
	--on-dark: rgba(255, 255, 255, .62);
	--on-dark-soft: rgba(255, 255, 255, .45);

	/* The accents the four merged pages came with (see soana-pages.css). Both
	   are mixed for LIGHT grounds: --sg is a deep green, not the brand --green,
	   which is tuned for the dark hero and drops to ~1.8:1 contrast on these
	   light sections. --vi is the AI path's violet. */
	--sg: #16794f;
	--sg-2: #0f5c3c;
	--sg-soft: #eaf7ef;
	--vi: #6c4ce0;
	--vi-2: #5a3bd0;
	--vi-soft: #f1ecff;

	/* Kept as the names the section rules already use. */
	--violet: var(--vi);
	--violet-soft: var(--vi-soft);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

.soana-s {
	position: relative;
	padding: var(--s-pad) 0;
	background: var(--light);
	overflow: hidden;
}

/* Alternating grounds keep a long page readable without extra dividers. */
.soana-s.is-plain { background: #fff; }

/* Consecutive sections on the same ground would otherwise stack two full pads
   into one seam, which reads as a gap rather than a break. */
.soana-s + .soana-s:not(.is-dark):not(.is-plain) { padding-top: var(--s-pad-tight); }
.soana-s:not(.is-dark):not(.is-plain) + .soana-s:not(.is-dark):not(.is-plain) { padding-top: var(--s-pad-tight); }

.soana-s.is-dark {
	background: var(--teal-900);
	color: #fff;
}

/* One soft glow per dark section, placed with a modifier rather than a div. */
.soana-s.is-dark::before {
	content: "";
	position: absolute;
	inset-block-start: -220px;
	inset-inline-end: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--green-rgb), .12), transparent 70%);
	pointer-events: none;
}

.soana-wrap {
	position: relative;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Section header
   -------------------------------------------------------------------------- */

.soana-s-head {
	max-width: 740px;
	margin: 0 auto clamp(40px, 5vw, 72px);
	text-align: center;
}

.soana-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 7px 16px;
	border: 1px solid rgba(var(--teal-accent-rgb, 27, 154, 170), .2);
	border-radius: var(--r-pill);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .07);
	color: var(--teal-700);
	font-size: var(--fs-kicker, 13px);
	font-weight: 700;
	letter-spacing: .04em;
}

.soana-kicker i,
.soana-kicker svg { width: 15px; height: 15px; flex: none; }

.soana-kicker.is-on-dark,
.is-dark .soana-kicker {
	border-color: rgba(var(--green-rgb), .28);
	background: rgba(var(--green-rgb), .1);
	color: var(--green-300);
}

.soana-s-title {
	margin: 0;
	font-size: var(--fs-h2, clamp(28px, 4vw, 52px));
	font-weight: var(--fw-head, 900);
	line-height: 1.12;
	letter-spacing: var(--ls-head, -1.5px);
	color: var(--teal-700);
	text-wrap: balance;
}

.is-dark .soana-s-title { color: #fff; }

.soana-s-sub {
	margin: 18px auto 0;
	max-width: 60ch;
	font-size: var(--fs-sub, clamp(15px, 1.15vw, 17px));
	line-height: var(--lh-body, 1.95);
	color: rgba(var(--ink-rgb, 26, 37, 53), .68);
	text-wrap: pretty;
}

.is-dark .soana-s-sub { color: var(--on-dark); }

.soana-s-foot {
	margin-top: clamp(36px, 4vw, 56px);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.soana-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.soana-btn i,
.soana-btn svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
.soana-btn:hover { transform: translateY(-2px); }
.soana-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.soana-btn-lg { padding: 17px 42px; font-size: 17px; }

.soana-btn-green {
	background: linear-gradient(135deg, var(--green), var(--green-600));
	color: var(--teal-900);
	box-shadow: 0 10px 28px rgba(var(--green-rgb), .32);
}
.soana-btn-green:hover { box-shadow: 0 16px 38px rgba(var(--green-rgb), .42); }

.soana-btn-violet {
	background: var(--violet);
	color: #fff;
	box-shadow: 0 10px 28px rgba(108, 76, 224, .3);
}
.soana-btn-violet:hover { box-shadow: 0 16px 38px rgba(108, 76, 224, .4); }

.soana-btn-ghost {
	border-color: rgba(var(--teal-accent-rgb, 27, 154, 170), .22);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .05);
	color: var(--teal-700);
}
.soana-btn-ghost:hover { background: rgba(var(--teal-accent-rgb, 27, 154, 170), .1); }

.soana-btn-outline {
	border-color: var(--line-dark);
	background: rgba(255, 255, 255, .06);
	color: #fff;
}
.soana-btn-outline:hover { background: rgba(255, 255, 255, .12); }

/* The green button is shared by dark sections (hero, CTA, join network, the
   start-journey panel) and by the light merged sections. On dark the brand's
   bright --green is right; on a light ground it needs the deep green the
   original page used, so the light sections are scoped out here rather than
   the button being changed for everyone. */
.soana-s-path .soana-btn-green,
.soana-s-news .soana-btn-green {
	background: linear-gradient(135deg, var(--sg), var(--sg-2));
	color: #fff;
	box-shadow: 0 12px 26px rgba(15, 92, 60, .26);
}
.soana-s-path .soana-btn-green:hover,
.soana-s-news .soana-btn-green:hover { box-shadow: 0 16px 34px rgba(15, 92, 60, .34); }

/* Same reason for the accent word in a section heading: main.css paints
   .soana-accent with --green, which reads at ~1.8:1 on these light grounds. */
.soana-s-path .soana-accent,
.soana-s-news .soana-accent { color: var(--sg); }

/* --------------------------------------------------------------------------
   Badges + cards
   -------------------------------------------------------------------------- */

.soana-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid currentColor;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.soana-badge.is-green  { color: var(--sg); background: var(--sg-soft); }
.soana-badge.is-teal   { color: var(--teal-500); background: rgba(0, 158, 181, .1); }
.soana-badge.is-violet { color: var(--violet); background: var(--violet-soft); }
.soana-badge.is-orange { color: #c2701a; background: rgba(224, 138, 42, .12); }
.soana-badge.is-blue   { color: #2b6cb0; background: rgba(43, 108, 176, .1); }

.soana-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card);
	transition: transform .25s ease, box-shadow .25s ease;
}

.soana-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }

.is-dark .soana-card {
	background: rgba(255, 255, 255, .07);
	border-color: var(--line-dark);
	box-shadow: none;
	color: #fff;
}

/* Shared responsive grids. */
.soana-grid { display: grid; gap: var(--s-gap); }
.soana-g2 { grid-template-columns: repeat(2, 1fr); }
.soana-g3 { grid-template-columns: repeat(3, 1fr); }
.soana-g4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   Section: what's new — the live feed
   ========================================================================== */

.soana-news-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 2vw, 26px);
	margin-bottom: clamp(32px, 4vw, 56px);
}

.soana-news-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card);
	transition: transform .25s ease, box-shadow .25s ease;
}

.soana-news-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }

.soana-news-card-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--teal-600), var(--teal-900));
}

.soana-news-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.soana-news-card:hover .soana-news-card-media img { transform: scale(1.05); }

.soana-news-card-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, .5);
}

.soana-news-card-fallback i,
.soana-news-card-fallback svg { width: 42px; height: 42px; }

.soana-news-card-media .soana-badge {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	border-color: transparent;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
}

.soana-news-card-body { padding: 22px 24px 26px; }

.soana-news-card-body h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
}

.soana-news-card-body h3 a { color: var(--teal-700); text-decoration: none; }
.soana-news-card-body h3 a:hover { color: var(--teal-500); }

.soana-news-card-body p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.9;
	color: rgba(var(--ink-rgb, 26, 37, 53), .68);
}

.soana-news-card-meta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(var(--ink-rgb, 26, 37, 53), .5);
}

.soana-news-card-meta i,
.soana-news-card-meta svg { width: 14px; height: 14px; flex: none; }

/* ── the feed panel ── */

.soana-news-panel {
	padding: clamp(18px, 2.4vw, 30px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-card);
}

.soana-news-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 18px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.soana-news-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: transparent;
	color: rgba(var(--ink-rgb, 26, 37, 53), .6);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.soana-news-tab i,
.soana-news-tab svg { width: 15px; height: 15px; flex: none; }
.soana-news-tab:hover { background: rgba(var(--teal-accent-rgb, 27, 154, 170), .07); color: var(--teal-700); }

.soana-news-tab.is-active {
	border-color: rgba(var(--teal-accent-rgb, 27, 154, 170), .22);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .1);
	color: var(--teal-700);
}

.soana-news-feed { margin: 0; padding: 0; list-style: none; }

.soana-news-feed > li {
	display: grid;
	grid-template-columns: 56px auto 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 16px 6px;
	border-bottom: 1px solid var(--line);
}

.soana-news-feed > li:last-child { border-bottom: 0; }

/* The filter toggles [hidden] on the rows, and "display: grid" above would beat
   the user-agent rule for it, so the row must be hidden explicitly. */
.soana-news-feed > li[hidden] { display: none; }

.soana-news-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .08);
	color: var(--teal-500);
}

.soana-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.soana-news-thumb i,
.soana-news-thumb svg { width: 22px; height: 22px; }

.soana-news-type {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.soana-news-type i,
.soana-news-type svg { width: 13px; height: 13px; flex: none; }
.soana-news-type.is-green  { color: var(--sg); background: var(--sg-soft); }
.soana-news-type.is-teal   { color: var(--teal-500); background: rgba(0, 158, 181, .1); }
.soana-news-type.is-orange { color: #c2701a; background: rgba(224, 138, 42, .12); }
.soana-news-type.is-blue   { color: #2b6cb0; background: rgba(43, 108, 176, .1); }

.soana-news-text { min-width: 0; }

.soana-news-text b {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 800;
	color: var(--teal-700);
}

.soana-news-text small {
	display: block;
	font-size: 13px;
	line-height: 1.8;
	color: rgba(var(--ink-rgb, 26, 37, 53), .58);
	/* Long blurbs must not push the row action off the grid. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.soana-news-end {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
}

.soana-news-end time {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(var(--ink-rgb, 26, 37, 53), .45);
}

.soana-news-go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid rgba(var(--teal-accent-rgb, 27, 154, 170), .2);
	border-radius: var(--r-pill);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .05);
	color: var(--teal-700);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease;
}

.soana-news-go:hover { background: rgba(var(--teal-accent-rgb, 27, 154, 170), .12); }
.soana-news-go i,
.soana-news-go svg { width: 14px; height: 14px; flex: none; }

.soana-news-empty {
	margin: 24px 0 8px;
	text-align: center;
	font-size: 14px;
	color: rgba(var(--ink-rgb, 26, 37, 53), .5);
}

/* ==========================================================================
   Section: choose your path
   ========================================================================== */

.soana-path-head {
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	gap: var(--s-gap);
	align-items: center;
	max-width: none;
	text-align: start;
}

.soana-path-head .soana-s-sub { margin-inline: 0; }

.soana-path-sprout {
	width: 34px;
	height: 34px;
	margin-bottom: 16px;
	color: var(--sg);
}

.soana-path-portrait img,
.soana-path-portrait .soana-img-placeholder {
	width: 100%;
	max-width: 320px;
	margin-inline-start: auto;
	border-radius: var(--r-xl);
}

.soana-path-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 30px);
	margin-bottom: clamp(36px, 4vw, 60px);
}

.soana-path-card {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 38px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-card);
	transition: transform .25s ease, box-shadow .25s ease;
}

.soana-path-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.soana-path-card.is-self { border-top: 3px solid var(--sg); }
.soana-path-card.is-ai   { border-top: 3px solid var(--violet); }

.soana-path-card > header {
	display: flex;
	align-items: flex-start;
    justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.soana-path-card h3 {
	margin: 12px 0 0;
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 900;
	line-height: 1.35;
	color: var(--teal-700);
}

.soana-path-card.is-ai h3 { color: var(--violet); }

.soana-path-art {
	flex: none;
	display: block;
	width: 88px;
}

.soana-path-art img,
.soana-path-art .soana-img-placeholder {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--r-md);
}

.soana-path-art.is-round img,
.soana-path-art.is-round .soana-img-placeholder { border-radius: 50%; }

.soana-path-card > p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.95;
	color: rgba(var(--ink-rgb, 26, 37, 53), .7);
}

.soana-path-feats {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.soana-path-feats li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 16px;
	border: 1px solid rgba(96, 206, 128, .22);
	border-radius: var(--r-sm);
	background: rgba(96, 206, 128, .07);
	font-size: 14px;
	font-weight: 600;
	color: rgba(var(--ink-rgb, 26, 37, 53), .74);
}

.soana-path-feats.is-violet li {
	border-color: rgba(108, 76, 224, .2);
	background: var(--violet-soft);
}

.soana-path-feats i,
.soana-path-feats svg { width: 17px; height: 17px; flex: none; color: var(--sg); }
.soana-path-feats.is-violet i,
.soana-path-feats.is-violet svg { color: var(--violet); }

.soana-path-card .soana-btn { margin-top: auto; align-self: flex-start; }

/* ── topic picker ── */

.soana-topics {
	padding: clamp(26px, 3vw, 40px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-card);
	text-align: center;
}

.soana-topics h3 {
	margin: 0 0 24px;
	font-size: clamp(19px, 2vw, 25px);
	font-weight: 800;
	color: var(--teal-700);
}

.soana-topic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.soana-topic {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--light);
	color: var(--teal-700);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.soana-topic:hover {
	border-color: rgba(var(--teal-accent-rgb, 27, 154, 170), .35);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .07);
	transform: translateY(-2px);
}

.soana-topic i,
.soana-topic svg { width: 19px; height: 19px; flex: none; color: var(--teal-500); }
.soana-topic.is-wide { justify-content: center; background: transparent; }

/* ── trust bar ── */

.soana-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(16px, 2vw, 26px);
	margin-top: clamp(36px, 4vw, 56px);
}

.soana-trust > div {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.soana-trust > div > i,
.soana-trust > div > svg {
	flex: none;
	width: 38px;
	height: 38px;
	padding: 9px;
	border-radius: var(--r-sm);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .09);
	color: var(--teal-500);
}

.soana-trust b {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 800;
	color: var(--teal-700);
}

.soana-trust span {
	display: block;
	font-size: 13.5px;
	line-height: 1.8;
	color: rgba(var(--ink-rgb, 26, 37, 53), .6);
}

/* ==========================================================================
   Section: join the professional network
   ========================================================================== */

.soana-join-hero {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: var(--s-gap);
	align-items: center;
	margin-bottom: clamp(44px, 5vw, 76px);
}

.soana-join-photo img,
.soana-join-photo .soana-img-placeholder {
	width: 100%;
	border-radius: var(--r-xl);
}

.soana-join-copy .soana-s-title { font-size: clamp(26px, 3.4vw, 44px); }
.soana-join-copy .soana-s-sub { margin-inline: 0; }

.soana-join-stat {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 20px 0 0;
	padding: 11px 18px;
	border: 1px solid rgba(var(--green-rgb), .28);
	border-radius: var(--r-pill);
	background: rgba(var(--green-rgb), .1);
	color: var(--green-300);
	font-size: 14px;
	font-weight: 700;
}

.soana-join-stat i,
.soana-join-stat svg { width: 16px; height: 16px; flex: none; }

.soana-join-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.soana-join-pillars {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.soana-join-pillars li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px;
	border: 1px solid var(--line-dark);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .06);
}

.soana-join-pillar-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(var(--green-rgb), .32);
	border-radius: var(--r-sm);
	background: rgba(var(--green-rgb), .14);
	color: var(--green);
}

.soana-join-pillar-icon i,
.soana-join-pillar-icon svg { width: 20px; height: 20px; }

.soana-join-pillars b {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	line-height: 1.6;
}

.soana-join-pillars span {
	display: block;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--on-dark-soft);
}

.soana-join-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(18px, 2vw, 26px);
}

.soana-join-card {
	padding: 26px;
	border: 1px solid var(--line-dark);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .05);
}

.soana-join-card > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line-dark);
}

.soana-join-card h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
}

.soana-join-card > header i,
.soana-join-card > header svg { width: 22px; height: 22px; flex: none; color: var(--green); }

.soana-join-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.soana-join-card li {
	position: relative;
	padding-inline-start: 20px;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--on-dark);
}

.soana-join-card li::before {
	content: "";
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
}

.soana-join-card.is-process p {
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.85;
	color: var(--on-dark-soft);
}

.soana-join-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.soana-join-steps li {
	flex: 1 1 76px;
	text-align: center;
}

.soana-join-steps span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0 auto 8px;
	border: 1px solid rgba(var(--green-rgb), .3);
	border-radius: 50%;
	background: rgba(var(--green-rgb), .12);
	color: var(--green);
}

.soana-join-steps span i,
.soana-join-steps span svg { width: 18px; height: 18px; }

.soana-join-steps small {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--on-dark);
}

.soana-join-note {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	max-width: 900px;
	margin: clamp(32px, 4vw, 52px) auto 0;
	padding: 20px 24px;
	border: 1px solid var(--line-dark);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .04);
	font-size: 14px;
	line-height: 1.95;
	color: var(--on-dark);
}

.soana-join-note i,
.soana-join-note svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--green); }

/* ==========================================================================
   Section: start your journey
   ========================================================================== */

.soana-s-start { padding-block: var(--s-pad-tight); }

.soana-start-panel {
	position: relative;
	overflow: hidden;
	padding: clamp(52px, 7vw, 96px) var(--gutter);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-xl);
	background: linear-gradient(150deg, var(--teal-600), var(--teal-900));
	background-size: cover;
	background-position: center;
	text-align: center;
}

.soana-start-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 44px 44px;
}

.soana-start-inner { position: relative; max-width: 640px; margin: 0 auto; }

.soana-start-kicker {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--green-300);
}

.soana-start-panel h2 {
	margin: 0;
	font-size: clamp(27px, 4.2vw, 52px);
	font-weight: 950;
	line-height: 1.12;
	letter-spacing: -1.5px;
	color: #fff;
	text-wrap: balance;
}

.soana-start-panel p {
	margin: 20px auto 34px;
	max-width: 46ch;
	font-size: 16.5px;
	line-height: 1.9;
	color: var(--on-dark);
}

.soana-start-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	color: rgba(255, 255, 255, .72);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.soana-start-link:hover { color: #fff; }
.soana-start-link i,
.soana-start-link svg { width: 15px; height: 15px; flex: none; }

/* ==========================================================================
   Redesigned legacy sections
   ========================================================================== */

/* ── marquee ── */
.soana-marquee {
	padding: 16px 0;
	background: var(--teal-900);
	border-block: 1px solid var(--line-dark);
	overflow: hidden;
	white-space: nowrap;
	direction: ltr;
}

.soana-marquee-track {
	display: inline-flex;
	align-items: center;
	gap: 52px;
	animation: marqRtl var(--marquee-speed, 26s) linear infinite;
}

.soana-marquee-track span { color: rgba(255, 255, 255, .42); font-size: 14px; font-weight: 700; }
.soana-marquee-track em { color: var(--green); font-style: normal; }

/* ── tests grid ── */
.soana-tests-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 2vw, 24px);
}

/* ── AI steps ── */
.soana-ai-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(16px, 2vw, 22px);
}

.soana-ai-step {
	position: relative;
	overflow: hidden;
	padding: 30px;
	border: 1px solid var(--line-dark);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .07);
}

.soana-ai-step-ghost {
	position: absolute;
	inset-block-start: -12px;
	inset-inline-end: -6px;
	font-size: 108px;
	font-weight: 950;
	line-height: 1;
	color: rgba(255, 255, 255, .05);
	user-select: none;
	pointer-events: none;
}

.soana-ai-step-num {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border: 1.5px solid rgba(var(--green-rgb), .4);
	border-radius: 50%;
	color: var(--green);
	font-size: 19px;
	font-weight: 900;
}

.soana-ai-step h3 {
	position: relative;
	margin: 0 0 11px;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
}

.soana-ai-step p {
	position: relative;
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--on-dark-soft);
}

/* ── packages ── */
.soana-pack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 2vw, 24px);
}

.soana-pack {
	position: relative;
	overflow: hidden;
	padding: 36px;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: #fff;
	box-shadow: var(--sh-card);
	transition: transform .25s ease, box-shadow .25s ease;
}

.soana-pack:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }

.soana-pack.is-featured {
	border-color: rgba(var(--green-rgb), .3);
	background: linear-gradient(140deg, var(--teal-600), var(--teal-900));
	box-shadow: 0 20px 50px rgba(var(--teal-accent-rgb, 27, 154, 170), .18);
}

.soana-pack-ribbon {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 20px;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	background: var(--green);
	color: var(--teal-900);
	font-size: 11px;
	font-weight: 800;
}

.soana-pack-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 22px;
	border: 1px solid rgba(var(--teal-accent-rgb, 27, 154, 170), .16);
	border-radius: var(--r-sm);
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .08);
	color: var(--teal-500);
}

.soana-pack.is-featured .soana-pack-icon {
	border-color: rgba(var(--green-rgb), .3);
	background: rgba(var(--green-rgb), .15);
	color: var(--green);
}

.soana-pack-icon i,
.soana-pack-icon svg { width: 22px; height: 22px; }

/* A bundle can carry uploaded artwork instead of an icon. */
.soana-pack-cover {
	display: block;
	margin-bottom: 22px;
	border-radius: var(--r-sm);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: rgba(var(--teal-accent-rgb, 27, 154, 170), .08);
}

.soana-pack-cover img { width: 100%; height: 100%; object-fit: cover; }

a.soana-pack { text-decoration: none; display: block; }

.soana-pack h3 {
	margin: 0 0 11px;
	font-size: 22px;
	font-weight: 900;
	color: var(--teal-700);
}

.soana-pack p {
	margin: 0;
	min-height: 76px;
	font-size: 14.5px;
	line-height: 1.9;
	color: rgba(var(--ink-rgb, 26, 37, 53), .7);
}

.soana-pack.is-featured h3 { color: #fff; }
.soana-pack.is-featured p { color: var(--on-dark-soft); }

.soana-pack-foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	font-weight: 700;
	color: #3db066;
}

.soana-pack.is-featured .soana-pack-foot { border-top-color: rgba(255, 255, 255, .12); color: var(--green); }

/* ── consult ── */
.soana-consult {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(30px, 4vw, 68px);
	align-items: center;
}

.soana-consult-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.soana-consult-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	border: 1px solid var(--line-dark);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .07);
	font-size: 14px;
	font-weight: 600;
	color: var(--on-dark);
}

.soana-consult-list i,
.soana-consult-list svg {
	flex: none;
	width: 24px;
	height: 24px;
	padding: 4px;
	border: 1px solid rgba(var(--green-rgb), .4);
	border-radius: 50%;
	background: rgba(var(--green-rgb), .2);
	color: var(--green);
}

.soana-chat {
	padding: 26px;
	border: 1px solid var(--line-dark);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .08);
	box-shadow: var(--sh-dark);
}

.soana-chat-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.soana-chat-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(var(--green-rgb), .35);
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(var(--green-rgb), .3), rgba(var(--green-rgb), .12));
	color: var(--green);
	font-size: 11px;
	font-weight: 800;
}

.soana-chat-avatar.has-image { padding: 0; overflow: hidden; background: none; }
.soana-chat-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.soana-chat-head b { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.soana-chat-head small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--green); }

.soana-chat-log { display: flex; flex-direction: column; gap: 11px; }

.soana-chat-log p {
	max-width: 78%;
	margin: 0;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.75;
}

.soana-chat-log .is-me {
	align-self: flex-end;
	border: 1px solid rgba(var(--green-rgb), .3);
	border-radius: 16px 16px 5px 16px;
	background: rgba(var(--green-rgb), .18);
	color: var(--green);
}

.soana-chat-log .is-bot {
	align-self: flex-start;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px 16px 16px 5px;
	background: rgba(255, 255, 255, .06);
	color: var(--on-dark);
}

/* ── closing CTA ── */
.soana-cta-panel {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, 7vw, 92px) var(--gutter);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-xl);
	background: linear-gradient(135deg, var(--teal-600), var(--teal-900));
	text-align: center;
}

.soana-cta-panel::before {
	content: "";
	position: absolute;
	inset-block-start: -200px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--green-rgb), .25), transparent 70%);
	pointer-events: none;
}

.soana-cta-inner { position: relative; max-width: 640px; margin: 0 auto; }

.soana-cta-inner h2 {
	margin: 0;
	font-size: clamp(27px, 4.2vw, 52px);
	font-weight: 950;
	line-height: 1.08;
	letter-spacing: -1.8px;
	color: #fff;
	text-wrap: balance;
}

.soana-cta-inner p {
	margin: 20px auto 34px;
	max-width: 46ch;
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--on-dark);
}


/* ── section header with an action on the opposite side ── */
.soana-s-head.is-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	max-width: none;
	text-align: start;
}

.soana-s-head.is-row .soana-s-sub { margin-inline: 0; }

/* ── magazine ── */
.soana-mag-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 2vw, 24px);
}

.soana-mag-card {
	display: block;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.soana-mag-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }

.soana-mag-cover {
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, var(--teal-600), var(--teal-900));
	overflow: hidden;
}

.soana-mag-cover img { width: 100%; height: 100%; object-fit: cover; }

.soana-mag-body { padding: 24px; }

.soana-mag-cat {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	color: #3db066;
}

.soana-mag-body h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.65;
	color: var(--teal-700);
}

.soana-mag-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 700;
	color: rgba(var(--ink-rgb, 26, 37, 53), .58);
}

.soana-mag-more i,
.soana-mag-more svg { width: 14px; height: 14px; flex: none; }

/* ── video showcase ── */
.soana-video {
	position: relative;
	height: clamp(460px, 78vh, 760px);
	overflow: hidden;
	background: #0b2d35;
}

.soana-video-bg,
.soana-video-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.soana-video-bg.is-blank {
	background: radial-gradient(ellipse at 50% 40%, var(--teal-600), var(--teal-900) 70%);
}

.soana-video-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(3, 5, 8, .55) 0%, rgba(3, 5, 8, .25) 50%, rgba(3, 5, 8, .72) 100%);
}

.soana-video-play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	text-decoration: none;
}

.soana-video-ring {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border: 1.5px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(18px);
	color: #fff;
	transition: transform .25s ease, background-color .25s ease;
}

.soana-video-play:hover .soana-video-ring { transform: scale(1.06); background: rgba(255, 255, 255, .2); }
.soana-video-ring i,
.soana-video-ring svg { width: 34px; height: 34px; }

.soana-video-ring::before {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	animation: pingDot 2.5s infinite;
}

.soana-video-play b { font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.soana-video-play small { font-size: 14px; color: rgba(255, 255, 255, .55); }

.soana-video-foot {
	position: absolute;
	inset-block-end: clamp(28px, 5vw, 56px);
	inset-inline: 0;
	padding-inline: var(--gutter);
}

.soana-video-foot > div {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	max-width: var(--wrap);
	margin-inline: auto;
}

.soana-video-foot small {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, .45);
}

.soana-video-foot b {
	display: block;
	max-width: 480px;
	font-size: clamp(20px, 2.4vw, 32px);
	font-weight: 800;
	line-height: 1.35;
	color: #fff;
}

.soana-video-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.soana-video-link i,
.soana-video-link svg { width: 14px; height: 14px; flex: none; }

@media (prefers-reduced-motion: reduce) {
	.soana-video-ring::before { animation: none; }
	.soana-mag-card:hover { transform: none; }
	.soana-video-play:hover .soana-video-ring { transform: none; }
}


/* ==========================================================================
   Hero
   (The scroll-driven image sequence above it keeps its own markup and styles.)
   ========================================================================== */

.soana-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
	background: var(--teal-900);
}

/* Atmosphere: a top scrim, a receding grid floor and two vignettes. Each is a
   pseudo-element or a single decorative span, so the markup stays readable. */
.soana-hero::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 62vh;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, #070a10 0%, rgba(7, 10, 16, .6) 28%, rgba(var(--teal-900-rgb), .18) 64%, transparent 100%);
}

.soana-hero::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 55%;
	pointer-events: none;
	background: linear-gradient(to top, var(--teal-900) 40%, transparent);
}

.soana-hero-floor {
	position: absolute;
	inset-block-end: -2px;
	inset-inline: -60%;
	height: 130vh;
	pointer-events: none;
	transform: perspective(480px) rotateX(74deg);
	transform-origin: bottom center;
	background-image:
		linear-gradient(rgba(var(--green-rgb), .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--green-rgb), .06) 1px, transparent 1px);
	background-size: 80px 80px;
	animation: gridMove 5s linear infinite;
}

.soana-hero-orb {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 2%;
	width: 640px;
	height: 640px;
	pointer-events: none;
	animation: orbPulse 10s ease-in-out infinite;
	will-change: transform;
}

.soana-hero-orb span {
	position: absolute;
	border-radius: 50%;
}

.soana-hero-orb span:nth-child(1) {
	inset: 0;
	background: radial-gradient(circle at 38% 36%, rgba(var(--green-rgb), .28) 0%, transparent 68%);
}
.soana-hero-orb span:nth-child(2) { inset: 80px;  border: 1px solid rgba(var(--green-rgb), .1); }
.soana-hero-orb span:nth-child(3) { inset: 150px; border: 1px solid rgba(var(--green-rgb), .07); }
.soana-hero-orb span:nth-child(4) { inset: 220px; border: 1px solid rgba(var(--green-rgb), .05); }

.soana-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr .95fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
	width: 100%;
	max-width: 1300px;
	margin-inline: auto;
	padding: clamp(120px, 14vh, 160px) var(--gutter) clamp(80px, 10vh, 110px);
	will-change: transform, opacity;
}

.soana-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	padding: 8px 18px;
	border: 1px solid rgba(var(--green-rgb), .18);
	border-radius: var(--r-pill);
	background: rgba(var(--green-rgb), .07);
	color: var(--green-300);
	font-size: 13px;
	font-weight: 600;
	animation: fadeUp .7s .1s both;
}

.soana-hero-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	animation: pingDot 2.2s infinite;
}

/* Hero artwork uploaded from the Customizer, in place of the glass cards. */
.soana-hero-art-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.soana-hero-art-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-xl);
	animation: floatY 6s ease-in-out infinite;
}

.soana-hero-title {
	margin: 0;
	font-size: var(--fs-hero, clamp(44px, 5.8vw, 92px));
	font-weight: var(--fw-hero, 950);
	line-height: 1.04;
	letter-spacing: -2.5px;
	color: #fff;
	animation: fadeUp .7s .25s both;
}

.soana-hero-title span { display: block; }

.soana-hero-lede {
	max-width: 500px;
	margin: 28px 0 0;
	font-size: var(--fs-lede, clamp(15px, 1.25vw, 18px));
	line-height: var(--lh-body, 2);
	color: rgba(255, 255, 255, .62);
	animation: fadeUp .7s .4s both;
	text-wrap: pretty;
}

.soana-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
	animation: fadeUp .7s .54s both;
}

.soana-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 3.4vw, 44px);
	margin-top: 48px;
	padding-top: 34px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	animation: fadeUp .7s .68s both;
}

.soana-hero-stats b {
	display: block;
	font-size: clamp(24px, 2.4vw, 38px);
	font-weight: 950;
	line-height: 1;
	letter-spacing: -1.5px;
	color: #fff;
}

.soana-hero-stats small {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .48);
}

.soana-hero-art { position: relative; height: 640px; }

.soana-hero-scroll {
	position: absolute;
	inset-block-end: 34px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, .55);
	font-size: 12px;
	font-weight: 500;
}

.soana-hero-scroll span {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 22px;
	height: 38px;
	padding-top: 6px;
	border: 2px solid rgba(var(--green-rgb), .25);
	border-radius: var(--r-pill);
}

.soana-hero-scroll span::before {
	content: "";
	width: 4px;
	height: 10px;
	border-radius: var(--r-pill);
	background: var(--green);
	box-shadow: 0 0 8px rgba(var(--green-rgb), .6);
	animation: scrollBounce 1.6s ease-in-out infinite;
}

@media (max-width: 980px) {
	.soana-hero-inner { grid-template-columns: 1fr; }
	.soana-hero-art { display: none; }
	.soana-hero { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.soana-hero-floor,
	.soana-hero-orb,
	.soana-hero-badge::before,
	.soana-hero-scroll span::before { animation: none; }
	.soana-hero-badge,
	.soana-hero-title,
	.soana-hero-lede,
	.soana-hero-actions,
	.soana-hero-stats { animation: none; }
}


/* ==========================================================================
   Section artwork
   The merged sections carry their own images. Until one is uploaded they show a
   labelled placeholder that holds the real image's footprint, so the layout
   reads correctly before any photography exists.
   ========================================================================== */

.soana-page-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.soana-img-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	min-height: 90px;
	padding: 14px;
	box-sizing: border-box;
	border: 1.5px dashed rgba(var(--teal-accent-rgb, 27, 154, 170), .38);
	border-radius: var(--r-md);
	background: linear-gradient(135deg, rgba(var(--teal-500-rgb), .09), rgba(var(--green-rgb), .12));
	color: rgba(var(--ink-rgb, 26, 37, 53), .55);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.soana-img-placeholder i,
.soana-img-placeholder svg { width: 24px; height: 24px; stroke-width: 1.8; opacity: .65; }

.is-dark .soana-img-placeholder {
	border-color: rgba(var(--green-rgb), .28);
	background: linear-gradient(135deg, rgba(var(--green-rgb), .09), rgba(255, 255, 255, .03));
	color: rgba(255, 255, 255, .55);
}

.soana-path-portrait img,
.soana-path-art img,
.soana-join-photo img { display: block; }

/* Per-slot footprints, so an empty slot reserves the space the photo will take. */
.soana-path-portrait .soana-page-img,
.soana-path-portrait .soana-img-placeholder { border-radius: var(--r-xl); min-height: 280px; }

.soana-join-photo .soana-page-img,
.soana-join-photo .soana-img-placeholder { border-radius: var(--r-xl); min-height: 300px; }

.soana-path-art .soana-page-img,
.soana-path-art .soana-img-placeholder { min-height: 88px; }

/* A slot with no visible label is decorative — keep it compact. */
.soana-path-art .soana-img-placeholder { padding: 8px; gap: 0; }
.soana-path-art .soana-img-placeholder i,
.soana-path-art .soana-img-placeholder svg { width: 26px; height: 26px; }

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

@media (max-width: 1024px) {
	.soana-path-head,
	.soana-join-hero { grid-template-columns: 1fr; }
	.soana-path-portrait { display: none; }
	.soana-join-photo { max-width: 380px; }
	.soana-g4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.soana-path-grid { grid-template-columns: 1fr; }

	/* The feed becomes a stacked card: thumb + text, with the meta beneath. */
	.soana-news-feed > li {
		grid-template-columns: 48px 1fr;
		grid-template-areas:
			"thumb text"
			"type  end";
		gap: 12px 14px;
	}
	.soana-news-thumb { grid-area: thumb; width: 48px; height: 48px; }
	.soana-news-text  { grid-area: text; }
	.soana-news-type  { grid-area: type; justify-self: start; }
	.soana-news-end   { grid-area: end; justify-content: flex-end; }
}

@media (max-width: 640px) {
	.soana-g2, .soana-g3, .soana-g4 { grid-template-columns: 1fr; }
	.soana-news-panel { padding: 16px 14px; }
	.soana-news-feed > li { padding: 14px 2px; }
	.soana-join-actions .soana-btn { width: 100%; }
	.soana-btn { padding: 13px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.soana-marquee-track { animation: none; }
	.soana-card:hover,
	.soana-news-card:hover,
	.soana-path-card:hover,
	.soana-pack:hover,
	.soana-topic:hover,
	.soana-btn:hover { transform: none; }
	.soana-news-card:hover .soana-news-card-media img { transform: none; }
}