/**
 * Warely — supplemental styles.
 *
 * Most styling is driven by theme.json design tokens. This file holds only what
 * tokens cannot express (focus ring, reduced-motion, dark premium sections,
 * glows, glass header, cards). Reference the CSS custom properties theme.json
 * generates — never hardcode brand hex where a token exists.
 */

:root {
	--warely-header-height: 4.25rem;
	--warely-dark: var(--wp--preset--color--surface-dark);
}

/* Flush sections — remove inter-block gaps so bands butt up against each other */
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
main > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-post-content > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* ---------- Accessibility ---------- */
:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--custom--focus--ring, #f26522);
	outline-offset: 2px;
	border-radius: 2px;
}
.warely-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink); color: #fff;
	border-radius: var(--wp--custom--radius--sm);
}
.warely-skip-link:focus { left: 1rem; top: 1rem; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important; scroll-behavior: auto !important;
	}
}

/* ---------- Header (dark glass, sits over the dark hero) ---------- */
.warely-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--warely-dark) 82%, transparent);
	-webkit-backdrop-filter: saturate(1.3) blur(12px);
	backdrop-filter: saturate(1.3) blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.warely-header :where(.wp-block-navigation-item__content) { color: #fff; }
/* Nav dropdown submenus on the dark header */
.warely-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface-dark) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: var(--wp--custom--radius--md) !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
	padding: 0.4rem;
	min-width: 13rem;
}
.warely-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.82) !important;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
}
.warely-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.07);
}
.warely-header .wp-block-navigation__submenu-container { min-width: 15rem; }
/* Icon chips on dropdown links — matches the Products mega design language */
.warely-navlink { display: flex !important; align-items: center; gap: 0.7rem; }
.warely-navico {
	flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 9px; background: rgba(225, 29, 39, 0.12); border: 1px solid rgba(225, 29, 39, 0.30);
	color: var(--wp--preset--color--brand-red);
}
.warely-navico svg { width: 18px; height: 18px; }
/* Top-level direct links (e.g. Pricing) carry their chip only in the mobile drawer —
   keep the desktop top bar clean text. */
.warely-header .wp-block-navigation__container > .wp-block-navigation-item > .warely-navlink-top .warely-navico { display: none; }
.warely-brand-logo { margin: 0; line-height: 0; }
.warely-brand-logo img { height: 46px; width: auto; display: block; }

/* ---------- Reusable utilities ---------- */
.warely-eyebrow {
	text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
	color: var(--wp--preset--color--brand-red-ink);
}
.warely-dark .warely-eyebrow { color: var(--wp--preset--color--brand-red-bright); }
.warely-dark a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) { color: var(--wp--preset--color--brand-red-bright); }
.warely-prose-narrow { max-width: 42rem; margin-left: auto; margin-right: auto; }
.warely-muted { color: var(--wp--preset--color--ink-500); }
.warely-grad-text {
	background: var(--wp--preset--gradient--brand-gradient);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Dark premium sections ---------- */
.warely-dark { position: relative; overflow: hidden; background: var(--warely-dark); color: #fff; }
.warely-dark :where(h1, h2, h3, h4, h5, .wp-block-heading) { color: #fff; }
.warely-dark .warely-muted { color: rgba(255, 255, 255, 0.70); }
.warely-dark > * { position: relative; z-index: 1; }

/* warm red→orange radial glow (decorative) */
.warely-glow::before {
	content: ""; position: absolute; z-index: 0; inset: -25% -10% auto -10%; height: 80%;
	background: radial-gradient(50% 60% at 50% 0%, rgba(226, 29, 39, 0.34), rgba(242, 101, 34, 0.12) 45%, transparent 72%);
	pointer-events: none;
}

/* dark glass cards */
.warely-card-dark {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--wp--custom--radius--lg);
	min-width: 0;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.warely-card-dark:hover {
	border-color: rgba(225, 29, 39, 0.55);
	box-shadow: 0 0 0 1px rgba(225, 29, 39, 0.28), 0 24px 50px rgba(0, 0, 0, 0.45);
	transform: translateY(-3px);
}

/* light surface card (used on light relief sections) */
.warely-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--sm); min-width: 0;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.warely-card:hover { box-shadow: var(--wp--custom--shadow--md); transform: translateY(-2px); }

/* hero / feature media with a soft brand glow behind it */
.warely-media { position: relative; }
.warely-media::after {
	content: ""; position: absolute; inset: -8% 0 0; z-index: 0; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(226, 29, 39, 0.55), rgba(242, 101, 34, 0.22) 52%, transparent 78%);
	filter: blur(44px);
}
.warely-media img {
	position: relative; z-index: 1; width: 100%; height: auto;
	filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.55));
}

/* client logo cloud */
.warely-logos img {
	height: 56px; width: auto; opacity: 1;
	transition: transform 0.2s ease;
}
.warely-logos img:hover { transform: translateY(-2px); }
@media (max-width: 600px) { .warely-logos img { height: 46px; } }

/* Home customer logos — bigger, one line on desktop. The client logos are full-colour
   square marks on light backgrounds, so present them as uniform rounded logo tiles
   (no silhouette filter) — clean + premium on the dark band. */
.warely-logos-lg { display: flex; flex-wrap: nowrap; gap: clamp(0.85rem, 2.5vw, 1.75rem); justify-content: center; align-items: center; margin-top: 2.25rem; }
.warely-logos-lg img {
	height: 92px; width: 92px; object-fit: contain; background: #fff;
	border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
	opacity: 1; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.warely-logos-lg img:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42); }
@media (max-width: 900px) { .warely-logos-lg { flex-wrap: wrap; gap: 1rem; } .warely-logos-lg img { height: 78px; width: 78px; } }
@media (max-width: 600px) { .warely-logos-lg img { height: 66px; width: 66px; } }
/* Payments & integration partner wordmarks (on the dark band) */
.warely-partners-label { text-align: center; margin: 2.6rem 0 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.warely-partners { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; justify-content: center; align-items: center; margin-top: 1.1rem; }
.warely-partner { font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.74); }

