/*
 * Design tokens
 *
 * Color, radius, shadow, spacing, motion, and focus-ring scales live here.
 * Consumers should reference these custom properties instead of redeclaring
 * the same hardcoded values per component. New tokens additive only —
 * existing single-value tokens (--ch-radius, --ch-shadow) are kept as
 * backward-compatible aliases over the new scales so legacy selectors
 * continue to render unchanged.
 */
:root {
	/* Color */
	--ch-canvas: #f7f3eb;
	--ch-surface: #fffdf8;
	--ch-surface-strong: #efe8db;
	/*
	 * --ch-rec-surface-end is the warm-cream stop used at the bottom of
	 * the recommendations carousel surface gradient, at the leading
	 * edge of the carousel's edge-fade overlay, and at the bottom of
	 * each WooCommerce loop product card surface (shop archive +
	 * recommendations). Stored as a raw "r, g, b" triplet so consumers
	 * can vary alpha via rgba(var(--ch-rec-surface-end), <alpha>). All
	 * four consumers must agree on this color so the fade blends
	 * cleanly into the rail and the loop / rec cards share a single
	 * surface treatment.
	 */
	--ch-rec-surface-end: 255, 250, 241;
	--ch-ink: #111319;
	--ch-muted: #586070;
	--ch-line: rgba(17, 19, 25, 0.12);
	--ch-amber: #cf8b2c;
	--ch-amber-deep: #a76c20;
	--ch-moss: #56664f;

	/* Radius scale */
	--ch-radius-sm: 14px;
	--ch-radius-md: 18px;
	--ch-radius-lg: 24px;
	--ch-radius-xl: 32px;
	--ch-radius-pill: 999px;
	--ch-radius: var(--ch-radius-lg);

	/* Shadow scale */
	--ch-shadow-sm: 0 8px 22px rgba(17, 19, 25, 0.05);
	--ch-shadow-md: 0 18px 50px rgba(17, 19, 25, 0.08);
	--ch-shadow-lg: 0 22px 56px rgba(17, 19, 25, 0.12);
	--ch-shadow: var(--ch-shadow-md);

	/* Spacing scale */
	--ch-space-1: 0.5rem;
	--ch-space-2: 0.75rem;
	--ch-space-3: 1rem;
	--ch-space-4: 1.25rem;
	--ch-space-5: 1.5rem;
	--ch-space-6: 2rem;
	--ch-space-7: 2.5rem;
	--ch-space-8: 3rem;

	/* Motion */
	--ch-motion-fast: 140ms;
	--ch-motion-base: 180ms;
	--ch-motion-slow: 220ms;
	--ch-ease: ease;

	/*
	 * Focus ring
	 *
	 * Alpha raised from 0.32 to 0.7 so the indicator clears WCAG 2.2 SC
	 * 2.4.11 / 1.4.11 (3:1 non-text contrast) against the cream canvas.
	 * The ring also pairs with a thin dark base layer applied per-component
	 * via box-shadow so it remains legible on amber and dark surfaces.
	 */
	--ch-focus-ring-color: rgba(167, 108, 32, 0.7);
	--ch-focus-ring: 0 0 0 2px var(--ch-surface), 0 0 0 4px var(--ch-focus-ring-color);

	/*
	 * Layout
	 *
	 * Shell gutter widened from 1rem to 1.25rem each side so cards inside
	 * the shell keep ~20px of breathing room from the viewport edge on
	 * narrow phones (320–360px).
	 */
	--ch-shell: min(1360px, calc(100% - 2.5rem));
}

/*
 * Naming methodology
 *
 * The codebase converges on three intentional namespaces. Pick one when
 * adding a new component; do not invent a fourth.
 *
 *   .site-*          Always-on shell chrome (header, footer, branding,
 *                    primary navigation). Shipped by the parent.
 *   .ch-*            Canonical primitives reusable across surfaces
 *                    (.ch-surface, .ch-card, .ch-card--feature, focus
 *                    ring, motion tokens). Shipped by the parent. New
 *                    components should prefer this namespace.
 *   .chiseiko-*      Storefront content-page modules (hero, section,
 *                    grid, figure, compare, doc-module). Loaded only on
 *                    content-page surfaces via content-pages.css.
 *
 * Marketing-section flat names (.entry-card, .principle-card,
 * .suite-outcome-card, .evidence-card, .pricing-card) are
 * legacy. They now compose the .ch-card primitive through the shared
 * grouped selector below, so future consumers can drop the legacy alias
 * and use .ch-card directly. Renaming each consumer is a separate
 * refactor — keeping the legacy classes aliased keeps templates stable
 * while the primitive is the single source of card visual truth.
 */

