/*
 * Astro Emerald - main stylesheet
 * Light-first, mobile-first. Emerald + antique gold over warm ivory.
 */

/* ------------------------------------------------------------------
 * 0. Self-hosted fonts (SIL Open Font License, variable weights,
 *    latin subset - no external font requests)
 * ---------------------------------------------------------------- */
@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-600.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
 * 1. Design tokens
 * ---------------------------------------------------------------- */
:root {
	--ae-deep-emerald: #063F37;
	--ae-royal-emerald: #086A58;
	--ae-dark-forest: #032F2A;
	--ae-gold: #C5A253;
	--ae-gold-light: #E2C77B;
	/* Same gold hue (42deg) darkened for TEXT on ivory/cream/sand:
	 * --ae-gold reads only 2.19:1 there and fails WCAG AA. This is
	 * 4.7:1. Use --ae-gold for borders, dividers and other decoration
	 * (no contrast minimum), --ae-gold-light for gold on emerald. */
	--ae-gold-text: #84692A;
	--ae-ivory: #FFF9EC;
	--ae-cream: #FAF3E3;
	--ae-sand: #F5EBD7;
	--ae-white: #FFFFFF;
	--ae-charcoal: #171A18;
	--ae-muted: #5E625F;
	--ae-success: #237A57;
	--ae-error: #A83232;

	--ae-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	/* Prices use a system stack on purpose. The self-hosted Latin
	 * subsets include the euro but NOT the rupee (U+20B9), so a webfont
	 * price renders its digits in the webfont and the currency symbol
	 * in a fallback - visibly mismatched. A system-first stack keeps
	 * the whole amount in one typeface. */
	--ae-font-price: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--ae-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--ae-radius: 10px;
	--ae-radius-sm: 6px;
	--ae-shadow: 0 4px 24px rgba(6, 63, 55, 0.08);
	--ae-shadow-lift: 0 10px 32px rgba(6, 63, 55, 0.14);
	--ae-border: 1px solid rgba(197, 162, 83, 0.35);
	--ae-container: 1200px;
	--ae-content: 760px;
	--ae-gutter: clamp(1rem, 4vw, 2rem);
	--ae-section-pad: clamp(3rem, 8vw, 5.5rem);
}

/* ------------------------------------------------------------------
 * 2. Base
 * ---------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Clip sideways on the root as well as the body. overflow-x on the
	 * body alone leaves the viewport pannable on iOS Safari and Android
	 * Chrome - the page drags a few pixels sideways and springs back,
	 * which reads as the page shaking during a fast scroll.
	 * 'clip' is used in preference to 'hidden' because it clips without
	 * creating a scroll container, so position:sticky keeps working;
	 * the 'hidden' line above it is the fallback for older browsers. */
	overflow-x: hidden;
	overflow-x: clip;
	overscroll-behavior-x: none;
}

body {
	margin: 0;
	background: var(--ae-ivory);
	color: var(--ae-charcoal);
	font-family: var(--ae-font-body);
	font-size: 1rem;
	line-height: 1.7;
	overflow-x: hidden;
	overflow-x: clip;
	overscroll-behavior-x: none;
	overflow-wrap: break-word;
}

/* Guard against grid/flex blowouts: children of layout grids must be
 * allowed to shrink below their content's intrinsic width (images with
 * width attributes otherwise force horizontal overflow on phones). */
.ae-hero__layout > *,
.ae-post-grid > *,
.ae-steps > *,
.ae-footer__grid > *,
ul.products > * {
	min-width: 0;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ae-font-display);
	font-weight: 600;
	line-height: 1.25;
	color: var(--ae-deep-emerald);
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.2em; }

a {
	color: var(--ae-royal-emerald);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover { color: var(--ae-deep-emerald); }

:focus-visible {
	outline: 3px solid var(--ae-gold);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--ae-gold-light);
	color: var(--ae-charcoal);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--ae-white);
	clip-path: none;
	color: var(--ae-deep-emerald);
	display: block;
	font-weight: 600;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 14px 22px;
	top: 8px;
	width: auto;
	z-index: 100000;
	box-shadow: var(--ae-shadow-lift);
}

.skip-link { position: absolute; }

/* Layout containers */
.ae-container {
	width: min(100% - 2 * var(--ae-gutter), var(--ae-content));
	margin-inline: auto;
}

.ae-container-wide {
	width: min(100% - 2 * var(--ae-gutter), var(--ae-container));
	margin-inline: auto;
}

.ae-main {
	padding-block: clamp(1.5rem, 4vw, 3rem) var(--ae-section-pad);
}

.ae-main--home,
.ae-main--shop {
	padding-block-start: 0;
}

/* Homepage ends with the full-bleed CTA - no ivory gap before the footer */
.ae-main--home { padding-block-end: 0; }

.ae-main--shop {
	padding-block-start: clamp(1rem, 3vw, 2rem);
}

/* Product landing pages (template-product-landing.php) open with a
 * full-bleed hero and end on a full-bleed CTA, same as the homepage -
 * no ivory gap at either end. */
.ae-main--landing { padding-block: 0; }

/* ------------------------------------------------------------------
 * Product landing page sections (inc/product-landing.php)
 * ---------------------------------------------------------------- */
.ae-lp-hero {
	position: relative;
	background:
		radial-gradient(ellipse at 78% 30%, rgba(8, 106, 88, 0.65) 0%, transparent 52%),
		radial-gradient(ellipse at 8% 90%, rgba(197, 162, 83, 0.12) 0%, transparent 45%),
		linear-gradient(165deg, var(--ae-deep-emerald) 0%, var(--ae-dark-forest) 100%);
	color: var(--ae-ivory);
	overflow: hidden;
}

.ae-lp-hero__layout {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 3.5rem);
	padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 6.5rem);
}

.ae-lp-hero__content,
.ae-lp-hero__art { min-width: 0; }

.ae-lp-hero__content { text-align: center; }

/* The h1 holds the product name only. When a marketing headline is
 * set the h1 wears the small gold kicker style and the headline
 * paragraph below is the large type - visual weight is styling, the
 * heading stays one short keyword phrase. */
.ae-lp-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	font-family: var(--ae-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	/* Brighter than --ae-gold-light so this small, wide-tracked text
	 * still clears 4.5:1 against the lightest stop of the hero
	 * gradient (#086A58), where --ae-gold-light only reaches 3.95:1. */
	color: #F0DFAC;
	margin: 0 0 0.9rem;
}

.ae-lp-hero__headline {
	display: block;
	font-family: var(--ae-font-display);
	font-weight: 600;
	color: var(--ae-ivory);
	font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.1rem);
	line-height: 1.15;
	text-wrap: balance;
	margin: 0 0 0.5em;
}

.ae-lp-hero__sub {
	color: rgba(250, 243, 227, 0.88);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.12rem);
	max-width: 54ch;
	margin-inline: auto;
	margin-bottom: 1.5rem;
}

.ae-lp-hero__sub p:last-child { margin-bottom: 0; }

/* Gold rule sits on a hero's bottom edge, replacing the temple
 * border, so the hero meets the dark section below on a gold seam.
 * Used by the homepage hero and product landing heroes alike. */
.ae-hero__rule {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 3;
}

/* What the reader gets out of the report - recognition, not scarcity. */
.ae-lp-hero__hooks {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	text-align: start;
}

.ae-lp-hero__hooks li {
	position: relative;
	padding-inline-start: 1.6rem;
	font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
	color: rgba(255, 249, 236, 0.94);
}

.ae-lp-hero__hooks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 0.62rem;
	height: 0.62rem;
	background: var(--ae-gold-light);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ae-lp-hero__actions { justify-content: center; }

/* Quiet second route to the sample. A link, not a second button - the
 * hero keeps a single call to action. #F0DFAC rather than
 * --ae-gold-light: 4.94:1 over the lightest stop of the hero gradient,
 * where the lighter token only reaches 3.95:1. */
.ae-lp-hero__sample {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
}

/* inline-block + padding so the tap area is comfortable on a phone;
 * a bare text link is only about 20px tall. */