/* stat figures */
.warely-stat { font-family: var(--wp--preset--font-family--sora); font-weight: 700; line-height: 1; }

/* brand button micro-interaction + premium glow */
.wp-block-button__link, .wp-element-button {
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button__link:hover, .wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px rgba(226, 29, 39, 0.35);
}
.warely-dark .is-style-outline .wp-block-button__link { border-color: rgba(255, 255, 255, 0.45); }

/* ---------- Product suite grid (robust — never overlaps) ---------- */
.warely-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
	gap: 1.25rem;
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--60);
}

/* ---------- Pricing: 5 PSG package cards (total cost · after-grant pill · checklist) ---------- */
.warely-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	column-gap: 1.1rem;
	row-gap: 2.75rem;
	align-items: stretch;
	margin-top: calc(var(--wp--preset--spacing--60) + 0.5rem);
}
.warely-pricing-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem 1.3rem; }
.warely-pricing-card.is-popular { border-color: rgba(225, 29, 39, 0.6); box-shadow: 0 0 0 1px rgba(225, 29, 39, 0.4), 0 24px 50px rgba(0, 0, 0, 0.5); }
.warely-pop-badge {
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
	background: var(--wp--preset--color--brand-red); color: #fff;
	font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em;
	padding: 0.32rem 0.85rem; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 6px 16px rgba(225, 29, 39, 0.45);
}
.warely-pricing-name { font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 1.18rem; color: #fff; margin: 0.35rem 0 0; }
.warely-pricing-label { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; margin: 0.55rem 0 0; }
.warely-pricing-price { font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; color: #fff; margin: 0.05rem 0 0; }
.warely-pricing-after { margin: 0.55rem 0 0; }
.warely-after-pill {
	display: inline-block; background: rgba(31, 157, 85, 0.14); color: #46c97e;
	border: 1px solid rgba(31, 157, 85, 0.45); border-radius: 999px;
	padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 600;
}
.warely-pricing-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 1rem 0; }
.warely-pricing-feats { list-style: none; padding: 0; margin: 0 0 1.15rem; display: grid; gap: 0.6rem; }
.warely-pricing-feats li { display: flex; gap: 0.55rem; align-items: flex-start; color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; line-height: 1.45; }
.warely-tick { flex: 0 0 auto; color: #46c97e; font-weight: 700; line-height: 1.4; }
.warely-pricing-cta { margin-top: auto; }
.warely-pricing-cta .wp-block-button { width: 100%; }
.warely-pricing-cta .wp-block-button__link { display: block; width: 100%; text-align: center; }

/* ---------- Section rhythm: hairline between stacked dark sections ---------- */
.warely-dark + .warely-dark { border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* ---------- Feature media — frames product imagery on a branded stage ---------- */
.warely-feature-media {
	position: relative;
	border-radius: var(--wp--custom--radius--lg);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
	border: 1px solid rgba(255, 255, 255, 0.09);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	min-height: 300px;
}
.warely-feature-media::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(60% 70% at 60% 30%, rgba(226, 29, 39, 0.22), rgba(242, 101, 34, 0.08) 45%, transparent 72%);
}
.warely-feature-media img {
	position: relative; z-index: 1; width: 100%; height: auto; display: block;
	border-radius: var(--wp--custom--radius--md);
}
.warely-feature-media.is-phone img {
	width: auto; max-width: 320px; border-radius: 0;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}

/* ---------- Footer ---------- */
.warely-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.warely-footer a:hover { color: #fff; }
.warely-footer-cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.5rem; }
@media (max-width: 900px) { .warely-footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .warely-footer-cols { grid-template-columns: 1fr; } }
.warely-footer-brand p { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; line-height: 1.6; }
.warely-footer-col h3 {
	font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff;
	margin: 0 0 1rem; font-family: var(--wp--preset--font-family--sora); font-weight: 600;
}
.warely-footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; }
.warely-footer-social { display: flex; gap: 0.85rem; align-items: center; margin-top: 1.25rem; }
.warely-footer-social a { display: inline-flex; opacity: 0.8; }
.warely-footer-social a:hover { opacity: 1; }
.warely-footer-social svg { width: 20px; height: 20px; fill: #fff; }
.warely-footer-bottom {
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.10); margin-top: 3rem; padding-top: 1.5rem;
	font-size: 0.82rem; color: rgba(255, 255, 255, 0.6);
}
.warely-footer-bottom a { font-size: 0.82rem; }

/* ---------- Industry tiles (image + gradient overlay, Square-style) ---------- */
.warely-industry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--60);
}
.warely-industry-tile {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	aspect-ratio: 16 / 11; text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.warely-industry-tile img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: transform 0.5s ease;
}
.warely-industry-tile:hover img { transform: scale(1.06); }
.warely-industry-overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(8, 4, 4, 0.92), rgba(8, 4, 4, 0.25) 55%, transparent);
}
.warely-industry-overlay h3 {
	color: #fff; font-family: var(--wp--preset--font-family--sora);
	font-weight: 700; font-size: 1.5rem; margin: 0;
}
.warely-industry-overlay p { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; margin: 0.4rem 0 0; line-height: 1.5; }
.warely-industry-cta { color: var(--wp--preset--color--brand-red-bright); font-weight: 600; font-size: 0.85rem; margin-top: 0.6rem; }