.ch-surface {
	background: rgba(255, 253, 248, 0.78);
	border: 1px solid rgba(17, 19, 25, 0.08);
	border-radius: var(--ch-radius-lg);
	box-shadow: var(--ch-shadow);
}

.ch-surface--emphasis {
	box-shadow:
		var(--ch-shadow),
		0 0 0 1px rgba(207, 139, 44, 0.32),
		0 24px 56px rgba(167, 108, 32, 0.18);
}

/*
 * Canonical card primitive. Provides surface treatment plus intrinsic
 * padding so that consumers do not have to redeclare both. Legacy card
 * classes (.entry-card, .principle-card, .pricing-card, .hero-metrics__item,
 * and the homepage section variants) are aliased onto this primitive
 * through a shared grouped selector elsewhere in this file.
 */
.ch-card {
	background: rgba(255, 253, 248, 0.78);
	border: 1px solid rgba(17, 19, 25, 0.08);
	border-radius: var(--ch-radius-lg);
	box-shadow: var(--ch-shadow);
}

.ch-card--feature {
	box-shadow:
		var(--ch-shadow),
		0 0 0 1px rgba(207, 139, 44, 0.32),
		0 24px 56px rgba(167, 108, 32, 0.18);
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	font-family: "Segoe UI", "Helvetica Neue", sans-serif;
	background:
		radial-gradient(circle at top left, rgba(207, 139, 44, 0.12), transparent 28%),
		radial-gradient(circle at top right, rgba(86, 102, 79, 0.12), transparent 24%),
		linear-gradient(180deg, #fbf8f1 0%, #f2ede2 100%);
	color: var(--ch-ink);
	line-height: 1.6;
}

a {
	color: inherit;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.16em;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

button,
input,
select,
textarea {
	font: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 1rem;
	padding: 0.75rem 1rem;
	background: var(--ch-ink);
	color: #fff;
	z-index: 1000;
}

.site-shell {
	width: var(--ch-shell);
	margin: 0 auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(16px);
	background: rgba(247, 243, 235, 0.86);
	border-bottom: 1px solid var(--ch-line);
}

.site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1rem 0;
}

.site-branding {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	max-width: 14rem;
}

.site-logo,
.site-logo .custom-logo-link,
.site-title--brandmark {
	display: inline-flex;
	align-items: center;
	max-width: min(14rem, 100%);
}

.site-title--brandmark {
	gap: 0.6rem;
}

.site-logo .custom-logo,
.site-logo img {
	display: block;
	width: min(100%, 14rem);
	height: auto;
}

/*
 * Brandmark = Shiba icon + "CHISEIKO" wordmark. The icon is sized by
 * height so its 221:297 portrait ratio drives the width, and it never
 * shrinks below the wordmark. The wordmark inherits the .site-title
 * serif but is tracked-out uppercase to read as a logotype.
 *
 * Scoped under .site-header so the rule's specificity (0,2,0) outranks
 * WooCommerce's woocommerce-layout.css `.woocommerce-page img { height:
 * auto }` (0,1,1), which otherwise resets the mark to its intrinsic
 * height on every WC surface (shop, cart, checkout, account, product).
 */
.site-header .site-title__mark {
	display: block;
	flex: none;
	width: auto;
	height: 5.544rem;
}

.site-title__wordmark {
	min-width: 0;
	font-family: Montserrat, "Segoe UI", "Helvetica Neue", sans-serif;
	font-size: 1.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ch-ink);
	line-height: 1;
}

.site-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.3rem;
	font-weight: 700;
	text-decoration: none;
}

