/* =========================================================================
   pages-products.css — PRODUCTS wave (Aurora)
   Scope: .tmpl-product (5 product agents) + .tmpl-ready (showcase /services/ready/)
   Uses ONLY tokens/components from assets/dist/style.css. No dist/inc/functions edits.
   On-light accent tokens (#18786B / #2E7D4F / #9A6F12) for text on light surfaces.
   Motion hooks (data-reveal / --i) inherit dist primitives; reduced-motion handled there.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SHARED — section heads, leads, prose
   ------------------------------------------------------------------------- */
.tmpl-product .section__head,
.tmpl-ready .section__head {
	max-width: 56ch;
	margin-bottom: var(--space-lg);
}

.tmpl-product .section__head--center,
.tmpl-ready .section__head--center {
	margin-inline: auto;
	text-align: center;
}

.tmpl-product .section__lead,
.tmpl-ready .section__lead {
	font-size: var(--fs-body-lg);
	line-height: 1.6;
	color: var(--muted);
}

.tmpl-product .section--light .section__lead,
.tmpl-ready .section--light .section__lead {
	color: var(--muted-light);
}

.tmpl-product .prose p:last-child,
.tmpl-ready .prose p:last-child {
	margin-bottom: 0;
}

.tmpl-product .inline-links,
.tmpl-ready .inline-links {
	margin-top: var(--space-md);
	font-size: var(--fs-body-md);
	font-weight: 600;
}

.tmpl-product .inline-links a + a::before,
.tmpl-ready .inline-links a + a::before {
	content: "·";
	margin: 0 10px;
	color: var(--muted);
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   A1 / ri-01 — HERO (dark navy, two columns: copy + cutout object/visual)
   ------------------------------------------------------------------------- */
.tmpl-product .product-hero,
.tmpl-ready .ready-hero {
	position: relative;
	overflow: hidden;
}

.tmpl-product .product-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-xl);
	align-items: center;
}

.tmpl-ready .ready-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-xl);
	align-items: center;
}

.tmpl-product .product-hero__copy h1,
.tmpl-ready .ready-hero__copy h1 {
	margin-top: var(--space-sm);
}

.tmpl-product .product-hero__lead,
.tmpl-ready .ready-hero__lead {
	font-size: var(--fs-body-lg);
	line-height: 1.6;
	color: var(--color-on-bg);
	max-width: 54ch;
}

.tmpl-product .product-hero__geo,
.tmpl-ready .ready-hero__geo {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--surface-low);
	border: 1px solid var(--outline-variant);
	border-left: 3px solid var(--color-secondary);
	border-radius: var(--radius-md);
	font-size: var(--fs-body-md);
	color: var(--muted);
}

.tmpl-product .product-hero__cta,
.tmpl-ready .ready-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.tmpl-product .trust-row,
.tmpl-ready .trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	margin-top: var(--space-lg);
	padding: 0;
	list-style: none;
}

.tmpl-product .trust-row li,
.tmpl-ready .trust-row li {
	position: relative;
	padding-left: 22px;
	font-size: var(--fs-body-sm);
	color: var(--muted);
}

.tmpl-product .trust-row li::before,
.tmpl-ready .trust-row li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(79, 180, 119, 0.18);
	box-shadow: inset 0 0 0 2px var(--color-tertiary);
}

/* Hero visual frame */
.tmpl-product .product-hero__object {
	position: relative;
	text-align: center;
}

.tmpl-product .product-hero__object img {
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
	filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45));
}

.tmpl-product .product-hero__object::after {
	content: "";
	position: absolute;
	inset: 18% 12% -4% 12%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(43, 184, 163, 0.22), transparent 72%);
	filter: blur(8px);
}

.tmpl-ready .ready-hero__visual img {
	width: 100%;
	border-radius: var(--radius-lg);
	border: 1px solid var(--outline-variant);
	box-shadow: var(--shadow-elevated-dark);
}

/* -------------------------------------------------------------------------
   A2 — PROBLEM (light): lead + avatar quote + seller prose
   ------------------------------------------------------------------------- */
.tmpl-product .problem__grid {
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	gap: var(--space-xl);
	align-items: start;
}

.tmpl-product .problem .quote-card {
	background: var(--surface-light-low);
	color: var(--color-on-bg-light);
}

.tmpl-product .problem .quote-card p {
	font-size: var(--fs-headline-sm);
	font-style: italic;
	line-height: 1.4;
	margin: 0;
}

.tmpl-product .market-note {
	margin-top: var(--space-md);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--muted-light);
}

/* -------------------------------------------------------------------------
   A3 — HOW (dark): numbered steps + human-in-the-loop callout
   ------------------------------------------------------------------------- */
.tmpl-product .steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter);
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
	counter-reset: step;
}