.ae-lp-hero__sample a {
	display: inline-block;
	padding: 0.6rem 0.35rem;
	color: #F0DFAC;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.ae-lp-hero__sample a:hover,
.ae-lp-hero__sample a:focus-visible { color: var(--ae-white); }

.ae-lp-hero__art { display: flex; justify-content: center; position: relative; }

/* Rotating zodiac wheel behind the product cover. Same asset and
 * clockwise animation as the homepage hero, dimmed so the cover keeps
 * the focus. Bleeds wider than the frame; .ae-lp-hero clips it. */
/* Specificity note: the homepage `.ae-hero__wheel` width rule sits
 * further down this file, so a single-class selector here would lose
 * to it. The parent is included to win. */
.ae-lp-hero__art .ae-lp-hero__wheel {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Individual translate property, so the ae-rotate keyframes can own
	 * `transform` without cancelling the centring. */
	translate: -50% -50%;
	z-index: 0;
	width: min(152%, 700px);
	max-width: none;
	/* Dim enough that the hero copy on the left stays fully readable
	 * where the outer rings drift over that column. */
	opacity: 0.34;
	pointer-events: none;
}

/* Keep the cover, badge and glow above the wheel. */
.ae-lp-hero__frame { z-index: 1; }

/* Gold outer border held away from the artwork, so the emerald shows
 * through the gap like a mount. Badge sits centred on the top rail. */
.ae-lp-hero__frame {
	position: relative;
	/* Sized so the artwork inside stays full size once the border
	 * and its gap are accounted for (44px of chrome all round). */
	max-width: min(422px, 88vw);
	padding: 20px;
	border: 2px solid var(--ae-gold);
	border-radius: var(--ae-radius);
	line-height: 0;
	background: transparent;
	box-shadow:
		0 0 30px rgba(226, 199, 123, 0.22),
		0 0 76px rgba(226, 199, 123, 0.12),
		0 24px 60px rgba(3, 47, 42, 0.5);
}

.ae-lp-hero__frame img,
.ae-lp-hero__cover {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

/* Badge straddles the top edge of the frame, like the "Most Popular"
 * tag on a pricing card - keeps it off the cover artwork. */
.ae-lp-hero__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	white-space: nowrap;
	/* The frame sets line-height:0 to kill the inline gap under the
	 * image; the badge must reset it or its text collapses. */
	line-height: 1.6;
	padding: 0.4em 1.1em;
	box-shadow: 0 6px 18px rgba(3, 47, 42, 0.5);
}

@media (min-width: 900px) {
	.ae-lp-hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
	.ae-lp-hero__content { text-align: start; }
	.ae-lp-hero__sub { margin-inline: 0; }
	.ae-lp-hero__actions { justify-content: flex-start; }
}

.ae-lp-about__text { max-width: 68ch; margin-inline: auto; }

/* ------------------------------------------------------------------
 * Section rhythm
 *
 * Every <h2> in the product description becomes its own band (see
 * astro_emerald_lp_description_bands), and bands alternate white /
 * cream. Combined with the emerald sections either side, each block
 * of the page reads as a distinct section instead of one long run of
 * near-identical cream. A hairline gold rule marks each boundary for
 * the cases where two light tones still sit next to each other.
 * ---------------------------------------------------------------- */
.ae-lp-band--light { background: var(--ae-white); }
.ae-lp-band--cream { background: var(--ae-cream); }

/* Cards invert against their band, so they always have contrast and
 * the two bands read as visibly different treatments. */
/* Cards invert against their band and carry a soft vertical sheen so
 * they are not flat fills. */
.ae-lp-band--light .ae-lp-card {
	background: linear-gradient(158deg, #FFFDF6 0%, var(--ae-cream) 100%);
}
.ae-lp-band--cream .ae-lp-card {
	background: linear-gradient(158deg, var(--ae-white) 0%, #FCF8EF 100%);
}

.ae-lp-band + .ae-lp-band,
.ae-lp-faq,
.ae-lp-buy {
	border-top: 1px solid rgba(197, 162, 83, 0.3);
}

/* Small gold lozenge straddling the seam between two light bands.
 * Not needed where a band meets the emerald sample section - the tone
 * change is the boundary there. */
.ae-lp-band + .ae-lp-band { position: relative; }

.ae-lp-band + .ae-lp-band::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--ae-gold);
	opacity: 0.55;
}

/* "Inside This Report" contents grid - one card per <h3> */
.ae-lp-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 700px) {
	.ae-lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
}

@media (min-width: 1100px) {
	.ae-lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* A four-card run balances as 2x2 rather than a row of three
	 * plus a lone orphan. Browsers without :has() just keep the
	 * three-column default, which is a cosmetic difference only. */
	.ae-lp-cards:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 860px;
		margin-inline: auto;
	}
}

/* Shared card treatment - landing page cards, homepage pain cards
 * and journal cards all use one visual language. */
.ae-lp-card,
.ae-pain__card,
.ae-card {
	position: relative;
	isolation: isolate;
	background: var(--ae-white);
	border: 1px solid rgba(197, 162, 83, 0.32);
	border-radius: var(--ae-radius);
	padding: 1.45rem 1.5rem 1.5rem;
	/* Two-step elevation: a tight contact shadow plus a soft ambient
	 * one, so the card reads as lifted rather than outlined. */
	box-shadow:
		0 1px 2px rgba(6, 63, 55, 0.05),
		0 6px 18px rgba(6, 63, 55, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Gold filament along the top edge, brightening on hover. */
.ae-lp-card::before,
.ae-pain__card::before,
.ae-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	border-radius: var(--ae-radius) var(--ae-radius) 0 0;
	background: linear-gradient(90deg, transparent, var(--ae-gold) 28%, var(--ae-gold-light) 50%, var(--ae-gold) 72%, transparent);
	opacity: 0.5;
	transition: opacity 0.22s ease;
}

/* Temple-style corner bracket, top right. Text cards only - it would
 * sit on the artwork of a card that leads with an image. */
.ae-lp-card::after,
.ae-pain__card::after {
	content: "";
	position: absolute;
	top: 0.85rem;
	inset-inline-end: 0.85rem;
	width: 14px;
	height: 14px;
	border-top: 1px solid rgba(197, 162, 83, 0.55);
	border-inline-end: 1px solid rgba(197, 162, 83, 0.55);
	opacity: 0.65;
	transition: opacity 0.22s ease;
	pointer-events: none;
}

.ae-lp-card:hover,
.ae-pain__card:hover,
.ae-card:hover {
	transform: translateY(-5px);
	border-color: rgba(197, 162, 83, 0.75);
	box-shadow:
		0 2px 4px rgba(6, 63, 55, 0.06),
		0 16px 34px rgba(6, 63, 55, 0.14),
		0 0 22px rgba(197, 162, 83, 0.18);
}

.ae-lp-card:hover::before,
.ae-pain__card:hover::before,
.ae-card:hover::before { opacity: 1; }
.ae-lp-card:hover::after,
.ae-pain__card:hover::after { opacity: 1; }

.ae-lp-card__title {
	font-size: 1.08rem;
	line-height: 1.35;
	color: var(--ae-deep-emerald);
	margin-bottom: 0.55em;
	padding-inline-start: 1.5rem;
	position: relative;
}

/* Small gold star marker instead of a list bullet */
.ae-lp-card__title::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.42em;
	width: 0.7rem;
	height: 0.7rem;
	background: var(--ae-gold);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ae-lp-card p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--ae-muted);
	line-height: 1.6;
}

.ae-lp-card p + p { margin-top: 0.6em; }

/* Audience-card icon: gold glyph in a soft emerald disc, matching
 * the trust bar treatment. Injected server-side only for short card
 * grids whose heading matches a keyword - see
 * astro_emerald_lp_add_card_icons(). */
.ae-lp-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 0.85rem;
	border-radius: 50%;
	color: var(--ae-gold-text);
	border: 1px solid rgba(197, 162, 83, 0.5);
	background: radial-gradient(circle, rgba(197, 162, 83, 0.16) 0%, rgba(197, 162, 83, 0.04) 70%);
	transition: color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.ae-lp-card:hover .ae-lp-card__icon {
	color: var(--ae-royal-emerald);
	border-color: rgba(197, 162, 83, 0.85);
	transform: translateY(-2px);
}