/*
 * The single header tagline (the WordPress Site Description), styled as the
 * brand's kicker — tracked-out uppercase, bold, moss — matching the old
 * eyebrow. The Shiba mark + "CHISEIKO" wordmark stay the eye-catcher; this is
 * a small supporting line. nowrap holds it to one row and text-align centers
 * it on the logo's axis (it's a touch wider than the wordmark, so it spills a
 * few px into the empty space either side rather than wrapping).
 */
.site-tagline {
	margin: 0.15rem 0 0;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ch-moss);
	text-align: center;
	white-space: nowrap;
}

.site-navigation-frame {
	display: flex;
	justify-content: center;
	width: 100%;
	min-width: 0;
}

.menu-toggle {
	display: none;
	justify-self: end;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ch-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ch-ink);
	cursor: pointer;
}

.primary-navigation ul,
.fallback-menu,
.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1.25rem;
	align-items: center;
}

.primary-navigation a,
.site-action-link,
.site-footer__links a,
.footer-menu a {
	text-decoration: none;
	color: var(--ch-ink);
}

.primary-navigation a,
.site-action-link,
.site-footer__group-links a,
.menu-toggle {
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible,
.site-action-link:hover,
.site-action-link:focus-visible,
.site-footer__group-links a:hover,
.site-footer__group-links a:focus-visible,
.menu-toggle:hover,
.menu-toggle:focus-visible {
	color: var(--ch-amber-deep);
	outline: none;
}

.primary-navigation a:focus-visible,
.site-action-link:focus-visible,
.site-footer__group-links a:focus-visible,
.menu-toggle:focus-visible {
	box-shadow: var(--ch-focus-ring);
	border-radius: var(--ch-radius-pill);
}

.primary-navigation {
	justify-self: center;
	width: 100%;
	max-width: fit-content;
	padding: 0.35rem 0.7rem;
	border: 1px solid rgba(17, 19, 25, 0.08);
	border-radius: 999px;
	background: rgba(255, 253, 248, 0.74);
	box-shadow: 0 8px 22px rgba(17, 19, 25, 0.05);
}

.primary-navigation ul,
.fallback-menu {
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0.3rem;
}

.primary-navigation a {
	display: inline-flex;
	align-items: center;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.5rem 0.72rem;
	border-radius: 999px;
	white-space: nowrap;
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a,
.fallback-menu .current_page_item > a {
	background: rgba(207, 139, 44, 0.14);
	color: var(--ch-amber-deep);
}

.site-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-action-link--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	padding: 0.7rem 1rem;
	border: 1px solid rgba(167, 108, 32, 0.22);
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(207, 139, 44, 0.18), rgba(255, 253, 248, 0.96));
	font-weight: 700;
	box-shadow: 0 12px 24px rgba(167, 108, 32, 0.12);
}

.site-action-link--cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--ch-ink);
	color: #fff;
	font-size: 0.85rem;
}

.site-main {
	padding: 3rem 0 5rem;
}

.marketing-front-page {
	padding-top: 0;
}

.hero-section {
	padding: 4rem 0 2rem;
}

.hero-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
	gap: 2rem;
	align-items: center;
}

.eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ch-moss);
}

.hero-copy h1,
.section-heading h2,
.channel-section h2,
.entry-title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.hero-copy h1 {
	font-size: clamp(3rem, 8vw, 5.6rem);
	max-width: 11ch;
}

.hero-lead,
.section-heading p,
.channel-section p,
.entry-content,
.entry-meta {
	color: var(--ch-muted);
}

.hero-lead {
	max-width: 42rem;
	font-size: 1.1rem;
	margin: 1.2rem 0 0;
}

.hero-actions,
.channel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.85rem 1.35rem;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	font-weight: 700;
	transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.button:hover,
.button:focus-visible {
	transform: translateY(-1px);
}

.button:focus-visible {
	outline: none;
	box-shadow: var(--ch-focus-ring);
}

.button--primary {
	background: var(--ch-ink);
	color: #fff;
	box-shadow: 0 6px 14px rgba(17, 19, 25, 0.14);
}

.button--primary:hover,
.button--primary:focus-visible {
	background: #232734;
}

.button--primary:hover {
	box-shadow: 0 10px 22px rgba(17, 19, 25, 0.18);
}