.tmpl-product .steps li {
	counter-increment: step;
	background: var(--surface-low);
	border: 1px solid var(--outline);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

.tmpl-product .steps li::before {
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: var(--space-sm);
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--color-secondary);
	background: rgba(43, 184, 163, 0.1);
	border: 1px solid rgba(43, 184, 163, 0.3);
	border-radius: var(--radius-pill);
}

.tmpl-product .steps li h3 {
	font-size: var(--fs-body-lg);
	margin-bottom: 6px;
}

.tmpl-product .steps li p {
	margin: 0;
	font-size: var(--fs-body-sm);
	color: var(--muted);
}

.tmpl-product .hitl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	align-items: start;
	padding: var(--space-md) var(--space-lg);
	background: var(--surface-container);
	border: 1px solid var(--outline);
	border-radius: var(--radius-lg);
}

.tmpl-product .hitl__tag {
	align-self: start;
}

.tmpl-product .hitl h3 {
	font-size: var(--fs-headline-sm);
	margin-bottom: 6px;
}

.tmpl-product .hitl p {
	margin: 0;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   A4 — BEFORE/AFTER (dark): two panels + market disclaimer
   ------------------------------------------------------------------------- */
.tmpl-product .ba-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
}

.tmpl-product .ba-panel {
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--outline);
}

.tmpl-product .ba-panel--before {
	background: var(--surface-lowest);
}

.tmpl-product .ba-panel--after {
	background: linear-gradient(160deg, rgba(43, 184, 163, 0.1), var(--surface-low));
	border-color: rgba(43, 184, 163, 0.35);
}

.tmpl-product .ba-panel__label {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tmpl-product .ba-panel--before .ba-panel__label {
	color: var(--muted);
}

.tmpl-product .ba-panel--after .ba-panel__label {
	color: var(--color-secondary);
}

.tmpl-product .ba-panel p {
	margin: var(--space-sm) 0 0;
	color: var(--color-on-bg);
}

.tmpl-product .market-bar {
	margin-top: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background: var(--surface-low);
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius-md);
}

.tmpl-product .market-bar p {
	margin: 0;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   A5 / A5b — INCLUDED + special block (light): checklist + honest line
   ------------------------------------------------------------------------- */
.tmpl-product .included {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tmpl-product .included li {
	position: relative;
	padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 30px);
	background: var(--surface-light-lowest);
	border: 1px solid var(--outline-light);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-light);
}

.tmpl-product .included li::before {
	content: "";
	position: absolute;
	left: var(--space-md);
	top: calc(var(--space-md) + 4px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-green-on-light);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tmpl-product .included li strong {
	display: block;
	margin-bottom: 4px;
	color: var(--color-on-bg-light);
}

.tmpl-product .included li span {
	font-size: var(--fs-body-sm);
	color: var(--muted-light);
}

.tmpl-product .honest-line {
	margin-top: var(--space-lg);
	padding: var(--space-md);
	border-left: 3px solid var(--color-teal-on-light);
	background: var(--surface-light-low);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	color: var(--color-on-bg-light);
}

.tmpl-product .honest-line p {
	margin: 0;
}

/* A5b special blocks (security / legal / not-spam / vs-chatbot) */
.tmpl-product .special-block .prose {
	max-width: 70ch;
}

.tmpl-product .special-block .disclaimer {
	margin-top: var(--space-md);
}

.tmpl-product .disclaimer {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--muted);
}

.tmpl-product .section--light .disclaimer {
	color: var(--muted-light);
}

/* vs-chatbot comparison */
.tmpl-product .vs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
	margin-top: var(--space-lg);
}

.tmpl-product .vs-card {
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--outline);
}

.tmpl-product .vs-card--bot {
	background: var(--surface-lowest);
}

.tmpl-product .vs-card--agent {
	background: linear-gradient(160deg, rgba(43, 184, 163, 0.1), var(--surface-low));
	border-color: rgba(43, 184, 163, 0.35);
}

.tmpl-product .vs-card h3 {
	font-size: var(--fs-headline-sm);
}