/* The icon replaces the star marker on those cards. */
.ae-lp-card:has(.ae-lp-card__icon) .ae-lp-card__title { padding-inline-start: 0; }
.ae-lp-card:has(.ae-lp-card__icon) .ae-lp-card__title::before { display: none; }

/* A long card run is a contents list, so number it. Short runs (the
 * audience cards) keep the star marker - numbering four audiences
 * would imply a ranking. Threshold is 7+ cards; browsers without
 * :has() simply keep stars everywhere. */
.ae-lp-cards:has(> :nth-child(7)) { counter-reset: ae-lp-card; }

.ae-lp-cards:has(> :nth-child(7)) .ae-lp-card { counter-increment: ae-lp-card; }

.ae-lp-cards:has(> :nth-child(7)) .ae-lp-card__title {
	padding-inline-start: 0;
}

.ae-lp-cards:has(> :nth-child(7)) .ae-lp-card__title::before {
	content: counter(ae-lp-card, decimal-leading-zero);
	/* Reset the star marker's geometry back to normal flow. */
	position: static;
	width: auto;
	height: auto;
	background: none;
	clip-path: none;
	display: block;
	margin-bottom: 0.45em;
	font-family: var(--ae-font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ae-gold-text);
}

/* Closing prose after a run of cards (Separator block in the
 * description ends the grid) needs its own breathing room. */
.ae-lp-cards + .ae-lp-about__text { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* FAQ accordion (native <details>, no JS).
 * White here so it separates from the sand purchase section above
 * and the emerald CTA below. */
.ae-lp-faq { background: var(--ae-white); }

.ae-faq-list {
	max-width: 780px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ae-faq-item,
.wp-block-details {
	position: relative;
	background: linear-gradient(158deg, var(--ae-white) 0%, #FCF8EF 100%);
	border: 1px solid rgba(197, 162, 83, 0.32);
	border-radius: var(--ae-radius);
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(6, 63, 55, 0.05),
		0 6px 18px rgba(6, 63, 55, 0.05);
	transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Same gold filament as the cards, so the FAQ belongs to the same
 * family. Only lit on hover/open to keep the closed list calm. */
.ae-faq-item::before,
.wp-block-details::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ae-gold) 28%, var(--ae-gold-light) 50%, var(--ae-gold) 72%, transparent);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.ae-faq-item:hover,
.ae-faq-item[open],
.wp-block-details:hover,
.wp-block-details[open] {
	border-color: rgba(197, 162, 83, 0.7);
	box-shadow:
		0 2px 4px rgba(6, 63, 55, 0.06),
		0 12px 26px rgba(6, 63, 55, 0.1);
}

.ae-faq-item:hover::before,
.ae-faq-item[open]::before,
.wp-block-details:hover::before,
.wp-block-details[open]::before { opacity: 1; }

/* Native <details> snaps open; this eases the reveal. Closing stays
 * instant - the UA removes the content immediately and there is no
 * no-JS way around that. */
.ae-faq-item[open] .ae-faq-item__a,
.wp-block-details[open] > :not(summary) {
	animation: ae-faq-reveal 0.26s ease both;
}

@keyframes ae-faq-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.ae-faq-more {
	text-align: center;
	margin: 1.75rem 0 0;
	color: var(--ae-muted);
}

.ae-faq-more a {
	color: var(--ae-royal-emerald);
	font-weight: 600;
	margin-inline-start: 0.35em;
}

.ae-faq-item__q,
.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: 0.9rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	color: var(--ae-deep-emerald);
	list-style: none;
}

.ae-faq-item__q::-webkit-details-marker,
.wp-block-details > summary::-webkit-details-marker { display: none; }

/* Gold plus that becomes a minus when open */
.ae-faq-item__q::after,
.wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--ae-gold), var(--ae-gold)) center/100% 2px no-repeat,
		linear-gradient(var(--ae-gold), var(--ae-gold)) center/2px 100% no-repeat;
	transition: transform 0.2s ease;
}

.ae-faq-item[open] .ae-faq-item__q::after,
.wp-block-details[open] > summary::after {
	background: linear-gradient(var(--ae-gold), var(--ae-gold)) center/100% 2px no-repeat;
	transform: rotate(180deg);
}

.ae-faq-item[open] .ae-faq-item__q,
.wp-block-details[open] > summary { border-bottom: 1px dashed rgba(197, 162, 83, 0.4); }

.ae-faq-item__q:focus-visible,
.wp-block-details > summary:focus-visible {
	outline: 2px solid var(--ae-royal-emerald);
	outline-offset: -2px;
}

.ae-faq-item__a { padding: 1rem 1.25rem 1.15rem; }

/* Core Details blocks (the homepage FAQ is authored with these)
 * inherit the same treatment, so a block-built FAQ matches the
 * theme-rendered one on the landing page. */
.wp-block-details { position: relative; }
.wp-block-details > :not(summary) { padding: 1rem 1.25rem 1.15rem; margin: 0; }
.wp-block-details + .wp-block-details { margin-top: 0.75rem; }
.ae-faq-item__a p { margin: 0; color: var(--ae-muted); }
.ae-faq-item__a a { color: var(--ae-royal-emerald); }

/* ------------------------------------------------------------------
 * Sample report ("Look Inside a Real Report")
 *
 * Emerald surface (via .ae-section--emerald), sitting between the
 * cream description band above and the light How It Works below, so it
 * is the dark beat between two light ones. The paper stack is then the
 * one bright object in the section.
 * The whole page stack is the link, not just the button - a picture of
 * the document is what stops the scroll.
 * ---------------------------------------------------------------- */
.ae-lp-sample__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.25rem, 6vw, 4rem);
	align-items: center;
	justify-items: center;
}

.ae-lp-sample__content { text-align: center; max-width: 56ch; }
.ae-lp-sample__content h2 { margin-block: 0.35rem 0; }

@media (min-width: 900px) {
	.ae-lp-sample__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); justify-items: stretch; }
	.ae-lp-sample__stack { margin-inline: auto; }
	.ae-lp-sample__content { text-align: start; }
	.ae-lp-sample__content .ae-divider { justify-content: flex-start; }
}

/* The stack: the first page of the real PDF over two blank sheet
 * edges. The sheets are deliberately empty - inventing extra page
 * artwork would be showing something the buyer does not receive. */
.ae-lp-sample__stack {
	position: relative;
	display: block;
	width: min(100%, 300px);
	aspect-ratio: 1 / 1.414;
	transition: transform 220ms ease;
}

.ae-lp-sample__page,
.ae-lp-sample__sheet {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(197, 162, 83, 0.5);
	border-radius: 3px;
	background: var(--ae-cream);
}

.ae-lp-sample__sheet--back {
	transform: rotate(-7deg) translate(-9px, 4px);
	box-shadow: 0 6px 18px rgba(3, 47, 42, 0.1);
}

.ae-lp-sample__sheet--mid {
	transform: rotate(-3.5deg) translate(-4px, 2px);
	box-shadow: 0 6px 18px rgba(3, 47, 42, 0.1);
}