.button--primary:focus-visible {
	box-shadow: 0 6px 14px rgba(17, 19, 25, 0.18), var(--ch-focus-ring);
}

.button--secondary {
	background: var(--ch-amber);
	color: #111319;
}

.button--secondary:hover,
.button--secondary:focus-visible {
	background: var(--ch-amber-deep);
	color: #fff;
}

.button--ghost {
	background: transparent;
	border-color: var(--ch-line);
	color: var(--ch-ink);
}

/*
 * .button--link is a quiet modifier for tertiary actions that should
 * remain a real link visually (underline, no pill chrome) so the
 * primary/secondary CTAs lead the eye. Used on the hero "see it live"
 * link to demote the demo path below the free/Pro paths without
 * removing the route entirely. text-decoration / text-underline-offset
 * / text-decoration-thickness inherit from the global <a> rule above,
 * so the underline weight stays consistent with every other inline
 * link in the theme.
 */
.button--link {
	min-height: 0;
	padding: 0.45rem 0.25rem;
	background: transparent;
	border-color: transparent;
	color: var(--ch-ink);
	text-decoration: underline;
	font-weight: 600;
}

.button--link:hover,
.button--link:focus-visible {
	color: var(--ch-amber-deep);
	background: transparent;
}

.button--block {
	width: 100%;
}

/*
 * .hero-metrics is a <dl> of term/description pairs ("Free / core swatch
 * UX...", "Pro / ...", "Docs + Support / ..."). Each pair sits inside a
 * .hero-metrics__item wrapper so the surface-card treatment can target a
 * stable selector instead of the bare <dt>/<dd> children. Reset margins
 * are applied to the dt/dd because user-agent stylesheets give <dd> a
 * default left margin.
 */
.hero-metrics {
	padding: 0;
	margin: 2rem 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.9rem;
}

/*
 * Legacy card classes alias onto the .ch-card primitive. Future consumers
 * should prefer .ch-card directly. Surface treatment lives on the
 * primitive only — do not redeclare background / border / border-radius
 * / box-shadow on these consumers.
 */
.hero-metrics__item,
.principle-card,
.entry-card,
.pricing-card {
	background: rgba(255, 253, 248, 0.78);
	border: 1px solid rgba(17, 19, 25, 0.08);
	border-radius: var(--ch-radius-lg);
	box-shadow: var(--ch-shadow);
}

.hero-metrics__item {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	backdrop-filter: blur(8px);
}

.hero-metrics__item dt,
.hero-metrics__item dd {
	margin: 0;
}

.hero-metrics__item dt {
	font-size: 0.95rem;
	font-weight: 700;
}

.hero-metrics__item dd {
	font-size: 0.9rem;
	color: var(--ch-muted);
}

.hero-panel {
	position: relative;
	z-index: 0; /* own stacking context so the slab layers below stay contained */
	padding: 2rem;
}

/*
 * Two stacked angled slabs behind the product card for branded depth: a warm
 * amber panel (::after) peeking out behind the dark panel (::before). The card
 * (.hero-showcase) sits above both. Paint order within the panel's stacking
 * context: amber (1) < dark (2) < card (3).
 */
.hero-panel::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 1.5rem 0.5rem 0.5rem 3rem;
	background: linear-gradient(145deg, rgba(17, 19, 25, 0.98), rgba(43, 49, 63, 0.94));
	border-radius: 40px;
	transform: rotate(-5deg);
}

.hero-panel::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 1rem 2rem 1rem 1.5rem;
	background: linear-gradient(145deg, rgba(207, 139, 44, 0.95), rgba(184, 116, 22, 0.92));
	border-radius: 40px;
	transform: rotate(4deg);
}

.hero-showcase {
	position: relative;
	z-index: 3;
}

/*
 * Real storefront product card used as the hero showcase. Mirrors the visual
 * language of the WooCommerce loop cards (white surface, soft elevation,
 * rounded media, swatch row) so the hero previews the actual swatch UX.
 */
.hero-product-card {
	position: relative;
	max-width: 26rem;
	margin-inline: auto;
	background: #fffdf8;
	border: 1px solid rgba(17, 19, 25, 0.08);
	border-radius: 28px;
	box-shadow: 0 30px 80px rgba(17, 19, 25, 0.28);
	overflow: hidden;
}