/* ---------- Motion: scroll reveal + count-up ---------- */
.warely-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.warely-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .warely-reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- "How it works" flow diagram ---------- */
.warely-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem 1.5rem; margin-top: var(--wp--preset--spacing--60); }
.warely-flow-step { text-align: center; padding: 1rem 0.5rem; position: relative; }
.warely-flow-step:not(:last-child)::after { content: ""; position: absolute; right: -0.9rem; top: 2.5rem; width: 1rem; height: 2px; background: linear-gradient(90deg, var(--wp--preset--color--brand-red), var(--wp--preset--color--brand-red-bright)); }
.warely-flow-icon { width: 60px; height: 60px; margin: 0 auto 0.85rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(225, 29, 39, 0.13); border: 1px solid rgba(225, 29, 39, 0.36); }
.warely-flow-icon svg { width: 28px; height: 28px; stroke: var(--wp--preset--color--brand-red); fill: none; stroke-width: 2; }
.warely-flow-step h4 { font-family: var(--wp--preset--font-family--sora); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.25rem; color: #fff; }
.warely-flow-step p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); margin: 0; line-height: 1.45; }

/* ---------- Device frame around screenshots ---------- */
.warely-device { position: relative; border-radius: 18px; padding: 12px; background: linear-gradient(160deg, #2a2122, #160f0e); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.warely-device::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 46px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.warely-device img { display: block; width: 100%; height: auto; border-radius: 9px; margin-top: 6px; }

/* ---------- Chart / visual card ---------- */
.warely-chartcard { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--wp--custom--radius--lg); padding: clamp(1.25rem, 3vw, 2rem); }
.warely-chartcard svg { width: 100%; height: auto; display: block; }
.warely-chartcard figcaption { color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; margin-top: 0.85rem; text-align: center; }

/* ---------- Testimonial ---------- */
.warely-quote { max-width: 52rem; margin: 0 auto; text-align: center; }
.warely-quote blockquote { font-family: var(--wp--preset--font-family--sora); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.3; color: #fff; margin: 0 0 1.25rem; font-weight: 600; border: 0; padding: 0; }
.warely-quote cite { color: rgba(255, 255, 255, 0.65); font-style: normal; font-size: 0.9rem; }

/* ---------- Case-study cards ---------- */
.warely-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; margin-top: var(--wp--preset--spacing--60); }
.warely-case-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--wp--custom--radius--lg); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.warely-case-card:hover { border-color: rgba(225, 29, 39, 0.5); transform: translateY(-3px); }
.warely-case-card .warely-case-body { padding: var(--wp--preset--spacing--50); display: flex; flex-direction: column; gap: 0.6rem; }
.warely-case-tag { color: var(--wp--preset--color--brand-red-bright); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.warely-case-metric { font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 1.6rem; color: #fff; line-height: 1; }

/* ============================================================
   CRO / conversion components (cro-overhaul branch)
   ============================================================ */

/* Pain / "sound familiar" agitation band */
.warely-pain-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--60);
}
.warely-pain-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: 3px solid var(--wp--preset--color--brand-red);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50);
}
.warely-pain-card h4 {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600; font-size: 1.05rem; color: #fff; margin: 0 0 0.4rem;
}
.warely-pain-card p { color: rgba(255, 255, 255, 0.66); font-size: 0.88rem; margin: 0; line-height: 1.5; }
.warely-pain-fix {
	margin: 0.95rem 0 0 !important; padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.82) !important; font-size: 0.85rem; line-height: 1.5;
}
.warely-pain-fix strong { color: var(--wp--preset--color--brand-red-bright); font-weight: 700; }

/* Card / pain icons (red on dark) */
.warely-card-icon, .warely-pain-icon {
	width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 13px; flex: 0 0 auto;
	background: rgba(225, 29, 39, 0.12);
	border: 1px solid rgba(225, 29, 39, 0.30);
}
.warely-pain-icon { margin-bottom: 0.9rem; }
.warely-card-icon svg, .warely-pain-icon svg { width: 23px; height: 23px; stroke: var(--wp--preset--color--brand-red); fill: none; stroke-width: 1.9; }