.ae-lp-sample__page {
	overflow: hidden;
	background: var(--ae-white);
	transform: rotate(1.5deg);
	box-shadow:
		0 2px 6px rgba(3, 47, 42, 0.12),
		0 18px 40px -12px rgba(3, 47, 42, 0.35),
		0 0 0 1px rgba(197, 162, 83, 0.18);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.ae-lp-sample__page img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* Always visible, never hover-only - this is the affordance that says
 * the artwork opens the PDF. */
.ae-lp-sample__open {
	position: absolute;
	inset-inline: 0;
	bottom: -0.9rem;
	z-index: 2;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1.05rem;
	border: 1px solid rgba(132, 105, 42, 0.45);
	border-radius: 999px;
	background: linear-gradient(135deg, #E2C77B 0%, #F0DFAC 100%);
	color: var(--ae-dark-forest);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 16px rgba(3, 47, 42, 0.22);
}

.ae-lp-sample__stack:hover .ae-lp-sample__page,
.ae-lp-sample__stack:focus-visible .ae-lp-sample__page {
	transform: rotate(0deg) translateY(-6px);
	box-shadow:
		0 3px 8px rgba(3, 47, 42, 0.14),
		0 26px 54px -14px rgba(3, 47, 42, 0.42),
		0 0 0 1px rgba(197, 162, 83, 0.45);
}

.ae-lp-sample__stack:focus-visible {
	outline: 2px solid var(--ae-gold-light);
	outline-offset: 8px;
	border-radius: 4px;
}

.ae-lp-sample__facts {
	list-style: none;
	margin: 1.25rem 0 1.6rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	text-align: start;
}

.ae-lp-sample__facts li {
	position: relative;
	padding-inline-start: 1.6rem;
	color: var(--ae-charcoal);
	font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.02rem);
}

.ae-lp-sample__facts li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.5em;
	width: 0.62rem;
	height: 0.62rem;
	background: var(--ae-gold);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ae-lp-sample__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
	margin: 0;
}

/* Deliberately after the two rules above, not up in the earlier
 * min-width block: an equal-specificity rule later in the file beats a
 * media query written earlier, so an override placed up there is
 * silently ignored. */
@media (min-width: 900px) {
	.ae-lp-sample__actions { justify-content: flex-start; }
}

/* Text on the emerald surface. Same reason as the rule above: these
 * must sit AFTER the light-surface defaults declared earlier in this
 * block, or they lose on source order.
 * :not(.ae-eyebrow) matters - this selector is (0,1,1) and would
 * otherwise outrank .ae-eyebrow--gold (0,1,0) and quietly turn the
 * gold eyebrow ivory. */
.ae-lp-sample__content > p:not(.ae-eyebrow) { color: rgba(255, 249, 236, 0.92); }
.ae-lp-sample__facts li { color: var(--ae-ivory); }
.ae-lp-sample__facts li::before { background: var(--ae-gold-light); }

/* Purchase section */
/* Cream, matching the description bands - its neighbours are the
 * emerald How It Works above and the white FAQ below, so it needs no
 * third light tone of its own. */
.ae-lp-buy { background: var(--ae-cream); }
.ae-lp-buy__lead { color: var(--ae-muted); margin-top: 0.75rem; }

.ae-lp-buy__panel {
	max-width: 680px;
	margin-inline: auto;
	scroll-margin-top: 90px;
}

.ae-lp-buy__panel .ae-product__purchase { max-width: none; margin-bottom: 0; }

/* Every WooCommerce price, so the currency symbol and digits always
 * share one typeface. tabular-nums keeps figures aligned. */
.woocommerce-Price-amount,
.ae-lp-buy__amount,
.ae-lp-buy__was {
	font-family: var(--ae-font-price);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* Price directly above the Buy Now button. This is the only place
 * the price appears on the page for desktop visitors, since the
 * sticky bar is hidden above 900px. */
.ae-lp-buy__price {
	clear: both;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.15rem 0.7rem;
	margin: 0 0 1.1rem;
}

/* Was-price: bold but muted and smaller, so the payable figure
 * still leads. */
.ae-lp-buy__was {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ae-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.ae-lp-buy__was .woocommerce-Price-amount { color: inherit; }

.ae-lp-buy__amount {
	font-size: clamp(1.6rem, 1.35rem + 1vw, 2.05rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ae-deep-emerald);
}

/* Policy cover line under the button. WooCommerce floats the
 * add-to-cart button left, so this must clear it. */
/* "Still deciding?" jump back to the sample section. Sits between the
 * Buy Now button and the cover line, so it clears the floated button
 * the same way. */
.ae-lp-buy__sample {
	clear: both;
	width: 100%;
	text-align: center;
	margin: 0;
	padding-top: 0.5rem;
	font-size: 0.9rem;
}

.ae-lp-buy__sample a {
	display: inline-block;
	padding: 0.55rem 0.35rem;
	color: var(--ae-royal-emerald);
	font-weight: 600;
	text-underline-offset: 3px;
}

.ae-lp-cover {
	clear: both;
	width: 100%;
	text-align: center;
	margin: 0;
	padding-top: 0.9rem;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--ae-muted);
}

.ae-lp-cover a {
	color: var(--ae-royal-emerald);
	font-weight: 600;
}

/* Shield sits on the text baseline-ish rather than as a separate
 * element, so a one-line cover note stays one line. */
.ae-lp-cover__icon {
	color: var(--ae-gold);
	vertical-align: -0.18em;
	margin-inline-end: 0.4em;
}


/* Secondary CTA line - quieter than the lead paragraph. */
.ae-final-cta__note {
	font-size: 0.95rem;
	color: rgba(250, 243, 227, 0.78);
}

/* Discount pill, gold on the light panel. */
.ae-lp-buy__save {
	align-self: center;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ae-dark-forest);
	background: linear-gradient(135deg, #E2C77B 0%, #F0DFAC 50%, #E2C77B 100%);
	border: 1px solid var(--ae-gold);
	border-radius: 999px;
	padding: 0.3em 0.85em;
	white-space: nowrap;
}

/* [ae_buy_now] shortcode */
.ae-buy-now-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-block: 1.5rem;
}

.ae-buy-now-block__price {
	font-family: var(--ae-font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ae-deep-emerald);
}

.ae-buy-now-block__price del { color: var(--ae-muted); opacity: 1; font-weight: 400; }
.ae-buy-now-block__price ins { color: var(--ae-success); text-decoration: none; }

.ae-buy-now-block--empty {
	color: var(--ae-error);
	background: var(--ae-white);
	border: 1px dashed var(--ae-error);
	border-radius: var(--ae-radius-sm);
	padding: 0.75em 1em;
	text-align: center;
}

/* ------------------------------------------------------------------
 * 3. Buttons
 * ---------------------------------------------------------------- */
.ae-btn,
button.ae-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.7em 1.6em;
	border-radius: var(--ae-radius-sm);
	border: 2px solid transparent;
	font-family: var(--ae-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ae-btn:hover { transform: translateY(-2px); box-shadow: var(--ae-shadow-lift); }
.ae-btn:active { transform: translateY(0); }

/* Two-line button: label with a quieter qualifier under it (used by
 * the sample-report button for "Opens in a new tab"). The base button
 * is a row flex, so this only flips the axis. */
.ae-btn--stacked {
	flex-direction: column;
	gap: 0.15em;
	padding-block: 0.6em;
	line-height: 1.25;
}

.ae-btn__sub {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	opacity: 0.82;
}

.ae-btn--emerald {
	background: var(--ae-royal-emerald);
	color: var(--ae-white);
}
.ae-btn--emerald:hover { background: var(--ae-deep-emerald); color: var(--ae-white); }

.ae-btn--gold {
	background: linear-gradient(135deg, var(--ae-gold) 0%, var(--ae-gold-light) 55%, var(--ae-gold) 100%);
	background-size: 200% 200%;
	color: var(--ae-dark-forest);
	border-color: rgba(197, 162, 83, 0.6);
}
.ae-btn--gold:hover {
	color: var(--ae-dark-forest);
	animation: ae-shimmer 1.6s ease infinite;
}

/* Gold for LIGHT surfaces (white/cream cards) - the standard
 * ae-btn--gold gradient is tuned for dark emerald backgrounds and
 * reads brownish on white. */
.ae-btn--gold-light {
	background: linear-gradient(135deg, #E2C77B 0%, #F0DFAC 50%, #E2C77B 100%);
	background-size: 200% 200%;
	color: var(--ae-dark-forest);
	border-color: var(--ae-gold);
}

/* Same shimmer as .ae-btn--gold so every gold button, light surface
 * or dark, behaves identically on hover. */
.ae-btn--gold-light:hover {
	color: var(--ae-dark-forest);
	box-shadow: 0 4px 14px rgba(197, 162, 83, 0.4);
	animation: ae-shimmer 1.6s ease infinite;
}

.ae-btn--outline {
	border-color: var(--ae-royal-emerald);
	color: var(--ae-royal-emerald);
	background: transparent;
}
.ae-btn--outline:hover { background: var(--ae-royal-emerald); color: var(--ae-white); }

.ae-btn--outline-light {
	border-color: var(--ae-gold-light);
	color: var(--ae-ivory);
	background: transparent;
}
.ae-btn--outline-light:hover { background: rgba(226, 199, 123, 0.15); color: var(--ae-white); }

@keyframes ae-shimmer {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ------------------------------------------------------------------
 * 4. Announcement + header
 * ---------------------------------------------------------------- */
.ae-announcement {
	background: var(--ae-dark-forest);
	color: var(--ae-gold-light);
	text-align: center;
	font-size: 0.875rem;
	padding: 0.55em var(--ae-gutter);
}
.ae-announcement p { margin: 0; }

.ae-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--ae-deep-emerald);
	color: var(--ae-ivory);
	border-bottom: 1px solid rgba(197, 162, 83, 0.4);
}

.ae-header__inner {
	width: min(100% - 2 * var(--ae-gutter), var(--ae-container));
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 52px;
	padding-block: 0.25rem;
}

.ae-header__brand { flex-shrink: 0; }
.ae-header__brand img { max-height: 40px; width: auto; }

.ae-header__title {
	font-family: var(--ae-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ae-ivory);
	text-decoration: none;
	letter-spacing: 0.02em;
}
.ae-header__title:hover { color: var(--ae-gold-light); }

/* Primary nav - desktop */
.ae-nav { margin-inline-start: auto; }

.ae-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.25rem;
}