.hero-product-card__media {
	position: relative;
	aspect-ratio: 1400 / 764;
	background: linear-gradient(180deg, #efe9dd, #e3dccb);
}

.hero-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-product-card__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: rgba(17, 19, 25, 0.82);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	backdrop-filter: blur(4px);
}

.hero-product-card__body {
	padding: 1.4rem 1.5rem 1.6rem;
}

.hero-product-card__brand {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ch-moss);
}

.hero-product-card__title {
	margin: 0.3rem 0 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--ch-ink);
}

.hero-product-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
}

.hero-product-card__price-from {
	font-size: 0.82rem;
	color: var(--ch-muted);
}

.hero-product-card__price-amount {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ch-ink);
}

.hero-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.hero-swatch {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(17, 19, 25, 0.08);
	box-shadow: 0 0 0 1px rgba(17, 19, 25, 0.12);
}

.hero-swatch--selected {
	box-shadow: 0 0 0 2px var(--ch-ink);
}

.hero-swatch--more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ch-ink);
	font-size: 0.72rem;
	font-weight: 700;
}

.hero-swatch--sage { background: #7c8a6e; }
.hero-swatch--amber { background: #cf8b2c; }
.hero-swatch--graphite { background: #47515d; }
.hero-swatch--azure { background: #5ba7e1; }
.hero-swatch--crimson { background: #8c2131; }
.hero-swatch--navy { background: #243049; }
.hero-swatch--rose { background: #c87a86; }
.hero-swatch--sand { background: #d8c8a8; }

/* Out-of-stock hero swatch — visible but struck through (mirrors the storefront
   and the content-page cards). */
.hero-swatch--oos {
	position: relative;
}

.hero-swatch--oos::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	right: -2px;
	height: 2px;
	background: rgba(17, 19, 25, 0.55);
	transform: rotate(-45deg);
}

/* Hero swatch easter egg (assets/js/hero-swatches.js) — selectable hero swatches
   that swap the product image. Pointer-only (the hero panels are aria-hidden
   decoration). Shared by the homepage (.hero-*) and content-page (.chiseiko-*)
   cards via the .is-swatch-interactive / .is-swapping hooks the script adds. */
.is-swatch-interactive {
	cursor: pointer;
	transition: transform 0.12s ease;
}

.is-swatch-interactive:hover {
	transform: scale(1.18);
}

.is-clickable {
	cursor: pointer;
}

.chiseiko-product-card__image,
.hero-product-card__image {
	transition: opacity 0.18s ease;
}

.chiseiko-product-card__image.is-swapping,
.hero-product-card__image.is-swapping {
	opacity: 0;
}

.hero-product-card__hint {
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	color: var(--ch-muted);
}

.comparison-section,
.principles-section,
.channel-section,
.suite-outcomes-section,
.evidence-section {
	padding: 2rem 0;
}

.section-heading {
	max-width: 42rem;
	margin-bottom: 1.75rem;
}

.section-heading h2,
.channel-section h2,
.entry-title {
	font-size: clamp(2rem, 5vw, 3.4rem);
}

/*
 * .comparison-grid stays at two columns down to 860px (instead of the
 * 980px shell breakpoint) because the pricing-card lists become hard to
 * scan when each column is under ~340px wide. Below 860px the grid
 * collapses to one column via the @media block at the end of this file.
 */
.comparison-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-card,
.principle-card,
.entry-card {
	padding: 1.6rem;
}

.pricing-card header p:last-child,
.principle-card p,
.entry-card p:last-child {
	margin-bottom: 0;
}

.pricing-card__label {
	margin: 0 0 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ch-moss);
}

.pricing-card h3,
.principle-card h3 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2rem;
}

.pricing-card ul {
	padding-left: 1.15rem;
	margin: 1.4rem 0;
	color: var(--ch-muted);
}

.pricing-card--featured {
	background: linear-gradient(180deg, rgba(17, 19, 25, 0.96), rgba(39, 45, 57, 0.92));
	color: #fff;
}

.pricing-card--featured .pricing-card__label,
.pricing-card--featured p,
.pricing-card--featured ul {
	color: rgba(255, 255, 255, 0.82);
}

.suite-outcomes-grid,
.evidence-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.suite-outcome-card,
.evidence-card {
	height: 100%;
}

.suite-outcome-card h3,
.evidence-card h3 {
	margin: 0 0 0.85rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.45rem, 3vw, 2rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--ch-ink);
}

.suite-outcome-card p,
.evidence-card p {
	margin-top: 0;
}

.evidence-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
}

.evidence-card .button {
	align-self: flex-start;
}

.evidence-grid {
	align-items: stretch;
}

.channel-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.7rem;
	border: 1px solid var(--ch-line);
	border-radius: calc(var(--ch-radius) + 4px);
	background: rgba(255, 253, 248, 0.68);
	box-shadow: var(--ch-shadow);
}

.content-area,
.woocommerce-area {
	padding-top: 2.25rem;
}

.entry-card {
	max-width: 840px;
	margin: 0 auto;
}

.entry-header {
	margin-bottom: 1rem;
}

.site-footer {
	padding: 2.6rem 0 3rem;
	border-top: 1px solid var(--ch-line);
	background:
		linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(239, 232, 219, 0.78)),
		radial-gradient(circle at top left, rgba(207, 139, 44, 0.12), transparent 30%);
	backdrop-filter: blur(10px);
}

.site-footer__inner,
.site-footer__subline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.site-footer__title,
.site-footer__copy,
.site-footer__subline p {
	margin: 0;
}

.site-footer__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ch-moss);
}