/* Capability list — horizontal icon-left rows (distinct from the boxed pain cards) */
.warely-feature-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 3.5rem;
	margin-top: var(--wp--preset--spacing--60);
}
.warely-feature-row {
	display: flex; gap: 1.1rem; align-items: flex-start;
	padding: 1.6rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.warely-feature-row > div { min-width: 0; }
.warely-feature-row h3 {
	font-family: var(--wp--preset--font-family--sora); font-weight: 700;
	font-size: var(--wp--preset--font-size--large); margin: 0 0 0.3rem; color: #fff;
}
.warely-feature-row p { color: rgba(255, 255, 255, 0.66); font-size: var(--wp--preset--font-size--small); margin: 0; line-height: 1.55; }
.warely-feature-row .warely-card-icon { transition: border-color 0.2s ease, background 0.2s ease; }
.warely-feature-row:hover .warely-card-icon { background: rgba(225, 29, 39, 0.2); border-color: rgba(225, 29, 39, 0.5); }

/* ---------- POS capabilities: quick-jump nav + focused per-feature sections ---------- */
.warely-cap-nav { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; margin: var(--wp--preset--spacing--60) auto 0; max-width: 960px; }
.warely-cap-nav a {
	display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
	color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 0.88rem; transition: border-color 0.15s ease, color 0.15s ease;
}
.warely-cap-nav a:hover { border-color: rgba(225, 29, 39, 0.6); color: #fff; }
.warely-cap-nav .warely-card-icon { width: 24px; height: 24px; border-radius: 6px; }
.warely-cap-nav .warely-card-icon svg { width: 14px; height: 14px; }

.warely-cap-list { max-width: 960px; margin: var(--wp--preset--spacing--70) auto 0; }
.warely-cap {
	display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem;
	padding: 2.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
	scroll-margin-top: 6rem;
}
.warely-cap:first-child { border-top: 0; padding-top: 0.5rem; }
.warely-cap-head { display: flex; flex-direction: column; gap: 0.9rem; }
.warely-cap-head .warely-card-icon { width: 54px; height: 54px; border-radius: 13px; }
.warely-cap-head .warely-card-icon svg { width: 27px; height: 27px; }
.warely-cap-head h3 { font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin: 0; color: #fff; }
.warely-cap-lead { color: rgba(255, 255, 255, 0.8); font-size: 1.08rem; line-height: 1.7; margin: 0 0 1.1rem; }
.warely-cap-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.warely-cap-points li { display: flex; gap: 0.6rem; align-items: flex-start; color: rgba(255, 255, 255, 0.82); }
.warely-cap-points li::before { content: "✓"; flex: 0 0 auto; color: var(--wp--preset--color--brand-red-bright); font-weight: 700; }
@media (max-width: 782px) {
	.warely-cap { grid-template-columns: 1fr; gap: 1.1rem; padding: 2rem 0; }
	.warely-cap-head { flex-direction: row; align-items: center; gap: 1rem; }
	.warely-cap-head .warely-card-icon { width: 44px; height: 44px; }
	.warely-cap-head .warely-card-icon svg { width: 22px; height: 22px; }
	.warely-cap-head h3 { font-size: 1.3rem; }
}
@media (max-width: 781px) { .warely-feature-list { grid-template-columns: 1fr; column-gap: 0; } }

/* ---------- Before / After: per-issue rows ---------- */
.warely-ba-row {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
	margin-top: var(--wp--preset--spacing--70);
}
.warely-ba-row.is-flip .warely-ba-text { order: 2; }
.warely-ba-text .warely-eyebrow { display: block; margin: 0 0 0.5rem; }
.warely-ba-text h3 {
	font-family: var(--wp--preset--font-family--sora); font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large); line-height: 1.15; margin: 0 0 0.75rem; color: #fff;
}
.warely-ba-figure {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(0.9rem, 2.2vw, 1.4rem); margin: 0;
}
.warely-ba-figure svg { width: 100%; height: auto; display: block; }
@media (max-width: 781px) {
	.warely-ba-row { grid-template-columns: 1fr; gap: 1.5rem; }
	.warely-ba-row.is-flip .warely-ba-text { order: 0; }
}

/* ---------- Before / After: at-a-glance split panel ---------- */
.warely-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: var(--wp--preset--spacing--60); }
.warely-split-col { border-radius: var(--wp--custom--radius--lg); padding: clamp(1.5rem, 4vw, 2.25rem); }
.warely-split-before { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.10); }
.warely-split-after { background: linear-gradient(160deg, rgba(225, 29, 39, 0.10), rgba(242, 101, 34, 0.04)); border: 1px solid rgba(225, 29, 39, 0.40); }
.warely-split-col h3 {
	font-family: var(--wp--preset--font-family--sora); font-weight: 700;
	font-size: var(--wp--preset--font-size--large); margin: 0; color: #fff;
}
.warely-split-before h3 { color: rgba(255, 255, 255, 0.75); }
.warely-split-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.85rem; }
.warely-split-list li { display: flex; gap: 0.7rem; align-items: flex-start; line-height: 1.45; font-size: 0.94rem; }
.warely-split-list li span { flex: 0 0 auto; font-weight: 700; line-height: 1.4; }
.warely-split-before li { color: rgba(255, 255, 255, 0.6); }
.warely-split-before li span { color: rgba(255, 255, 255, 0.4); }
.warely-split-after li { color: rgba(255, 255, 255, 0.88); }
.warely-split-after li span { color: var(--wp--preset--color--brand-red-bright); }
@media (max-width: 781px) { .warely-split { grid-template-columns: 1fr; } }

/* ---------- Mobile nav: left slide-in drawer ---------- */
.warely-nav-backdrop {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0; visibility: hidden;
	transition: opacity 0.33s ease, visibility 0.33s ease;
	/* below the header's stacking context (z-index:100) so the drawer renders ABOVE the backdrop and stays tappable */
	z-index: 95;
}
html.warely-nav-open .warely-nav-backdrop { opacity: 1; visibility: visible; }
html.warely-nav-open, html.warely-nav-open body { overflow: hidden; }
/* CRITICAL: the header's backdrop-filter establishes a containing block for the
   position:fixed drawer (so it was sized to the 54px header, not the viewport —
   clipping the pinned CTA). Drop it while the drawer is open so the drawer is
   viewport-height and its footer button pins correctly. */
html.warely-nav-open .warely-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