.ae-nav li { position: relative; }

.ae-nav a {
	display: block;
	padding: 0.6em 0.85em;
	color: var(--ae-ivory);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	border-radius: var(--ae-radius-sm);
}

.ae-nav a:hover,
.ae-nav .current-menu-item > a {
	color: var(--ae-gold-light);
}

.ae-nav .sub-menu {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	min-width: 220px;
	background: var(--ae-white);
	border: var(--ae-border);
	border-radius: var(--ae-radius-sm);
	box-shadow: var(--ae-shadow-lift);
	padding: 0.4rem;
	display: none;
	flex-direction: column;
	z-index: 95;
}

.ae-nav li:hover > .sub-menu,
.ae-nav li:focus-within > .sub-menu {
	display: flex;
}

.ae-nav .sub-menu a { color: var(--ae-deep-emerald); }
.ae-nav .sub-menu a:hover { background: var(--ae-cream); color: var(--ae-deep-emerald); }

.ae-header__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-inline-start: auto;
}

.ae-nav + .ae-header__actions { margin-inline-start: 0; }

.ae-header__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--ae-ivory);
	border-radius: var(--ae-radius-sm);
	position: relative;
	text-decoration: none;
}
.ae-header__action:hover { color: var(--ae-gold-light); }

/* Mobile nav toggle */
.ae-nav-toggle {
	display: none;
	background: none;
	border: 0;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
	color: var(--ae-ivory);
	align-items: center;
	justify-content: center;
}

.ae-nav-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.ae-nav-toggle__bars span {
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.ae-nav-toggle[aria-expanded="true"] .ae-nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ae-nav-toggle[aria-expanded="true"] .ae-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.ae-nav-toggle[aria-expanded="true"] .ae-nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Very small phones: let the brand shrink so cart and menu stay visible */
@media (max-width: 480px) {
	.ae-header__inner { gap: 0.4rem; }

	.ae-header__brand {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
	}

	.ae-header__brand img { max-height: 38px; }

	.ae-header__title {
		display: block;
		font-size: 1.2rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ae-header__actions { gap: 0; flex-shrink: 0; }
	.ae-header__action { min-width: 42px; }
}

@media (max-width: 900px) {
	.ae-nav-toggle { display: inline-flex; }

	/* Nav is position:fixed here (off-canvas), so the sibling rule
	 * that zeroes the actions margin no longer applies visually -
	 * push the hamburger to the right edge. */
	.ae-nav + .ae-header__actions,
	.ae-header__actions { margin-inline-start: auto; }

	.ae-nav {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		width: min(320px, 85vw);
		background: var(--ae-deep-emerald);
		padding: 5rem 1.5rem 2rem;
		transform: translateX(100%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		z-index: 89;
		box-shadow: -8px 0 30px rgba(3, 47, 42, 0.35);
	}

	.ae-nav.is-open { transform: translateX(0); }

	.ae-nav ul { flex-direction: column; gap: 0; }

	.ae-nav a {
		padding: 0.9em 0.5em;
		font-size: 1.05rem;
		border-bottom: 1px solid rgba(226, 199, 123, 0.15);
	}

	.ae-nav .sub-menu {
		display: flex;
		position: static;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
	}

	.ae-nav .sub-menu a { color: var(--ae-cream); font-size: 0.95rem; }
	.ae-nav .sub-menu a:hover { background: transparent; color: var(--ae-gold-light); }
}

/* ------------------------------------------------------------------
 * 5. Hero
 * ---------------------------------------------------------------- */
.ae-hero {
	position: relative;
	background:
		radial-gradient(ellipse at 78% 30%, rgba(8, 106, 88, 0.65) 0%, transparent 52%),
		radial-gradient(ellipse at 8% 90%, rgba(197, 162, 83, 0.12) 0%, transparent 45%),
		linear-gradient(165deg, var(--ae-deep-emerald) 0%, var(--ae-dark-forest) 100%);
	color: var(--ae-ivory);
	overflow: hidden;
}

.ae-hero__layout {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2rem;
	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 10vw, 7.5rem);
}

.ae-hero__content {
	max-width: 620px;
	text-align: center;
	margin-inline: auto;
}

.ae-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	color: var(--ae-gold-light);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.78rem;
	font-weight: 600;
	margin-bottom: 1.1rem;
}

.ae-hero__eyebrow-rule {
	width: 42px;
	height: 1px;
	flex: 0 0 auto;
	background: linear-gradient(90deg, transparent, var(--ae-gold-light));
}

/* Trailing rule mirrors the fade so it points away from the text. */
.ae-hero__eyebrow-rule--after {
	background: linear-gradient(90deg, var(--ae-gold-light), transparent);
}

.ae-hero__heading {
	color: var(--ae-ivory);
	font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
	letter-spacing: 0.01em;
	text-wrap: balance;
	margin-bottom: 0.35em;
}

.ae-hero__flourish {
	color: var(--ae-gold);
	display: flex;
	justify-content: center;
	margin-bottom: 1.1rem;
}

.ae-hero__sub {
	color: rgba(250, 243, 227, 0.88);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: 2rem;
}

.ae-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
}

.ae-hero__assurances {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	color: rgba(250, 243, 227, 0.75);
	font-size: 0.85rem;
}

.ae-hero__assurances li {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.ae-hero__assurances li::before {
	content: "";
	width: 5px;
	height: 5px;
	rotate: 45deg;
	background: var(--ae-gold);
	flex-shrink: 0;
}

.ae-hero__art {
	display: none;
	color: var(--ae-gold-light);
	justify-self: center;
	position: relative;
}

.ae-hero__art::before {
	content: "";
	position: absolute;
	inset: -9%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 199, 123, 0.14) 0%, transparent 62%);
}

.ae-hero__wheel {
	width: clamp(336px, 38.4vw, 576px);
	display: block;
	animation: ae-rotate 35s linear infinite;
}

@media (min-width: 981px) {
	.ae-hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }

	/* Oversized wheel bleeding off the right edge, reference-style;
	 * .ae-hero has overflow:hidden so the crop is clean. */
	.ae-hero__art {
		justify-self: end;
		margin-inline-end: clamp(-180px, -9vw, -60px);
		margin-block: -3rem;
	}

	.ae-hero__content {
		text-align: start;
		margin-inline: 0;
	}

	.ae-hero__content .ae-hero__sub,
	.ae-hero__content .ae-hero__flourish { margin-inline: 0; justify-content: flex-start; }
	.ae-hero__actions,
	.ae-hero__assurances { justify-content: flex-start; }

	.ae-hero__art { display: block; }
}