.site-footer__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.1rem;
	font-weight: 700;
}

.site-footer__copy,
.site-footer__subline p {
	color: var(--ch-muted);
	font-size: 0.95rem;
}

.site-footer__inner {
	align-items: start;
}

.site-footer__summary {
	max-width: 27rem;
	display: grid;
	gap: 0.9rem;
}

.site-footer__summary-links {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
}

.site-footer__summary-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.65rem 1rem;
	border: 1px solid rgba(17, 19, 25, 0.1);
	border-radius: 999px;
	background: rgba(255, 253, 248, 0.82);
	text-decoration: none;
	font-weight: 700;
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-footer__summary-link:hover,
.site-footer__summary-link:focus-visible {
	color: var(--ch-amber-deep);
	border-color: rgba(167, 108, 32, 0.3);
	box-shadow: var(--ch-focus-ring);
	outline: none;
}

.site-footer__summary-link--strong {
	background: linear-gradient(135deg, rgba(207, 139, 44, 0.18), rgba(255, 253, 248, 0.96));
	border-color: rgba(167, 108, 32, 0.22);
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	flex: 1;
}

.site-footer__group-title {
	margin: 0 0 0.85rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ch-moss);
}

.site-footer__group-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.65rem;
}

.site-footer__group-links a {
	text-decoration: none;
	color: var(--ch-ink);
	font-weight: 600;
}