@media (max-width: 600px) {
	/* Make the WP nav overlay a dark drawer that slides in from the left */
	.warely-header .wp-block-navigation__responsive-container {
		position: fixed !important;
		/* top:0 + bottom:0 define the height = exactly the viewport, with no
		   height/100dvh conflict (that conflict was pushing the CTA below the fold) */
		inset: 0 auto 0 0 !important; height: auto !important;
		width: 85vw; max-width: 460px;
		background: var(--wp--preset--color--surface-dark) !important;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: 22px 0 60px rgba(0, 0, 0, 0.55);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.33s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.33s;
		z-index: 100000;
		/* flex column: the nav list (.responsive-close wrapper) scrolls, the CTA is a
		   pinned footer below it — deterministic, no position:fixed/dvh ambiguity */
		display: flex !important; flex-direction: column; overflow: hidden; padding: 0;
	}
	.warely-header .wp-block-navigation__responsive-container.is-menu-open {
		transform: translateX(0); visibility: visible;
	}
	/* the wrapper that holds the whole nav tree is the scroll area (scrollbar hidden) */
	.warely-header .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-close {
		flex: 1 1 auto !important; min-height: 0 !important; height: auto !important;
		overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.warely-header .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-close::-webkit-scrollbar { width: 0; height: 0; display: none; }
	.warely-header .wp-block-navigation__responsive-container-content { display: block !important; width: 100%; max-width: 100%; box-sizing: border-box; padding: 3.5rem 0.75rem 1.5rem; }
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__container {
		flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important;
		gap: 0; text-align: left; width: 100%;
	}
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation-item { width: 100%; }
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		color: #fff !important; display: block; padding: 0.8rem 0.85rem; width: 100%;
		font-size: 1.05rem; border-radius: 8px; text-align: left;
	}
	/* flatten submenus — show them as indented groups */
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		position: static !important; display: block !important;
		opacity: 1 !important; visibility: visible !important;
		background: transparent !important; border: 0 !important; box-shadow: none !important;
		min-width: 0 !important; width: 100%; transform: none !important; margin: 0;
		padding: 0 0 0.4rem 0.6rem;
	}
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: rgba(255, 255, 255, 0.82) !important; font-size: 1rem; padding: 0.55rem 0.6rem;
	}
	/* keep the icon chip + label as a flex row in the drawer. Must out-specify the
	   later `...item__content { display:block !important }` reset (0,3,0) — hence the
	   doubled class on the element itself (0,4,0). */
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content.warely-navlink { display: flex !important; align-items: center; gap: 0.7rem !important; }
	/* top-level direct links (Pricing): show the chip + flex row in the drawer */
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .warely-navlink-top { display: flex !important; align-items: center; gap: 0.7rem !important; }
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .warely-navlink-top .warely-navico { display: inline-flex !important; }
	/* Top-level items with children become section headers (matches the mega's column headings) */
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--sora); font-weight: 600;
		font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.12em;
		color: rgba(255, 255, 255, 0.45) !important; padding: 0.5rem 0.6rem 0.4rem;
		margin-top: 0.4rem; pointer-events: none;
	}
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon { display: none; }
	.warely-header .wp-block-navigation__responsive-container-close {
		position: absolute; top: 0.9rem; right: 0.9rem; color: #fff !important; padding: 0.25rem; z-index: 1;
	}
	.warely-header .wp-block-navigation__responsive-container-close svg { fill: #fff; width: 26px; height: 26px; }
	.warely-header .wp-block-navigation__responsive-container-open svg { fill: #fff; }
	/* force a clean block / left layout for the whole nav tree (override WP flexbox) */
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__container,
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container { display: block !important; }
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation-item { display: block !important; width: 100% !important; }
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content { display: block !important; justify-content: flex-start !important; text-align: left !important; }
	.warely-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container { padding: 0 0 0.5rem 0 !important; margin: 0 0 0.4rem; border-left: 0; }
	/* hide the header CTA on mobile — it moves into the drawer */
	.warely-header .wp-block-buttons:not(.warely-drawer-cta) { display: none !important; }
	/* Pin the CTA to the bottom of the drawer so it's always reachable. The drawer
	   has a transform (slide animation) which makes it the containing block for
	   position:fixed children — so fixed pins to the drawer's bottom (not the page)
	   and does NOT scroll with the nav list. Robust across browsers (sticky inside a
	   fixed+overflow parent is unreliable). It rides off-screen with the drawer when closed. */
	.warely-drawer-cta {
		display: block !important; flex: 0 0 auto; position: static; z-index: 5;
		margin: 0; padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
		background: var(--wp--preset--color--surface-dark);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.warely-drawer-cta .wp-block-button { width: 100%; }
	.warely-drawer-cta .wp-block-button__link { display: block; width: 100%; text-align: center; padding-top: 0.85rem; padding-bottom: 0.85rem; }
}

/* ---------- Desktop mega-menu (Products) ---------- */
@media (max-width: 600px) { .warely-mega { display: none !important; } }
@media (min-width: 601px) {
	/* replace the default narrow Products dropdown with the mega panel */
	.warely-header .warely-has-mega > .wp-block-navigation__submenu-container { display: none !important; }
	.warely-mega {
		position: fixed; left: 0; right: 0; top: 0; /* top set to header bottom by JS */
		padding: 0 var(--wp--preset--spacing--50);
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
		pointer-events: none; z-index: 80;
	}
	.warely-header .warely-has-mega.is-mega-open .warely-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
	.warely-mega-inner {
		position: relative;
		max-width: 1180px; margin: 0 auto;
		background: var(--wp--preset--color--surface-dark);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: var(--wp--custom--radius--lg);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
		padding: 1.75rem;
		display: grid; grid-template-columns: repeat(3, 1fr) 0.9fr; gap: 0.4rem 2rem;
	}
	/* invisible hover bridge: spans the gap between the Products nav item and the
	   panel so moving the cursor down keeps the menu open (no flicker, no dead zone) */
	.warely-mega-inner::before { content: ""; position: absolute; left: 0; right: 0; top: -1.4rem; height: 1.4rem; }
	.warely-mega-head { font-family: var(--wp--preset--font-family--sora); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: rgba(255, 255, 255, 0.45); margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
	.warely-mega-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 10px; color: rgba(255, 255, 255, 0.82) !important; text-decoration: none; font-size: 0.95rem; transition: background 0.15s ease, color 0.15s ease; }
	.warely-mega-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff !important; }
	.warely-mega-ico { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(225, 29, 39, 0.12); border: 1px solid rgba(225, 29, 39, 0.30); color: var(--wp--preset--color--brand-red); }
	.warely-mega-ico svg { width: 19px; height: 19px; }
	.warely-mega-promo { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 1.25rem; border-radius: var(--wp--custom--radius--md); text-decoration: none; background: linear-gradient(160deg, rgba(225, 29, 39, 0.16), rgba(242, 101, 34, 0.06)); border: 1px solid rgba(225, 29, 39, 0.40); }
	.warely-mega-promo-eyebrow { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; }
	.warely-mega-promo-title { color: #fff; font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
	.warely-mega-promo-cta { color: var(--wp--preset--color--brand-red-bright); font-weight: 600; font-size: 0.85rem; }
}

/* Pill badge (urgency / PSG nudge) */
.warely-badge {
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: rgba(225, 29, 39, 0.16);
	border: 1px solid rgba(225, 29, 39, 0.45);
	color: var(--wp--preset--color--brand-red-bright);
	border-radius: 999px; padding: 0.32rem 0.85rem;
	font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Offer stack (the irresistible offer) */
.warely-offer-card {
	background: linear-gradient(160deg, rgba(225, 29, 39, 0.12), rgba(242, 101, 34, 0.04));
	border: 1px solid rgba(225, 29, 39, 0.42);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42);
}
.warely-offer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.95rem; }
.warely-offer-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.warely-offer-list svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
/* Safety: cap any check/icon SVG dropped into a check list so it can't balloon */
.warely-checks svg { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; }
.warely-offer-list strong { color: #fff; font-weight: 600; }
.warely-offer-list span { color: rgba(255, 255, 255, 0.64); font-size: 0.92rem; }
.warely-offer-list em.warely-offer-value { color: var(--wp--preset--color--brand-red-bright); font-style: normal; font-weight: 600; font-size: 0.9em; white-space: nowrap; }
.warely-offer-total {
	margin-top: 1.4rem; padding-top: 1.15rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; align-items: baseline;
}
.warely-offer-total > span:first-child { color: rgba(255, 255, 255, 0.82); font-weight: 600; }
.warely-offer-total-val { font-family: var(--wp--preset--font-family--sora); font-weight: 700; font-size: 1.1rem; color: var(--wp--preset--color--brand-red-bright); }
.warely-offer-total-val s { color: rgba(255, 255, 255, 0.45); font-weight: 600; margin-right: 0.45rem; }
.warely-riskrow {
	display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.4rem;
	font-size: 0.85rem; color: rgba(255, 255, 255, 0.74);
}
.warely-riskrow span { display: inline-flex; gap: 0.45rem; align-items: center; }
.warely-riskrow span::before { content: "✓"; color: var(--wp--preset--color--brand-red-bright); font-weight: 700; }

/* ---------- Lead / demo form (native, dark) ---------- */
.warely-form {
	max-width: 640px; margin: 0 auto;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.4rem, 4vw, 2.25rem);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42);
}
.warely-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.warely-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.warely-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.warely-field-wide { grid-column: 1 / -1; }
.warely-field > span, .warely-field legend { font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.warely-field em { color: var(--wp--preset--color--brand-red-bright); font-style: normal; }
.warely-field input, .warely-field select, .warely-field textarea {
	width: 100%; box-sizing: border-box;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px; padding: 0.7rem 0.8rem;
	color: #fff; font: inherit; font-size: 0.95rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.warely-field textarea { resize: vertical; min-height: 3.2rem; }
.warely-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.warely-field input:focus, .warely-field select:focus, .warely-field textarea:focus {
	outline: none; border-color: var(--wp--preset--color--brand-red);
	box-shadow: 0 0 0 3px rgba(225, 29, 39, 0.25);
}
.warely-field input::placeholder, .warely-field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.warely-form fieldset { border: 0; padding: 0; margin: 0; }
.warely-checkrow { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.5rem; }
.warely-checkrow label, .warely-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); cursor: pointer; }
.warely-checkrow label { align-items: center; }
.warely-consent { margin-top: 1rem; line-height: 1.45; }
.warely-consent a { color: var(--wp--preset--color--brand-red-bright); }
.warely-form input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: var(--wp--preset--color--brand-red); margin-top: 0.1rem; }
.warely-form-submit { width: 100%; margin-top: 1.4rem; text-align: center; font-weight: 600; cursor: pointer; border: 0; font-size: 1.02rem; padding: 0.95rem 1.5rem; }
.warely-form-foot { text-align: center; margin: 0.9rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.warely-form-error {
	max-width: 640px; margin: 0 auto 1.25rem; padding: 0.85rem 1.1rem;
	background: rgba(225, 29, 39, 0.14); border: 1px solid rgba(225, 29, 39, 0.5);
	border-radius: 10px; color: #fff; font-size: 0.92rem; text-align: center;
}
.warely-form-success {
	max-width: 620px; margin: 0 auto; text-align: center;
	background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(225, 29, 39, 0.4);
	border-radius: var(--wp--custom--radius--lg); padding: clamp(1.75rem, 5vw, 3rem);
}
.warely-form-success-ico { display: inline-flex; }
.warely-form-success-ico svg { width: 56px; height: 56px; }
.warely-form-success h2 { color: #fff; font-family: var(--wp--preset--font-family--sora); margin: 0.75rem 0 0.5rem; }
.warely-form-success p { color: rgba(255, 255, 255, 0.74); margin: 0 auto 0.5rem; max-width: 40rem; }
.warely-form-success-cta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: center; margin-top: 1.25rem !important; }
.warely-form-success-call { color: var(--wp--preset--color--brand-red-bright); font-weight: 600; text-decoration: none; }
@media (max-width: 600px) { .warely-form-grid { grid-template-columns: 1fr; } }

/* ---------- Legal / policy prose ---------- */
.warely-legal { color: rgba(255, 255, 255, 0.78); font-size: 1rem; line-height: 1.75; }
.warely-legal h2 { color: #fff; font-family: var(--wp--preset--font-family--sora); font-size: 1.3rem; font-weight: 600; margin: 2.25rem 0 0.6rem; }
.warely-legal h2:first-child { margin-top: 0; }
.warely-legal p { margin: 0 0 1.1rem; }
.warely-legal ul { margin: 0 0 1.1rem; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.warely-legal li { padding-left: 0.2rem; }
.warely-legal strong { color: #fff; }
.warely-legal a { color: var(--wp--preset--color--brand-red-bright); }
.warely-legal-note {
	margin-top: 2rem; padding: 1rem 1.15rem; font-size: 0.9rem;
	background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px; color: rgba(255, 255, 255, 0.62);
}

/* ---------- Blog: article + listing ---------- */

/* reading-progress bar (JS-driven, top of viewport, motion-safe) */
.warely-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1000; background: var(--wp--preset--gradient--brand-gradient, linear-gradient(90deg, var(--wp--preset--color--brand-red), var(--wp--preset--color--brand-orange))); transition: width 0.1s linear; pointer-events: none; }

/* article hero: breadcrumb · category · title · deck · meta */
.warely-article-deck { max-width: 40rem; margin: 1.1rem auto 0; color: rgba(255, 255, 255, 0.74); line-height: 1.55; }
.warely-article-deck p { margin: 0; }
.warely-article-meta { gap: 0.4rem 1.25rem; color: rgba(255, 255, 255, 0.6); margin-top: 1.6rem; }
.warely-article-meta > * { margin: 0 !important; color: rgba(255, 255, 255, 0.6); }
.warely-article-meta .wp-block-post-author-name a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.warely-readtime::before { content: "·"; margin-right: 1.25rem; color: rgba(255, 255, 255, 0.3); }
.warely-article-hero { margin: 0; }
.warely-article-hero img { width: 100%; height: auto; display: block; }

/* breadcrumb */
.warely-breadcrumb { display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin: 0 0 0.9rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); }
.warely-breadcrumb a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.warely-breadcrumb a:hover { color: var(--wp--preset--color--brand-red-bright); }
.warely-breadcrumb span { color: rgba(255, 255, 255, 0.3); }

/* two-column reading layout: sticky TOC rail + body. Single column by default; the
   rail only appears once JS confirms a TOC (>= 2 headings) and adds .has-toc, so a
   short post never gets stranded behind an empty 220px gutter. */
.warely-article-layout { max-width: 760px; margin-inline: auto; }
.warely-article-layout.has-toc { max-width: 1060px; }
.warely-article-main { min-width: 0; }
@media (min-width: 981px) {
	.warely-article-layout.has-toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3.5rem; align-items: start; }
	.warely-article-layout.has-toc .warely-article-rail { position: sticky; top: 5.5rem; align-self: start; }
}

/* lead/intro paragraph — the first paragraph reads larger, like the reference */
.warely-article .wp-block-post-content > p:first-of-type { font-size: 1.24rem; line-height: 1.7; color: #fff; margin-bottom: 1.7rem; }

/* article prose */
.warely-article { color: rgba(255, 255, 255, 0.82); font-size: 1.07rem; line-height: 1.8; }
.warely-article p { margin: 0 0 1.35rem; }
.warely-article h2 { font-family: var(--wp--preset--font-family--sora); color: #fff; font-size: 1.65rem; font-weight: 700; line-height: 1.25; margin: 2.75rem 0 0.85rem; scroll-margin-top: 6rem; }
.warely-article h3 { font-family: var(--wp--preset--font-family--sora); color: #fff; font-size: 1.27rem; font-weight: 600; line-height: 1.3; margin: 2.1rem 0 0.6rem; scroll-margin-top: 6rem; }
.warely-article ul, .warely-article ol { margin: 0 0 1.35rem; padding-left: 1.3rem; display: grid; gap: 0.55rem; }
.warely-article a { color: var(--wp--preset--color--brand-red-bright); text-underline-offset: 3px; }
.warely-article strong { color: #fff; }

/* The global flush (.wp-block-post-content > *, top of file) zeroes block margins so
   page section-bands butt together — but it also strips long-form rhythm. Restore
   vertical spacing for TOP-LEVEL article blocks only (direct children of post-content),
   with !important to beat the flush; nested elements keep their own tighter spacing. */
.warely-article .wp-block-post-content > * { margin-block: 0 1.35rem !important; }
.warely-article .wp-block-post-content > *:last-child { margin-block-end: 0 !important; }
.warely-article .wp-block-post-content > p:first-of-type { margin-block: 0 1.7rem !important; }
.warely-article .wp-block-post-content > h2 { margin-block: 2.75rem 0.85rem !important; }
.warely-article .wp-block-post-content > h3 { margin-block: 2.1rem 0.6rem !important; }
.warely-article .wp-block-post-content > figure { margin-block: 2.2rem !important; }
.warely-article .wp-block-post-content > blockquote,
.warely-article .wp-block-post-content > .wp-block-quote { margin-block: 2.5rem !important; }
.warely-article .wp-block-post-content > .wp-block-pullquote { margin-block: 2.8rem !important; }
.warely-article .wp-block-post-content > .warely-takeaways { margin-block: 0 3.25rem !important; }

/* in-body imagery — writers can drop a Wide / Full image for impact, like the reference */
.warely-article figure { margin: 2.2rem 0; }
.warely-article img { height: auto; border-radius: 16px; }
.warely-article figure img { width: 100%; }
.warely-article figcaption { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; text-align: center; margin-top: 0.65rem; }
/* keep Wide / Full in-body media within the prose column (post-content sits in a nested
   grid cell, so an unscoped alignfull would overhang the column asymmetrically) */
.warely-article .wp-block-post-content > .alignwide { max-width: 100%; }
.warely-article .wp-block-post-content > .alignfull { margin-inline: 0; max-width: 100%; width: 100%; }

/* pull quote / blockquote — premium, brand-accented */
.warely-article blockquote, .warely-article .wp-block-quote { position: relative; margin: 2.5rem 0; padding: 0.1rem 0 0.1rem 1.6rem; border-left: 3px solid var(--wp--preset--color--brand-red); color: #fff; font-family: var(--wp--preset--font-family--sora); font-size: 1.4rem; line-height: 1.4; font-weight: 600; font-style: normal; }
.warely-article blockquote p { margin: 0 0 0.5rem; }
.warely-article blockquote cite, .warely-article .wp-block-quote cite { display: block; margin-top: 0.6rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.9rem; font-weight: 400; font-style: normal; color: rgba(255, 255, 255, 0.55); }
.warely-article .wp-block-pullquote { border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 1.8rem 0; margin: 2.8rem 0; text-align: left; }
.warely-article .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.warely-article .wp-block-pullquote p { font-size: 1.7rem; }

/* TL;DR / key-takeaways callout */
.warely-takeaways {
	margin: 0 0 2.2rem; padding: 1.5rem 1.7rem;
	background: linear-gradient(160deg, rgba(225, 29, 39, 0.12), rgba(242, 101, 34, 0.04));
	border: 1px solid rgba(225, 29, 39, 0.4); border-radius: var(--wp--custom--radius--lg);
}
.warely-takeaways-title { font-family: var(--wp--preset--font-family--sora); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--brand-red-bright); margin: 0 0 0.85rem; }
.warely-takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; color: rgba(255, 255, 255, 0.88); }
.warely-takeaways li { position: relative; padding-left: 1.7rem; }
.warely-takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wp--preset--color--brand-red-bright); font-weight: 700; }

/* auto table of contents — sticky rail with active-section highlight */
.warely-toc { margin: 0; padding: 1.1rem 1.3rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; max-height: calc(100vh - 7rem); overflow-y: auto; }
.warely-toc-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: rgba(255, 255, 255, 0.5); margin: 0 0 0.7rem; }
.warely-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.warely-toc a { display: block; padding: 0.32rem 0 0.32rem 0.8rem; border-left: 2px solid transparent; color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 0.875rem; line-height: 1.35; transition: color 0.15s ease, border-color 0.15s ease; }
.warely-toc a:hover { color: #fff; }
.warely-toc a.is-active { color: var(--wp--preset--color--brand-red-bright); border-left-color: var(--wp--preset--color--brand-red-bright); }

/* author box */
.warely-author-box { display: flex; gap: 1.1rem; align-items: flex-start; max-width: 720px; margin: 3.25rem 0 0; padding-top: 1.85rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.warely-author-box .wp-block-avatar { flex: 0 0 auto; }
.warely-author-box .wp-block-avatar img { border-radius: 50%; }
.warely-author-meta { flex: 1 1 auto; min-width: 0; }
.warely-author-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.45); margin: 0 0 0.15rem; }
.warely-author-box .wp-block-post-author-name { color: #fff; margin: 0; }
.warely-author-box .wp-block-post-author-biography { color: rgba(255, 255, 255, 0.66); margin: 0.35rem 0 0; }
.warely-author-updated { gap: 0.45rem !important; align-items: center; margin-top: 0.8rem; color: rgba(255, 255, 255, 0.5); }
.warely-author-updated p { margin: 0; text-transform: uppercase; letter-spacing: 0.1em; }
.warely-author-updated .wp-block-post-date { margin: 0; color: rgba(255, 255, 255, 0.6); }

/* article: collapse the rail on tablet/mobile (TOC becomes an inline box above the body) */
@media (max-width: 980px) {
	.warely-article-layout.has-toc { max-width: 720px; }
	.warely-article-rail { margin-bottom: 1.9rem; }
	.warely-toc { max-height: none; }
	.warely-article .wp-block-pullquote p { font-size: 1.45rem; }
	.warely-article blockquote, .warely-article .wp-block-quote { font-size: 1.25rem; }
}

/* blog listing cards */
.warely-post-grid .wp-block-post-template { gap: 1.5rem !important; }
.warely-post-card { display: flex; flex-direction: column; gap: 0.6rem; }
.warely-post-card .wp-block-post-featured-image { margin: 0 0 0.3rem; }
.warely-post-card .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.warely-post-card .wp-block-post-title { margin: 0; line-height: 1.3; }
.warely-post-card .wp-block-post-title a { color: #fff; text-decoration: none; }
.warely-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--brand-red-bright); }
.warely-post-card .wp-block-post-excerpt { color: rgba(255, 255, 255, 0.66); margin: 0; }
.warely-post-card .wp-block-post-excerpt__excerpt { font-size: 0.92rem; line-height: 1.6; }
.warely-post-card .wp-block-post-terms a { color: var(--wp--preset--color--brand-red-bright); text-decoration: none; }
.warely-post-card .wp-block-post-date { color: rgba(255, 255, 255, 0.45); margin: auto 0 0; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { color: rgba(255, 255, 255, 0.8); }
.wp-block-query-pagination .current { color: var(--wp--preset--color--brand-red-bright); font-weight: 700; }

/* Objection-handling FAQ (native <details>, no JS) */
.warely-faq { max-width: 46rem; margin: var(--wp--preset--spacing--60) auto 0; display: grid; gap: 0.75rem; }
.warely-faq-item {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.25rem 1.25rem;
}
.warely-faq-item summary {
	font-family: var(--wp--preset--font-family--sora); font-weight: 600; color: #fff;
	padding: 0.95rem 0; cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.warely-faq-item summary::-webkit-details-marker { display: none; }
.warely-faq-item summary::after {
	content: "+"; color: var(--wp--preset--color--brand-red-bright);
	font-size: 1.4rem; line-height: 1; flex: 0 0 auto;
}
.warely-faq-item[open] summary::after { content: "\2013"; }
.warely-faq-item p { color: rgba(255, 255, 255, 0.70); font-size: 0.92rem; line-height: 1.6; margin: 0 0 1rem; }

/* In-article FAQ accordion (Article — FAQ pattern: core <details> inside .warely-faq) */
.warely-article .warely-faq { gap: 0.75rem; }
.warely-article .warely-faq .wp-block-details {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.25rem 1.25rem;
	margin: 0 !important;
}
.warely-article .warely-faq .wp-block-details > summary {
	font-family: var(--wp--preset--font-family--sora); font-weight: 600; color: #fff;
	padding: 0.95rem 0; cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.warely-article .warely-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.warely-article .warely-faq .wp-block-details > summary::after {
	content: "+"; color: var(--wp--preset--color--brand-red-bright); font-size: 1.4rem; line-height: 1; flex: 0 0 auto;
}
.warely-article .warely-faq .wp-block-details[open] > summary::after { content: "\2013"; }
.warely-article .warely-faq .wp-block-details p { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; line-height: 1.7; margin: 0 0 1rem; }