@keyframes ae-rotate {
	to { transform: rotate(360deg); }
}

/* Temple-inspired border strip along the hero base */
.ae-temple-border {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 12px;
	z-index: 3;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Cpath d='M0 12 L0 8 L6 8 L9 3 L12 8 L15 8 L18 0 L21 8 L24 8 L27 3 L30 8 L36 8 L36 12 Z' fill='%23FFF9EC'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 36px 12px;
}

.ae-star {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--ae-gold-light);
	opacity: 0.7;
	animation: ae-twinkle 4s ease-in-out infinite;
}

.ae-star--1 { top: 18%; left: 12%; }
.ae-star--2 { top: 32%; left: 26%; animation-delay: 0.8s; }
.ae-star--3 { top: 12%; left: 58%; animation-delay: 1.6s; }
.ae-star--4 { top: 64%; left: 8%; animation-delay: 2.4s; }
.ae-star--5 { top: 74%; left: 44%; animation-delay: 1.1s; }
.ae-star--6 { top: 40%; left: 82%; animation-delay: 2.9s; }

@keyframes ae-twinkle {
	0%, 100% { opacity: 0.25; transform: scale(1); }
	50% { opacity: 0.9; transform: scale(1.5); }
}

/* ------------------------------------------------------------------
 * 6. Sections
 * ---------------------------------------------------------------- */
.ae-section { padding-block: var(--ae-section-pad); position: relative; }

.ae-section--cream { background: var(--ae-cream); }

/* Faint mandala watermark on light sections */
.ae-section--cream::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23C5A253' stroke-width='0.6' opacity='0.16'%3E%3Ccircle cx='210' cy='210' r='180'/%3E%3Ccircle cx='210' cy='210' r='140'/%3E%3Ccircle cx='210' cy='210' r='96'/%3E%3Cpath d='M210 30v360M30 210h360M83 83l254 254M337 83L83 337'/%3E%3Cpath d='M210 114c22 26 22 166 0 192-22-26-22-166 0-192zM114 210c26-22 166-22 192 0-26 22-166 22-192 0z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right -120px top -120px;
	background-size: 420px 420px;
}

.ae-eyebrow {
	color: var(--ae-gold-text);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.76rem;
	font-weight: 700;
	margin-bottom: 0.6rem;
}

.ae-eyebrow--gold { color: var(--ae-gold-light); }

.ae-section--emerald {
	background:
		radial-gradient(ellipse at 15% 90%, rgba(8, 106, 88, 0.5) 0%, transparent 55%),
		linear-gradient(160deg, var(--ae-deep-emerald), var(--ae-dark-forest));
	color: var(--ae-cream);
}

.ae-section--emerald h2,
.ae-section--emerald h3 { color: var(--ae-ivory); }
.ae-section--emerald .ae-divider { color: var(--ae-gold-light); }
.ae-section--emerald a { color: var(--ae-gold-light); }

/* Buttons keep their own text colors inside emerald sections
 * (the link rule above must not win - gold-on-gold is unreadable) */
.ae-section--emerald a.ae-btn--gold { color: var(--ae-dark-forest); }
.ae-section--emerald a.ae-btn--emerald { color: var(--ae-white); }
.ae-section--emerald a.ae-btn--outline-light { color: var(--ae-ivory); }
.ae-section--emerald a.ae-btn--outline-light:hover { color: var(--ae-white); }

.ae-section__header {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.ae-section__cta { text-align: center; margin-block-start: 2.25rem; }

.ae-divider {
	color: var(--ae-gold);
	display: flex;
	justify-content: center;
	margin-block: 0.75rem 0;
}

.ae-page-header { text-align: center; margin-block-end: clamp(1.75rem, 5vw, 3rem); }
.ae-page-header__description { color: var(--ae-muted); max-width: 60ch; margin-inline: auto; }

/* Trust indicators */
.ae-trust {
	background: var(--ae-sand);
	border-block: var(--ae-border);
	padding-block: 1.75rem;
}

.ae-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	text-align: center;
}

.ae-trust__value {
	display: block;
	font-family: var(--ae-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
	font-weight: 700;
	color: var(--ae-deep-emerald);
}

.ae-trust__label {
	color: var(--ae-muted);
	font-size: 0.9rem;
}

@media (min-width: 768px) {
	.ae-trust__list { grid-template-columns: repeat(4, 1fr); }
}

/* Steps (How it works) */
.ae-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	counter-reset: ae-step;
}

.ae-step {
	position: relative;
	isolation: isolate;
	background: rgba(255, 249, 236, 0.06);
	border: 1px solid rgba(226, 199, 123, 0.3);
	border-radius: var(--ae-radius);
	padding: 1.75rem 1.5rem;
	text-align: center;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Same card language as .ae-lp-card: gold filament along the top edge
 * that brightens on hover, plus a lift. */
.ae-step::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	border-radius: var(--ae-radius) var(--ae-radius) 0 0;
	background: linear-gradient(90deg, transparent, var(--ae-gold) 28%, var(--ae-gold-light) 50%, var(--ae-gold) 72%, transparent);
	opacity: 0.5;
	transition: opacity 0.22s ease;
}

/* main.js gives every step an .ae-reveal class, and .ae-reveal owns
 * `transition` further down this file, so the step's own transition
 * loses on source order. The descendant selector wins it back, and the
 * hover below needs .ae-steps too: .ae-reveal.is-visible sets
 * `transform: none` at (0,2,0) LATER in the file, which cancels a
 * plain .ae-step:hover lift outright. */
.ae-steps .ae-step {
	transition: opacity 0.6s ease, transform 0.3s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ae-steps .ae-step:hover {
	transform: translateY(-5px);
	border-color: rgba(226, 199, 123, 0.6);
	box-shadow:
		0 2px 4px rgba(3, 21, 18, 0.25),
		0 16px 34px rgba(3, 21, 18, 0.35),
		0 0 22px rgba(197, 162, 83, 0.18);
}

.ae-step:hover::before { opacity: 1; }

.ae-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--ae-gold-light);
	color: var(--ae-gold-light);
	font-family: var(--ae-font-display);
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.9rem;
}

.ae-step h3 { margin-bottom: 0.35em; font-size: 1.2rem; }
.ae-step p { margin: 0; font-size: 0.95rem; color: var(--ae-cream); }

@media (min-width: 640px) { .ae-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ae-steps { grid-template-columns: repeat(4, 1fr); } }

/* A three-step run must not sit in a four-column grid with an empty
 * slot, nor a two-column one with an orphan. Give it its own rhythm:
 * one column until there is room for a clean row of three. Browsers
 * without :has() fall back to the defaults above. */