.tmpl-product .vs-card p {
	margin: 0;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   A6 — DEMO (dark): honest demo frame + caption
   ------------------------------------------------------------------------- */
.tmpl-product .demo__frame {
	max-width: 920px;
	margin: var(--space-lg) auto 0;
}

.tmpl-product .demo-card {
	background: var(--surface-low);
	border: 1px solid var(--outline-variant);
}

.tmpl-product .demo-card__caption {
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   A7 — PRICE (dark): zone + disclaimer + risk reverse
   ------------------------------------------------------------------------- */
.tmpl-product .price__zone {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	margin: var(--space-md) 0;
	padding: var(--space-md) var(--space-lg);
	background: var(--surface-low);
	border: 1px solid rgba(224, 169, 60, 0.3);
	border-radius: var(--radius-lg);
}

.tmpl-product .price__zone .market-stat__number {
	font-size: var(--fs-headline-md);
}

.tmpl-product .price__risk {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	margin-top: var(--space-md);
	padding: 0;
	list-style: none;
}

.tmpl-product .price__risk li {
	font-size: var(--fs-body-sm);
	color: var(--color-on-bg);
}

/* -------------------------------------------------------------------------
   A8 — RELATED (light): related-agent links
   ------------------------------------------------------------------------- */
.tmpl-product .related__links {
	display: grid;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	list-style: none;
	padding: 0;
}

.tmpl-product .related__links li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: var(--fs-body-md);
}

.tmpl-product .related__links li a::before {
	content: "→";
	color: var(--color-teal-on-light);
}

/* -------------------------------------------------------------------------
   FAQ (light): native details/summary accordion (no-JS safe)
   ------------------------------------------------------------------------- */
.tmpl-product .faq,
.tmpl-ready .faq {
	max-width: 820px;
}

.tmpl-product .faq__item,
.tmpl-ready .faq__item {
	border-bottom: 1px solid var(--outline-light);
}

.tmpl-product .faq__item > summary,
.tmpl-ready .faq__item > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	font-family: var(--font-display);
	font-size: var(--fs-headline-sm);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	color: var(--color-on-bg-light);
}

.tmpl-product .faq__item > summary::-webkit-details-marker,
.tmpl-ready .faq__item > summary::-webkit-details-marker {
	display: none;
}

.tmpl-product .faq__item > summary::after,
.tmpl-ready .faq__item > summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 24px;
	color: var(--color-teal-on-light);
	transition: transform var(--dur-fast) var(--ease-standard);
}

.tmpl-product .faq__item[open] > summary::after,
.tmpl-ready .faq__item[open] > summary::after {
	content: "−";
}

.tmpl-product .faq__answer,
.tmpl-ready .faq__answer {
	padding: 0 0 var(--space-md);
	color: var(--muted-light);
	max-width: 70ch;
}

.tmpl-product .faq__answer p,
.tmpl-ready .faq__answer p {
	margin: 0 0 var(--space-sm);
}

/* -------------------------------------------------------------------------
   A9 / ri-05 — CROSS-CUTTING CTA before footer (dark)
   ------------------------------------------------------------------------- */
.tmpl-product .cta-band,
.tmpl-ready .cta-band {
	text-align: center;
}

.tmpl-product .cta-band__inner,
.tmpl-ready .cta-band__inner {
	max-width: 720px;
	margin-inline: auto;
}

.tmpl-product .cta-band__actions,
.tmpl-ready .cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.tmpl-product .cta-band__direct,
.tmpl-ready .cta-band__direct {
	margin-top: var(--space-md);
	font-size: var(--fs-body-sm);
	color: var(--muted);
}

.tmpl-product .cta-band__direct a,
.tmpl-ready .cta-band__direct a {
	color: var(--color-secondary);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   ri-02 / ri-04 — showcase intro + custom bridge (light)
   ------------------------------------------------------------------------- */
.tmpl-ready .ready-intro__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: var(--space-xl);
	align-items: start;
}

.tmpl-ready .ready-intro .quote-card {
	background: var(--surface-light-low);
	color: var(--color-on-bg-light);
}

.tmpl-ready .ready-intro .quote-card p {
	margin: 0;
	font-size: var(--fs-body-lg);
}

/* ri-03 — 5 product cards grid (dark) */
.tmpl-ready .product-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--gutter);
}

.tmpl-ready .product-grid .card--product {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.tmpl-ready .product-grid .card__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	margin-bottom: var(--space-sm);
}

.tmpl-ready .product-grid .card__media img {
	width: 78%;
	filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
}

.tmpl-ready .product-grid .card__text {
	flex: 1;
}

.tmpl-ready .product-grid .card__link {
	margin-top: var(--space-md);
	font-weight: 600;
	color: var(--color-secondary);
}

.tmpl-ready .product-grid .card__link::after {
	content: " →";
}

.tmpl-ready .bridge__inner {
	max-width: 760px;
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.tmpl-product .product-hero__grid,
	.tmpl-ready .ready-hero__grid,
	.tmpl-ready .ready-intro__grid,
	.tmpl-product .problem__grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.tmpl-product .product-hero__object {
		order: -1;
	}

	.tmpl-product .product-hero__object img {
		max-width: 320px;
	}

	.tmpl-product .steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.tmpl-ready .product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.tmpl-product .steps,
	.tmpl-product .ba-grid,
	.tmpl-product .included,
	.tmpl-product .vs-grid,
	.tmpl-ready .product-grid {
		grid-template-columns: 1fr;
	}

	.tmpl-product .hitl {
		grid-template-columns: 1fr;
	}
}