.site-footer__links {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/*
 * Intermediate-width header simplification
 *
 * Between 981px and 1180px the branding column, the centered nav pill
 * (which grows with menu count), and the actions group can crowd inside
 * the 1200px shell. Hiding the optional eyebrow + tagline (decorative
 * identity copy) and tightening the nav pill padding gives the layout
 * room to breathe without dropping into the mobile hamburger pattern.
 * This treatment is conservative; if the header is still tight in a
 * specific install, raise the upper bound or shorten the menu.
 */
/* Mid widths: the long "Chiseiko Essential Swatches[ Pro]" nav labels need room,
   so reclaim it — drop the branding tagline and the header promo CTA (the nav
   already links everywhere; the cart stays), shrink the brand column, and
   compact the nav. Below 980px the menu collapses to the mobile toggle. */
@media (min-width: 981px) and (max-width: 1340px) {
	.site-header__inner {
		grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
		gap: 0.85rem;
	}

	.site-tagline {
		display: none;
	}

	.site-action-link--primary {
		display: none;
	}

	.primary-navigation {
		padding: 0.2rem 0.45rem;
	}

	.primary-navigation a {
		padding: 0.45rem 0.6rem;
		font-size: 0.82rem;
	}
}

@media (max-width: 980px) {
	.site-header__inner,
	.hero-section__inner,
	.channel-section__inner,
	.comparison-grid,
	.suite-outcomes-grid,
	.evidence-grid {
		grid-template-columns: 1fr;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.primary-navigation {
		display: none;
		grid-column: 1 / -1;
		padding: 1rem 1.1rem;
		border: 1px solid var(--ch-line);
		border-radius: 24px;
		background: rgba(255, 253, 248, 0.96);
		box-shadow: var(--ch-shadow);
		max-width: none;
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-navigation ul {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 0;
		gap: 0.3rem;
	}

	/*
	 * Mobile touch target sizing
	 *
	 * Vertical padding bumped from 0.65rem to 0.85rem and a min-height
	 * of 2.75rem (44px) is set explicitly so each menu link clears the
	 * WCAG 2.5.5 AAA target-size threshold for thumb-driven mobile use.
	 */
	.primary-navigation a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.85rem 0.5rem;
	}

	.site-actions {
		justify-self: stretch;
		justify-content: space-between;
		grid-column: 1 / -1;
	}

	.site-footer__nav {
		grid-template-columns: 1fr;
	}

	.site-footer__summary-links {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-metrics {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.site-header__inner {
		grid-template-columns: 1fr auto;
	}

	.site-actions {
		grid-column: 1 / -1;
		gap: 0.75rem;
		flex-wrap: wrap;
	}

	.hero-copy h1 {
		font-size: clamp(2.4rem, 15vw, 3.5rem);
	}

	.hero-section {
		padding-top: 2rem;
	}

	.hero-panel {
		padding: 0.5rem 0 0;
	}

	.hero-panel::before {
		inset: 0.5rem 0 0 1.2rem;
	}
}

/*
 * Desktop-only hero canvas
 *
 * The hero anchors to most of the viewport on wide screens but uses a
 * clamp so that the original raw 100vh-anchored sizing does not over-
 * pull on tall monitors and push the H1 + CTA group below the fold.
 * Floor at 540px keeps the desktop hero feeling spacious on smaller
 * laptops; the upper bound of 840px keeps the hero generous on 1080p+
 * displays without letting it over-reach on 1440p+ panels.
 *
 * Earlier the ceiling was 760px which visibly compacted the hero on
 * 1920×1080 (lost ~200px versus the original viewport-anchored
 * height). 840px is a calmer trade-off; revisit if browser checks
 * say a different value reads better.
 *
 * On stacked layouts (<980px) the decorative .hero-panel is aria-hidden
 * and the hero sizes to content so the primary action stays above the
 * fold.
 */
@media (min-width: 980px) {
	.hero-section__inner {
		min-height: clamp(540px, calc(100vh - 120px), 840px);
	}
}

/*
 * Reduced motion
 *
 * WCAG-aligned baseline that flattens animations and transitions for
 * users with prefers-reduced-motion: reduce. Component-level transform
 * hovers (.button, .site-action-link, .site-footer__summary-link, the
 * recommendations carousel controls) are explicitly neutralized so that
 * focus and hover do not produce any motion.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.button:hover,
	.button:focus-visible,
	.site-action-link:hover,
	.site-action-link:focus-visible,
	.site-footer__summary-link:hover,
	.site-footer__summary-link:focus-visible,
	.primary-navigation a:hover,
	.primary-navigation a:focus-visible {
		transform: none;
	}
}
/* Footer newsletter signup (Subscribe-stage lead capture) */
.chiseiko-newsletter {
	margin-top: 1.4rem;
	max-width: 30rem;
}

.chiseiko-newsletter__label {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var(--ch-ink);
}

.chiseiko-newsletter__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.chiseiko-newsletter__row input[type="email"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--ch-line);
	border-radius: var(--ch-radius-sm);
	background: #fff;
	font: inherit;
	color: var(--ch-ink);
}

.chiseiko-newsletter__fine {
	margin: 0.55rem 0 0;
	font-size: 0.8rem;
	color: var(--ch-muted);
}

.chiseiko-newsletter__note {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
}

.chiseiko-newsletter__note--ok { color: #1c6b3a; }
.chiseiko-newsletter__note--err { color: #a3231b; }

.chiseiko-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}