@media (min-width: 640px) and (max-width: 899px) {
	.ae-steps:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
	.ae-steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* Light variant of How It Works, used by the landing page because the
 * sample section directly above it is emerald. Steps take the same
 * card treatment as .ae-lp-card so the page has one card language.
 * Declared after the emerald defaults above, which it overrides. */
.ae-lp-how--light { background: var(--ae-white); }

.ae-lp-how--light .ae-step {
	background: linear-gradient(158deg, #FFFDF6 0%, var(--ae-cream) 100%);
	border-color: rgba(197, 162, 83, 0.45);
	box-shadow:
		0 1px 2px rgba(3, 47, 42, 0.06),
		0 10px 24px -14px rgba(3, 47, 42, 0.3);
}

/* --ae-gold-light has nowhere near enough contrast on cream; the
 * darkened gold token is the text-safe one. */
.ae-lp-how--light .ae-step__num {
	border-color: rgba(132, 105, 42, 0.55);
	color: var(--ae-gold-text);
}

.ae-lp-how--light .ae-step p { color: var(--ae-muted); }

/* Light-surface hover shadow, identical to .ae-lp-card. Must be
 * declared after `.ae-lp-how--light .ae-step` above - that selector is
 * (0,2,0) and would otherwise beat a plain `.ae-step:hover` on source
 * order and cancel the lift. */
.ae-lp-how--light .ae-steps .ae-step:hover {
	border-color: rgba(197, 162, 83, 0.75);
	box-shadow:
		0 2px 4px rgba(6, 63, 55, 0.06),
		0 16px 34px rgba(6, 63, 55, 0.14),
		0 0 22px rgba(197, 162, 83, 0.18);
}

/* Astrologer */
.ae-astrologer {
	display: grid;
	gap: 2rem;
	align-items: center;
	width: min(100% - 2 * var(--ae-gutter), 960px);
}

.ae-astrologer__photo img {
	border-radius: var(--ae-radius);
	border: 3px solid var(--ae-gold-light);
	box-shadow: var(--ae-shadow);
}

.ae-astrologer .ae-divider { justify-content: flex-start; }

@media (min-width: 768px) {
	.ae-astrologer { grid-template-columns: 320px 1fr; }
}

/* Final CTA */
.ae-final-cta { text-align: center; }
.ae-final-cta p { max-width: 56ch; margin-inline: auto; margin-bottom: 1.75rem; }

/* Trust badge bar (under hero) */
/* Dark forest, matching the footer, so every page opens and closes
 * on the same tone. Used on the homepage and landing pages alike. */
.ae-trustbar {
	background: linear-gradient(180deg, var(--ae-dark-forest) 0%, #02201C 100%);
	padding-block: clamp(1.5rem, 3vw, 2rem);
}

.ae-trustbar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem 1rem;
}

@media (min-width: 900px) { .ae-trustbar__list { grid-template-columns: repeat(4, 1fr); } }

.ae-trustbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.15rem;
}

.ae-trustbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: var(--ae-gold-light);
	border: 1.5px solid rgba(226, 199, 123, 0.45);
	background: radial-gradient(circle, rgba(226, 199, 123, 0.14) 0%, rgba(226, 199, 123, 0.03) 70%);
	margin-bottom: 0.5rem;
}

.ae-trustbar__title {
	font-weight: 700;
	color: var(--ae-ivory);
	font-size: 0.98rem;
	line-height: 1.3;
}

.ae-trustbar__sub {
	color: rgba(250, 243, 227, 0.72);
	font-size: 0.82rem;
}

/* "Why Order" benefit cards - reuse .ae-lp-card, so they inherit the
 * shared card treatment; this only supplies the grid. */
.ae-benefits__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.15rem;
}

@media (min-width: 760px) {
	.ae-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ae-benefits__grid p { margin: 0; color: var(--ae-muted); font-size: 0.95rem; }

/* Pain-point cards */
.ae-pain__grid {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) { .ae-pain__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ae-pain__grid { grid-template-columns: repeat(3, 1fr); } }

.ae-pain__card {
	padding: 1.45rem 1.5rem;
	display: flex;
	align-items: center;
}

.ae-pain__q {
	font-family: var(--ae-font-display);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--ae-deep-emerald);
	line-height: 1.45;
}

.ae-pain__answer {
	text-align: center;
	max-width: 58ch;
	margin-inline: auto;
	font-size: 1.05rem;
	color: var(--ae-charcoal);
}

/* Comparison: generic vs personal */
.ae-compare { background: var(--ae-sand); }

.ae-compare__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 1000px;
	margin-inline: auto;
}

@media (min-width: 820px) { .ae-compare__cols { grid-template-columns: 1fr 1fr; } }

.ae-compare__col {
	border-radius: var(--ae-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.ae-compare__col h3 {
	text-align: center;
	margin-bottom: 1.25rem;
	font-size: 1.3rem;
}

.ae-compare__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ae-compare__col li {
	position: relative;
	padding: 0.55em 0 0.55em 2em;
	border-bottom: 1px dashed rgba(197, 162, 83, 0.35);
	font-size: 0.98rem;
}

.ae-compare__col li:last-child { border-bottom: 0; }

.ae-compare__col li::before {
	position: absolute;
	left: 0;
	top: 0.55em;
	font-weight: 700;
}

.ae-compare__col--generic {
	background: var(--ae-white);
	border: 1px solid rgba(94, 98, 95, 0.25);
	opacity: 0.92;
}

.ae-compare__col--generic h3 { color: var(--ae-muted); }
.ae-compare__col--generic li { color: var(--ae-muted); }
.ae-compare__col--generic li::before { content: "\2715"; color: var(--ae-error); font-size: 0.85em; top: 0.75em; }

.ae-compare__col--personal {
	background: linear-gradient(165deg, var(--ae-deep-emerald), var(--ae-dark-forest));
	border: 1px solid rgba(197, 162, 83, 0.55);
	box-shadow: var(--ae-shadow-lift);
	color: var(--ae-cream);
}

.ae-compare__col--personal h3 { color: var(--ae-gold-light); }
.ae-compare__col--personal li { border-bottom-color: rgba(226, 199, 123, 0.25); }
.ae-compare__col--personal li::before { content: "\2713"; color: var(--ae-gold-light); }

/* ------------------------------------------------------------------
 * 7. Cards / blog
 * ---------------------------------------------------------------- */
.ae-post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) { .ae-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ae-post-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Post cards carry their padding on .ae-card__body so the thumbnail can
 * bleed to the card edge - the shared card padding above would inset the
 * image and squeeze the text column into a narrow ribbon. */
.ae-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.ae-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ae-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ae-card__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }

.ae-card__title { font-size: 1.3rem; margin-bottom: 0.4em; }
.ae-card__title a { color: var(--ae-deep-emerald); text-decoration: none; }
.ae-card__title a:hover { color: var(--ae-royal-emerald); }

.ae-card__excerpt { color: var(--ae-muted); font-size: 0.95rem; flex: 1; }
.ae-card__excerpt p { margin-bottom: 0.75em; }

.ae-card__more {
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--ae-royal-emerald);
	margin-top: auto;
}
.ae-card__more::after { content: " \2192"; }

.ae-entry-meta {
	color: var(--ae-muted);
	font-size: 0.85rem;
	display: flex;
	gap: 0.5em;
	margin-bottom: 0.75em;
}

.ae-page-header .ae-entry-meta { justify-content: center; }

/* Single post / page */
.ae-entry-content {
	max-width: var(--ae-content);
	margin-inline: auto;
}

.ae-entry-content img { border-radius: var(--ae-radius-sm); }

.ae-entry-content blockquote {
	border-inline-start: 3px solid var(--ae-gold);
	background: var(--ae-cream);
	margin-inline: 0;
	padding: 1rem 1.5rem;
	border-radius: 0 var(--ae-radius-sm) var(--ae-radius-sm) 0;
	font-family: var(--ae-font-display);
	font-size: 1.15rem;
}

.ae-single__thumbnail { margin: 0 0 2rem; }
.ae-single__thumbnail img { border-radius: var(--ae-radius); width: 100%; }

.ae-single__category {
	display: inline-block;
	color: var(--ae-gold-text);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 0.75rem;
}

.ae-single__footer { margin-block-start: 2.5rem; }

.ae-single__tags a {
	display: inline-block;
	background: var(--ae-sand);
	border: var(--ae-border);
	color: var(--ae-deep-emerald);
	font-size: 0.82rem;
	padding: 0.25em 0.9em;
	border-radius: 999px;
	text-decoration: none;
	margin: 0 0.3rem 0.5rem 0;
}

.ae-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-top: var(--ae-border);
	padding-top: 1.25rem;
	margin-top: 1.5rem;
}

/* Tables inside content stay scrollable on small screens */
.ae-entry-content table {
	border-collapse: collapse;
	width: 100%;
}

.ae-entry-content table td,
.ae-entry-content table th {
	border: 1px solid rgba(197, 162, 83, 0.4);
	padding: 0.6em 0.9em;
	text-align: start;
}

/* ------------------------------------------------------------------
 * 8. Breadcrumbs, pagination, misc
 * ---------------------------------------------------------------- */
.ae-breadcrumbs {
	font-size: 0.85rem;
	color: var(--ae-muted);
	margin-block: 0.5rem 1.5rem;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.ae-breadcrumbs a { color: var(--ae-muted); }
.ae-breadcrumbs a:hover { color: var(--ae-royal-emerald); }
.ae-breadcrumbs__sep { margin-inline: 0.5em; opacity: 0.6; }

.pagination,
.ae-main .navigation {
	margin-block-start: 2.5rem;
	text-align: center;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.3em 0.8em;
	border: var(--ae-border);
	border-radius: var(--ae-radius-sm);
	background: var(--ae-white);
	color: var(--ae-deep-emerald);
	text-decoration: none;
}

.nav-links .page-numbers.current {
	background: var(--ae-royal-emerald);
	color: var(--ae-white);
	border-color: var(--ae-royal-emerald);
}

.nav-links a.page-numbers:hover { background: var(--ae-cream); }

/* Search form */
.ae-search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
}

.ae-search-form__input {
	flex: 1;
	min-height: 48px;
	padding: 0.5em 1em;
	border: 1.5px solid rgba(197, 162, 83, 0.5);
	border-radius: var(--ae-radius-sm);
	background: var(--ae-white);
	font-size: 1rem;
	color: var(--ae-charcoal);
}

.ae-search-form__input:focus {
	border-color: var(--ae-royal-emerald);
	outline: 2px solid rgba(8, 106, 88, 0.25);
}

.ae-search-form__submit {
	min-height: 48px;
	padding: 0.5em 1.4em;
	background: var(--ae-royal-emerald);
	color: var(--ae-white);
	border: 0;
	border-radius: var(--ae-radius-sm);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

.ae-search-form__submit:hover { background: var(--ae-deep-emerald); }

.ae-search-form-wrap { margin-block-end: 2rem; display: flex; justify-content: center; }

/* Empty states + 404 */
.ae-none,
.ae-404 {
	text-align: center;
	padding-block: clamp(2rem, 8vw, 4rem);
}

.ae-404__art { color: var(--ae-gold); margin-bottom: 1.5rem; }

.ae-404__actions,
.ae-none .ae-btn {
	margin-top: 1.5rem;
}

.ae-404__actions {
	display: flex;
	gap: 0.9rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Forms (general) */
.ae-main input[type="text"],
.ae-main input[type="email"],
.ae-main input[type="url"],
.ae-main input[type="tel"],
.ae-main input[type="password"],
.ae-main input[type="date"],
.ae-main input[type="time"],
.ae-main input[type="number"],
.ae-main input[type="search"],
.ae-main select,
.ae-main textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.55em 0.9em;
	border: 1.5px solid rgba(94, 98, 95, 0.45);
	border-radius: var(--ae-radius-sm);
	background: var(--ae-white);
	color: var(--ae-charcoal);
	font-family: inherit;
	font-size: 1rem;
}

.ae-main textarea { min-height: 110px; }

/* Date/time fields: phones render these with the native control
 * appearance, which ignores CSS width and makes them wider/taller
 * than the other fields. Strip it and size them like every input. */
.ae-main input[type="date"],
.ae-main input[type="time"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	background: var(--ae-white);
	color: var(--ae-charcoal);
	line-height: 1.4;
}

.ae-main input[type="date"]::-webkit-date-and-time-value,
.ae-main input[type="time"]::-webkit-date-and-time-value {
	text-align: start;
	min-height: 1.4em;
}

.ae-main input[type="date"]::-webkit-calendar-picker-indicator,
.ae-main input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: 0.6;
}

.ae-main input:focus,
.ae-main select:focus,
.ae-main textarea:focus {
	border-color: var(--ae-royal-emerald);
	outline: 2px solid rgba(8, 106, 88, 0.25);
}

.ae-required { color: var(--ae-error); }

/* Comments */
.ae-comments { margin-block-start: 3rem; border-top: var(--ae-border); padding-top: 2rem; }
.ae-comments__list { list-style: none; padding: 0; }
.ae-comments__list .comment-body {
	background: var(--ae-white);
	border: var(--ae-border);
	border-radius: var(--ae-radius);
	padding: 1.25rem;
	margin-bottom: 1rem;
}
.ae-comments .children { list-style: none; padding-inline-start: clamp(1rem, 4vw, 2.5rem); }
.comment-form label { display: block; font-weight: 600; margin-bottom: 0.3em; }
.comment-form p { margin-bottom: 1rem; }
.comment-form .submit {
	background: var(--ae-royal-emerald);
	color: var(--ae-white);
	border: 0;
	border-radius: var(--ae-radius-sm);
	min-height: 48px;
	padding: 0.6em 1.6em;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.comment-form .submit:hover { background: var(--ae-deep-emerald); }

/* ------------------------------------------------------------------
 * 9. Footer
 * ---------------------------------------------------------------- */
.ae-footer {
	background: linear-gradient(180deg, var(--ae-dark-forest) 0%, #02201C 100%);
	color: var(--ae-cream);
	margin-top: auto;
}

/* Gold gradient rule - the footer's top edge, reused at the bottom
 * of product landing heroes. One definition, two places. */
.ae-footer__ornament,
.ae-gold-rule {
	height: 4px;
	background: linear-gradient(90deg, transparent, var(--ae-gold) 25%, var(--ae-gold-light) 50%, var(--ae-gold) 75%, transparent);
}

.ae-footer__inner {
	width: min(100% - 2 * var(--ae-gutter), var(--ae-container));
	margin-inline: auto;
	padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.ae-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 640px) { .ae-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ae-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

.ae-footer__heading {
	font-size: 1.05rem;
	color: var(--ae-gold-light);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-family: var(--ae-font-body);
	font-weight: 600;
	margin-bottom: 1rem;
}

.ae-footer__brand {
	font-family: var(--ae-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ae-ivory);
	margin-bottom: 0.5rem;
}

.ae-footer__tagline { color: rgba(250, 243, 227, 0.75); font-size: 0.92rem; }

.ae-footer ul { list-style: none; margin: 0; padding: 0; }
.ae-footer li { margin-bottom: 0.5rem; }

.ae-footer a {
	color: var(--ae-cream);
	text-decoration: none;
	font-size: 0.95rem;
}
.ae-footer a:hover { color: var(--ae-gold-light); text-decoration: underline; }

.ae-footer__contact { font-style: normal; font-size: 0.95rem; line-height: 2; }

.ae-social {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ae-social a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid rgba(226, 199, 123, 0.4);
	border-radius: 999px;
	font-size: 0.85rem;
}
.ae-social a:hover { border-color: var(--ae-gold-light); text-decoration: none; }

.ae-footer__bottom {
	color: rgba(250, 243, 227, 0.6);
	font-size: 0.82rem;
	padding-top: 0.5rem;
	text-align: center;
}

/* ------------------------------------------------------------------
 * 10. Motion + accessibility preferences
 * ---------------------------------------------------------------- */
.ae-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ae-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* The rule above is (0,2,0) and sits later in this file than the card
 * hover rules, so it silently cancelled the hover lift on every card
 * main.js reveals (.ae-lp-card and .ae-pain__card are not reveal
 * targets and were never affected).
 * Restore it here, after the reveal rules. */
.ae-card.is-visible:hover { transform: translateY(-5px); }

@media (max-width: 767px) {
	/* Calm continuous motion on small screens. The wheel deliberately
	 * keeps its 35s desktop duration per owner - same speed everywhere. */
	.ae-star { animation: none; opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.ae-reveal { opacity: 1; transform: none; }
}

/* RTL adjustments for the few physical properties in use */
/* Homepage wheel only - the landing-page wheel is centre-positioned
 * behind the cover, so an inline offset here would over-constrain it. */
[dir="rtl"] .ae-hero__art .ae-hero__wheel { inset-inline-end: auto; inset-inline-start: -12%; }
[dir="rtl"] .ae-nav { transform: translateX(-100%); box-shadow: 8px 0 30px rgba(3, 47, 42, 0.35); }
[dir="rtl"] .ae-nav.is-open { transform: translateX(0); }
[dir="rtl"] .ae-card__more::after { content: " \2190"; }

/* Safe areas (notched phones) */
@supports (padding: env(safe-area-inset-left)) {
	.ae-header__inner,
	.ae-footer__inner {
		padding-inline-start: max(0px, env(safe-area-inset-left));
		padding-inline-end: max(0px, env(safe-area-inset-right));
	}
}