/*
Theme Name: Watercolor by Lily
Theme URI: https://watercolorbylily.com
Author: Bettrweb
Description: Custom theme for Watercolor by Lily — a single-product commission shop with its own checkout and Stripe integration. No page builder, no WooCommerce.
Version: 1.2.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: wbl
*/

/* ══ Tokens ═══════════════════════════════════════════════ */

:root {
	/* Brand, carried over from the original site's palette */
	--violet:      #7066E0;
	--violet-deep: #574CD1;
	--violet-wash: #EFEDFC;
	--terracotta:  #DB5B41;
	--terracotta-deep: #C24A32;
	--gold:        #FDC700;
	--green:       #00A63E;

	--ink:      #232222;
	--ink-soft: #4A4441;
	--muted:    #857C76;
	--hairline: #E7DFD4;

	--paper:   #FFFFFF;
	--cream:   #FAF7F2;
	--cream-2: #F3EEE5;

	--serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--sans:  Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--radius:    12px;
	--radius-lg: 18px;

	--shadow-sm: 0 1px 2px rgba(35, 34, 34, .05), 0 2px 8px rgba(35, 34, 34, .04);
	--shadow-md: 0 2px 6px rgba(35, 34, 34, .06), 0 10px 28px rgba(35, 34, 34, .07);
	--shadow-lg: 0 4px 12px rgba(35, 34, 34, .07), 0 22px 50px rgba(35, 34, 34, .10);

	--wrap:  1160px;
	--gutter: clamp(18px, 4vw, 36px);
}

/* ══ Reset ════════════════════════════════════════════════ */

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

/* Any author `display` beats the UA rule for [hidden], and the wizard toggles
   panels and steps with the attribute. Make it win everywhere. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The header is sticky, so anchored sections must reserve its height or they
   land underneath it. */
:target, section[id] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink-soft);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

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

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	color: var(--ink);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.012em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.16rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--violet-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--violet); }

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

.skip-link {
	position: absolute; left: -9999px;
	background: var(--ink); color: #fff;
	padding: 12px 18px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; }

/* ══ Layout ═══════════════════════════════════════════════ */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tint   { background: var(--cream-2); }
.section--violet { background: var(--violet); color: #fff; }
.section--violet h2 { color: #fff; }

.section__head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.section__sub { color: var(--muted); font-size: 1.05rem; }

.eyebrow {
	margin: 0 0 .7em;
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--violet);
}
.section--violet .eyebrow { color: rgba(255,255,255,.8); }

.prose > :last-child { margin-bottom: 0; }

/* ══ Buttons ══════════════════════════════════════════════ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	background: var(--terracotta);
	color: #fff;
	font-family: var(--sans);
	font-size: .97rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
	box-shadow: var(--shadow-sm);
}
.btn:hover {
	background: var(--terracotta-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.btn:active { transform: none; }

.btn--lg    { font-size: 1.05rem; padding: 18px 34px; border-radius: 12px; }
.btn--sm    { font-size: .87rem; padding: 10px 18px; border-radius: 8px; }
.btn--block { width: 100%; }

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--hairline);
	box-shadow: none;
}
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }

.btn.is-busy { opacity: .7; cursor: progress; transform: none; }
.btn:disabled:not(.is-busy) {
	background: var(--cream-2);
	color: var(--muted);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
.btn:disabled:not(.is-busy):hover { background: var(--cream-2); color: var(--muted); transform: none; }

.link-quiet {
	font-family: var(--sans);
	font-size: .95rem;
	font-weight: 500;
	color: var(--muted);
}
.link-quiet:hover { color: var(--ink); }

/* ══ Header ═══════════════════════════════════════════════ */

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(250, 247, 242, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 68px;
}

.brand { flex: 0 0 auto; display: block; }
.brand img { max-height: 34px; width: auto; }
.brand--text {
	font-family: var(--serif);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -.01em;
}

.site-nav { margin-left: auto; }
.site-nav__list {
	display: flex;
	gap: 26px;
	margin: 0; padding: 0;
	list-style: none;
}
.site-nav__list a {
	font-family: var(--sans);
	font-size: .93rem;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
}
.site-nav__list a:hover { color: var(--violet-deep); }

.nav-toggle {
	display: none;
	margin-left: auto;
	width: 42px; height: 42px;
	background: none; border: 0; cursor: pointer;
	padding: 10px;
}
.nav-toggle span {
	display: block; height: 2px; margin: 4px 0;
	background: var(--ink); border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
	padding: 12px var(--gutter) 26px;
	border-top: 1px solid var(--hairline);
	background: var(--cream);
}
.mobile-nav__list { list-style: none; margin: 0 0 16px; padding: 0; }
.mobile-nav__list li { border-bottom: 1px solid var(--hairline); }
.mobile-nav__list a {
	display: block; padding: 14px 2px;
	font-family: var(--sans); font-weight: 500;
	color: var(--ink); text-decoration: none;
}

@media (max-width: 900px) {
	.site-nav, .site-header__cta { display: none; }
	.nav-toggle { display: block; }
}
@media (min-width: 901px) {
	.mobile-nav { display: none !important; }
}

/* ══ Hero ═════════════════════════════════════════════════ */

.hero {
	padding-block: clamp(44px, 7vw, 86px);
	background:
		radial-gradient(70% 120% at 88% 0%, var(--violet-wash) 0%, transparent 62%),
		var(--cream);
	border-bottom: 1px solid var(--hairline);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.hero__title { margin-bottom: .38em; text-wrap: balance; }

.hero__lede {
	font-size: clamp(1.06rem, 1.7vw, 1.2rem);
	color: var(--ink-soft);
	max-width: 33em;
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin: 30px 0 26px;
}

.trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0; padding: 0;
	list-style: none;
	font-family: var(--sans);
	font-size: .87rem;
	color: var(--muted);
}
.trust-strip li { display: flex; align-items: center; gap: 7px; }
.trust-strip li::before {
	content: "";
	width: 15px; height: 15px;
	flex: 0 0 15px;
	border-radius: 50%;
	background: var(--green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat, linear-gradient(#000,#000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

.compare {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.compare__side { text-align: center; }
.compare__side figcaption {
	margin-top: 10px;
	font-family: var(--sans);
	font-size: .78rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--muted);
}
.compare__side img, .compare__side .slot-empty {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	background: var(--paper);
}
.compare__arrow { width: 34px; color: var(--violet); }
.compare__arrow svg { width: 100%; }

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__art { order: -1; }
}

/* Image slot placeholder */
.slot-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	background: var(--cream-2);
	border: 1px dashed var(--hairline);
	color: var(--muted);
	text-align: center;
}
.slot-empty svg { width: 34px; opacity: .5; }
.slot-empty__label {
	font-family: var(--sans);
	font-size: .8rem;
	letter-spacing: .03em;
}
.slot-img { border-radius: var(--radius-lg); }

/* ══ Steps ════════════════════════════════════════════════ */

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	margin: 0; padding: 0;
	list-style: none;
	counter-reset: step;
}
.steps--compact { grid-template-columns: repeat(3, 1fr); }

.step { position: relative; padding-top: 6px; }
.step__n {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 34px; height: 34px;
	margin-bottom: 14px;
	background: var(--violet);
	color: #fff;
	border-radius: 50%;
	font-family: var(--sans);
	font-size: .92rem;
	font-weight: 700;
}
.step h3 { margin-bottom: .4em; }
.step p { font-size: .97rem; color: var(--muted); margin: 0; }

@media (max-width: 900px) {
	.steps, .steps--compact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.steps, .steps--compact { grid-template-columns: 1fr; gap: 22px; }
}

/* ══ Pricing tiers ════════════════════════════════════════ */

.tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: start;
}

.tier {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
}
.tier--featured {
	border-color: var(--violet);
	box-shadow: var(--shadow-md);
}
.tier__flag {
	position: absolute; top: -12px; left: 26px;
	margin: 0;
	background: var(--violet);
	color: #fff;
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 20px;
}

.tier__name { margin-bottom: .25em; }
.tier__price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 .8em; }
.tier__from { font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.tier__price strong { font-size: 2.05rem; color: var(--ink); letter-spacing: -.02em; }
.tier__blurb { font-size: .95rem; color: var(--muted); }

.tier__sizes {
	list-style: none;
	margin: 4px 0 18px;
	padding: 16px 0 0;
	border-top: 1px solid var(--hairline);
	font-size: .95rem;
}
.tier__sizes li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
}
.tier__amt { font-weight: 700; color: var(--ink); }

.tier__frames { margin-bottom: 20px; }
.tier__frames-label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--sans);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}
.swatches {
	display: flex; flex-wrap: wrap; gap: 14px;
	list-style: none; margin: 0; padding: 0;
	font-family: var(--sans); font-size: .85rem;
}
.swatches li { display: flex; align-items: center; gap: 7px; }
.swatch {
	width: 16px; height: 16px;
	border-radius: 4px;
	background: var(--swatch);
	border: 1px solid rgba(35,34,34,.16);
}
.swatch--lg { width: 30px; height: 30px; border-radius: 6px; }

.tier .btn { margin-top: auto; }

@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* ══ About ════════════════════════════════════════════════ */

.about {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
}
.about__art img, .about__art .slot-empty {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}
@media (max-width: 800px) { .about { grid-template-columns: 1fr; } }

/* ══ Guarantee ════════════════════════════════════════════ */

.guarantee {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: center;
	max-width: 880px;
}
.guarantee__mark { width: 62px; color: rgba(255,255,255,.9); }
.guarantee p { margin: 0; color: rgba(255,255,255,.9); font-size: 1.06rem; }
@media (max-width: 640px) { .guarantee { grid-template-columns: 1fr; } }

/* ══ FAQ ══════════════════════════════════════════════════ */

.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 40px 20px 0;
	position: relative;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: "";
	position: absolute; right: 6px; top: 50%;
	width: 12px; height: 12px;
	margin-top: -8px;
	border-right: 2px solid var(--violet);
	border-bottom: 2px solid var(--violet);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__body { padding: 0 0 22px; color: var(--muted); max-width: 62ch; }
.faq__body p { margin: 0; }

/* ══ Closing CTA ══════════════════════════════════════════ */

.closer__title { text-wrap: balance; }
.closer__sub { color: var(--muted); font-size: 1.08rem; max-width: 46ch; margin-inline: auto; }
.closer .btn { margin-top: 10px; }
.closer__note {
	margin-top: 18px;
	font-family: var(--sans);
	font-size: .85rem;
	color: var(--muted);
}

/* ══ Wizard ═══════════════════════════════════════════════
   Built mobile-first: most of this traffic arrives from a
   Facebook ad on a phone, so the phone layout is the base and
   the desktop rules are the exception.
   ══════════════════════════════════════════════════════════ */

.wiz {
	--panel-max: 560px;
	min-height: 78vh;
	padding-bottom: 64px;
}

/* ── Progress bar ─────────────────────────────────────────── */

.wiz__bar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(250, 247, 242, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hairline);
}

.wiz__bar-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	position: relative;
}

.wiz__back {
	flex: 0 0 34px;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 50%;
	color: var(--ink);
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease;
}
.wiz__back:hover { transform: translateX(-2px); border-color: var(--ink); }
.wiz__back svg { width: 17px; }

.wiz__dots {
	display: flex;
	flex: 1;
	gap: 4px;
	margin: 0; padding: 0;
	list-style: none;
}

.wiz__dot {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.wiz__dot-mark {
	width: 100%;
	height: 3px;
	border-radius: 3px;
	background: var(--hairline);
	transition: background .35s ease;
}
.wiz__dot.is-done .wiz__dot-mark { background: var(--green); }
.wiz__dot.is-now  .wiz__dot-mark { background: var(--violet); }

.wiz__dot-label {
	font-family: var(--sans);
	font-size: .62rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	opacity: .55;
	transition: opacity .3s ease, color .3s ease;
}
.wiz__dot.is-now .wiz__dot-label { opacity: 1; color: var(--violet-deep); font-weight: 700; }
.wiz__dot.is-done .wiz__dot-label { opacity: .8; }

/* Hidden on the narrowest phones — the bars alone carry the meaning. */
@media (max-width: 420px) {
	.wiz__dot-label { display: none; }
	.wiz__dots { gap: 5px; }
}

.wiz__progress { display: none; }

/* ── Panels ───────────────────────────────────────────────── */

.wiz__stage {
	position: relative;
	max-width: var(--panel-max);
	padding-top: 26px;
	/* Panels slide in from 22px off-axis; clip so that never flashes a
	   horizontal scrollbar. `clip` rather than `hidden` — hidden would make
	   this a scroll container and break the sticky action bar inside it. */
	overflow-x: clip;
}

.panel { animation: none; }

.panel.is-in-right { animation: panel-in-right .34s cubic-bezier(.22,.9,.3,1) both; }
.panel.is-in-left  { animation: panel-in-left  .34s cubic-bezier(.22,.9,.3,1) both; }

@keyframes panel-in-right {
	from { opacity: 0; transform: translate3d(22px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes panel-in-left {
	from { opacity: 0; transform: translate3d(-22px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

.panel__head { margin-bottom: 22px; }
.panel__head h1 { font-size: clamp(1.62rem, 6vw, 2.05rem); margin-bottom: .3em; text-wrap: balance; }
.panel__sub { color: var(--muted); font-size: 1rem; margin: 0; }

.panel__form { display: block; }

/* Stagger the fields in, so the form assembles rather than appears. */
.panel.is-in-right .field,
.panel.is-in-right .fmt,
.panel.is-in-right .drop,
.panel.is-in-right .btn {
	animation: rise .4s cubic-bezier(.22,.9,.3,1) both;
}
.panel .field:nth-of-type(1) { animation-delay: .04s; }
.panel .field:nth-of-type(2) { animation-delay: .09s; }
.panel .field:nth-of-type(3) { animation-delay: .14s; }
.panel .fmt:nth-of-type(1)   { animation-delay: .05s; }
.panel .fmt:nth-of-type(2)   { animation-delay: .11s; }
.panel .fmt:nth-of-type(3)   { animation-delay: .17s; }

@keyframes rise {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: none; }
}

/* ── Buttons in the flow ──────────────────────────────────── */

.btn__arrow, .btn__icon, .btn__lock {
	width: 18px; height: 18px;
	flex: 0 0 18px;
	transition: transform .2s ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--pay { background: var(--green); }
.btn--pay:hover { background: #01913a; }

.btn__note {
	display: block;
	width: 100%;
	margin-top: 2px;
	font-size: .74rem;
	font-weight: 400;
	color: var(--muted);
}
.btn--ghost { flex-wrap: wrap; }

.spin {
	width: 15px; height: 15px;
	margin-right: 9px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	display: inline-block;
	vertical-align: -2px;
	animation: spin .7s linear infinite;
}
.btn--ghost .spin { border-color: rgba(35,34,34,.2); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

.reassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--sans);
	font-size: .8rem;
	color: var(--muted);
}
.reassure li { display: flex; align-items: center; gap: 6px; }
.reassure li::before {
	content: "";
	width: 13px; height: 13px;
	flex: 0 0 13px;
	background: var(--green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ── Fields ───────────────────────────────────────────────── */

.field { margin-bottom: 15px; }
.field--narrow { max-width: 130px; }
.field-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }

.field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sans);
	font-size: .87rem;
	font-weight: 500;
	color: var(--ink);
}
.field .opt { color: var(--muted); font-weight: 400; }

.field input, .field select, .field textarea {
	width: 100%;
	padding: 14px 15px;
	font-family: var(--sans);
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: 11px;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--violet);
	box-shadow: 0 0 0 3px rgba(112, 102, 224, .15);
}
.field input.is-wrong, .field select.is-wrong {
	border-color: var(--terracotta);
	animation: shake .35s ease;
}
@keyframes shake {
	10%, 90% { transform: translateX(-2px); }
	30%, 70% { transform: translateX(3px); }
	50%      { transform: translateX(-2px); }
}

.field-help {
	display: block;
	margin-top: 6px;
	font-family: var(--sans);
	font-size: .8rem;
	color: var(--muted);
}

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

/* ── 2 · Photo drop ───────────────────────────────────────── */

.drop {
	position: relative;
	display: block;
	border: 2px dashed var(--hairline);
	border-radius: var(--radius-lg);
	background: var(--paper);
	padding: 34px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
	margin-bottom: 14px;
}
.drop:hover, .drop.is-over { border-color: var(--violet); background: var(--violet-wash); }
.drop.is-over { transform: scale(1.01); }
.drop.is-filled { padding: 0; border-style: solid; border-color: var(--violet); overflow: hidden; }

.drop input[type="file"] {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
}

.drop__empty { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.drop__icon {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--violet-wash);
	color: var(--violet);
	animation: breathe 3.4s ease-in-out infinite;
}
.drop__icon svg { width: 25px; }
@keyframes breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}
.drop__empty strong { color: var(--ink); font-size: 1.06rem; }
.drop__hint { font-family: var(--sans); font-size: .85rem; color: var(--muted); }

.drop__filled { display: block; position: relative; pointer-events: none; }
.drop__filled img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	animation: pop .32s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pop {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: none; }
}
.drop__change {
	position: absolute;
	bottom: 10px; right: 10px;
	background: rgba(35,34,34,.78);
	color: #fff;
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	backdrop-filter: blur(4px);
}

.tips {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	margin-bottom: 16px;
	overflow: hidden;
}
.tips summary {
	list-style: none;
	cursor: pointer;
	padding: 13px 16px;
	font-family: var(--sans);
	font-size: .89rem;
	font-weight: 600;
	color: var(--violet-deep);
	position: relative;
}
.tips summary::-webkit-details-marker { display: none; }
.tips summary::after {
	content: "";
	position: absolute; right: 16px; top: 50%;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.tips[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.tips ul {
	margin: 0; padding: 0 16px 15px 34px;
	font-size: .92rem;
	color: var(--muted);
}
.tips li { margin-bottom: 6px; }

/* ── 3 · Generating ───────────────────────────────────────── */

.gen { text-align: center; padding: 14px 0 30px; }

.gen__art {
	position: relative;
	width: min(240px, 62vw);
	margin: 0 auto 26px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--cream-2);
	aspect-ratio: 4 / 5;
}
.gen__art img { width: 100%; height: 100%; object-fit: cover; margin-inline: auto; filter: saturate(.35) brightness(1.04); }

/* The wash sweeping across is the "painting" cue. */
.gen__shimmer {
	position: absolute; inset: 0;
	background: linear-gradient(105deg,
		transparent 20%,
		rgba(255,255,255,.62) 45%,
		rgba(199,193,247,.5) 55%,
		transparent 80%);
	background-size: 260% 100%;
	animation: wash 1.9s ease-in-out infinite;
}
@keyframes wash {
	from { background-position: 190% 0; }
	to   { background-position: -60% 0; }
}

.gen__brush {
	position: absolute;
	right: 12px; bottom: 12px;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	color: var(--violet);
	animation: dab 1.6s ease-in-out infinite;
}
.gen__brush svg { width: 20px; }
@keyframes dab {
	0%, 100% { transform: translateY(0) rotate(-6deg); }
	50%      { transform: translateY(-5px) rotate(6deg); }
}

.gen__title { font-size: clamp(1.5rem, 5.4vw, 1.9rem); margin-bottom: .25em; }
.gen__status { font-family: var(--sans); font-size: .93rem; color: var(--muted); margin: 0 0 20px; min-height: 1.4em; }

.gen__track {
	width: min(280px, 74vw);
	height: 5px;
	margin: 0 auto;
	background: var(--hairline);
	border-radius: 5px;
	overflow: hidden;
}
.gen__track span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--violet), var(--violet-deep));
	transition: width .5s cubic-bezier(.3,.8,.4,1);
}

/* ── 3 · Sample picker ────────────────────────────────────

   Mobile stacks the samples full-width: three thumbnails side by
   side on a phone are too small to judge, and judging them is the
   entire point of this step. The action bar sticks to the bottom
   so scrolling the list never strands the CTA.
   ────────────────────────────────────────────────────────── */

.samples {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

.sample { position: relative; display: block; cursor: pointer; }
.sample input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.sample__body { display: block; animation: rise .42s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i) * .09s); }

.sample__frame {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 2.5px solid transparent;
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sample__frame img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}

.sample:hover .sample__frame { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.sample input:checked + .sample__body .sample__frame {
	border-color: var(--violet);
	box-shadow: 0 0 0 4px rgba(112,102,224,.16), var(--shadow-md);
}
.sample input:focus-visible + .sample__body .sample__frame { outline: 3px solid var(--violet); outline-offset: 3px; }

.sample__tick {
	position: absolute;
	top: 12px; right: 12px;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	background: var(--violet);
	color: #fff;
	border-radius: 50%;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.5);
	box-shadow: 0 2px 8px rgba(35,34,34,.2);
}
.sample__tick svg { width: 19px; }
.sample input:checked + .sample__body .sample__tick { opacity: 1; transform: scale(1); }

/* In the caption row rather than over the picture, so the sticky action bar
   can never cover it and the tap targets never overlap. */
.sample__zoom {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	background: var(--paper);
	color: var(--violet-deep);
	border: 1px solid var(--hairline);
	border-radius: 22px;
	font-family: var(--sans);
	font-size: .8rem;
	font-weight: 600;
	cursor: zoom-in;
	transition: border-color .16s ease, background .16s ease;
}
.sample__zoom:hover { border-color: var(--violet); background: var(--violet-wash); }
.sample__zoom svg { width: 15px; }

.sample__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	font-family: var(--sans);
	font-size: .88rem;
	font-weight: 600;
	color: var(--muted);
	transition: color .18s ease;
}
.sample__name { display: inline-flex; align-items: center; gap: 8px; }
.sample input:checked + .sample__body .sample__name { color: var(--violet-deep); }
.sample input:checked + .sample__body .sample__name::after {
	content: "Selected";
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--violet-wash);
	color: var(--violet-deep);
	padding: 3px 9px;
	border-radius: 20px;
}

.samples__note {
	font-family: var(--sans);
	font-size: .8rem;
	color: var(--muted);
	text-align: center;
	margin-bottom: 14px;
}

.samples__reroll { margin-bottom: 8px; }

/* The action bar only pins once a sample is chosen. While the customer is
   still browsing it is a disabled button, and pinning it there both wastes a
   tenth of the screen and covers the first card's Zoom control. */
.samples__actions {
	padding: 14px 0 0;
}
.wiz--chosen .samples__actions {
	position: sticky;
	bottom: 0;
	z-index: 30;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(to bottom, rgba(250,247,242,0) 0%, var(--cream) 30%);
}
/* Leave room so the pinned bar can never trap the last card's controls. */
.wiz--chosen .samples__reroll { margin-bottom: 20px; }

/* ── Full-screen preview ──────────────────────────────────── */

.zoom {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 64px 10px calc(16px + env(safe-area-inset-bottom, 0px));
	background: rgba(24, 23, 23, .93);
	backdrop-filter: blur(6px);
	animation: zoom-in .22s ease both;
}
@keyframes zoom-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* A phone card is already almost full-width, so "fit to screen" would be no
   bigger than the card behind it. Render the preview larger than the viewport
   and let the customer pan across it — that is what zoom is supposed to mean. */
.zoom__figure {
	margin: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 72vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	border-radius: var(--radius);
}
.zoom__figure img {
	display: block;
	max-width: none;
	width: min(820px, 190vw);
	height: auto;
	box-shadow: var(--shadow-lg);
	animation: zoom-pop .28s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes zoom-pop {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: none; }
}
.zoom__caption {
	margin: 0;
	font-family: var(--sans);
	font-size: .84rem;
	color: rgba(255,255,255,.72);
	text-align: center;
}

.zoom__close {
	position: absolute;
	top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	background: rgba(255,255,255,.14);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background .16s ease;
}
.zoom__close:hover { background: rgba(255,255,255,.26); }
.zoom__close svg { width: 21px; }

.zoom__pick { flex: 0 0 auto; }

/* ── 4 · Options ──────────────────────────────────────────── */

.chosen-strip {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px;
	margin-bottom: 20px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	animation: rise .4s ease both;
}
.chosen-strip img {
	width: 52px; height: 62px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 52px;
}
.chosen-strip strong { display: block; font-size: .97rem; color: var(--ink); }
.chosen-strip span { font-family: var(--sans); font-size: .82rem; color: var(--muted); }

.formats { display: grid; gap: 11px; margin-bottom: 22px; }

.fmt { position: relative; display: block; cursor: pointer; }
.fmt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.fmt__body {
	position: relative;
	display: block;
	padding: 16px 17px;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.fmt:hover .fmt__body { border-color: #C9BFB2; }
.fmt input:checked + .fmt__body {
	border-color: var(--violet);
	box-shadow: 0 0 0 3px rgba(112,102,224,.14);
}
.fmt input:focus-visible + .fmt__body { outline: 3px solid var(--violet); outline-offset: 2px; }

.fmt__flag {
	position: absolute;
	top: -9px; left: 15px;
	background: var(--violet);
	color: #fff;
	font-family: var(--sans);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 20px;
}

/* The tick sits top-right; reserve its width always, so selecting a card
   neither overlaps the price nor shifts the layout. */
.fmt__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 30px; }
.fmt__name { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.fmt__price { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.fmt__from { font-family: var(--sans); font-size: .72rem; color: var(--muted); }
.fmt__price strong { font-size: 1.28rem; color: var(--ink); letter-spacing: -.02em; }

.fmt__tag {
	display: block;
	margin-top: 1px;
	font-family: var(--sans);
	font-size: .78rem;
	font-weight: 600;
	color: var(--violet-deep);
}
.fmt__blurb { display: block; margin-top: 7px; font-size: .9rem; line-height: 1.5; color: var(--muted); }

.fmt__perks { display: none; margin-top: 11px; }
.fmt input:checked + .fmt__body .fmt__perks { display: block; animation: rise .3s ease both; }
.fmt__perk {
	display: flex; align-items: flex-start; gap: 7px;
	font-family: var(--sans);
	font-size: .82rem;
	color: var(--ink-soft);
	padding: 2px 0;
}
.fmt__perk::before {
	content: "";
	flex: 0 0 13px; width: 13px; height: 13px;
	margin-top: 3px;
	background: var(--green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

.fmt__check {
	position: absolute;
	top: 15px; right: 15px;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--violet);
	color: #fff;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.5);
}
.fmt__check svg { width: 13px; }
.fmt input:checked + .fmt__body .fmt__check { opacity: 1; transform: scale(1); }
/* Selected cards read as chosen even before the tick animates in. */
.fmt input:checked + .fmt__body { background: linear-gradient(var(--violet-wash), var(--violet-wash)) padding-box, var(--paper); }

.sub-step { margin-bottom: 22px; animation: rise .34s ease both; }
.sub-step__title {
	font-family: var(--sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.size { position: relative; display: block; cursor: pointer; }
.size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.size__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	height: 100%;
	padding: 13px 8px;
	text-align: center;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.size:hover .size__body { border-color: #C9BFB2; transform: translateY(-2px); }
.size input:checked + .size__body {
	border-color: var(--violet);
	background: var(--violet-wash);
	box-shadow: 0 0 0 3px rgba(112,102,224,.13);
}
.size input:focus-visible + .size__body { outline: 3px solid var(--violet); outline-offset: 2px; }
.size__name { font-weight: 700; color: var(--ink); font-size: .93rem; }
.size__dims { font-family: var(--sans); font-size: .73rem; color: var(--muted); }
.size__price { display: flex; flex-direction: column; margin-top: 5px; font-family: var(--sans); font-size: .88rem; }
.size__price s { font-size: .72rem; color: var(--muted); }
.size__price strong { color: var(--ink); }

.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.frame { position: relative; display: block; cursor: pointer; }
.frame input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.frame__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 13px 8px;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.frame input:checked + .frame__body {
	border-color: var(--violet);
	box-shadow: 0 0 0 3px rgba(112,102,224,.13);
}
.frame input:focus-visible + .frame__body { outline: 3px solid var(--violet); outline-offset: 2px; }
.frame__swatch {
	width: 30px; height: 30px;
	border-radius: 7px;
	background: var(--swatch);
	border: 1px solid rgba(35,34,34,.16);
	transition: transform .18s cubic-bezier(.2,.9,.3,1.4);
}
.frame input:checked + .frame__body .frame__swatch { transform: scale(1.12); }
.frame__name { font-family: var(--sans); font-size: .82rem; color: var(--ink); }

/* ── 6 · Review ───────────────────────────────────────────── */

.review {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: var(--shadow-sm);
	animation: rise .38s ease both;
}

.review__art { margin-bottom: 16px; }
.review__art img {
	width: min(180px, 48vw);
	margin-inline: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}

.review__lines { margin: 0 0 12px; }
.review__lines > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cream-2);
}
.review__lines dt { font-family: var(--sans); font-size: .84rem; color: var(--muted); flex: 0 0 auto; }
.review__lines dd { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink); text-align: right; }

.review__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 11px;
	font-family: var(--sans);
	font-size: .9rem;
	color: var(--muted);
}
.review__amount { display: flex; align-items: baseline; gap: 8px; }
.review__amount s { color: var(--muted); font-size: .92rem; }
.review__amount strong { font-family: var(--serif); font-size: 1.75rem; color: var(--ink); letter-spacing: -.02em; }

.reassure--pay { margin-top: 14px; }

.pay-note {
	margin-top: 12px;
	text-align: center;
	font-family: var(--sans);
	font-size: .82rem;
	color: var(--muted);
}

/* ── Toast ────────────────────────────────────────────────── */

.wiz__toast {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 130%);
	z-index: 90;
	max-width: min(440px, calc(100vw - 32px));
	background: var(--ink);
	color: #fff;
	font-family: var(--sans);
	font-size: .9rem;
	line-height: 1.45;
	padding: 13px 18px;
	border-radius: 11px;
	box-shadow: var(--shadow-lg);
	transition: transform .28s cubic-bezier(.2,.9,.3,1.2);
}
.wiz__toast.is-up { transform: translate(-50%, 0); }

/* ── Desktop ──────────────────────────────────────────────── */

@media (min-width: 760px) {
	.wiz__stage { padding-top: 40px; }
	.panel__head { margin-bottom: 26px; }
	.review { padding: 24px; }
	.review__art img { width: 200px; }
	.wiz__bar-inner { min-height: 62px; }

	/* Room for three side by side, so they can be compared at a glance. */
	.wiz--picking .wiz__stage { max-width: 900px; }
	.samples { grid-template-columns: repeat(3, 1fr); gap: 18px; }
	.sample__zoom { padding: 7px 11px; font-size: .75rem; bottom: 10px; right: 10px; }
	.sample__tick { width: 30px; height: 30px; top: 10px; right: 10px; }

	.samples__actions {
		position: static;
		padding: 8px 0 0;
		background: none;
		max-width: 420px;
		margin-inline: auto;
	}
	.samples__reroll { max-width: 420px; margin-inline: auto; }

	.zoom__figure { overflow: visible; }
	.zoom__figure img { width: auto; max-width: 100%; max-height: 74vh; }
}

@media (prefers-reduced-motion: reduce) {
	.panel, .panel .field, .panel .fmt, .panel .drop, .panel .btn,
	.sample__body, .chosen-strip, .sub-step, .review {
		animation: none !important;
	}
	.gen__shimmer, .gen__brush, .drop__icon { animation: none !important; }
}

/* ══ Thank you ════════════════════════════════════════════ */

.thanks { text-align: center; }
.thanks__mark { width: 62px; margin: 0 auto 22px; color: var(--green); }
.thanks__mark--quiet { color: var(--muted); }
.thanks__lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 44ch; margin-inline: auto; }
.thanks__next { margin-top: 44px; }
.thanks .steps { text-align: left; }
.thanks__foot {
	margin-top: 34px;
	font-family: var(--sans);
	font-size: .9rem;
	color: var(--muted);
}

/* ══ Stars ════════════════════════════════════════════════ */

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: var(--gold); }

/* ══ Footer ═══════════════════════════════════════════════ */

.site-footer {
	background: var(--ink);
	color: rgba(255,255,255,.72);
	padding-block: clamp(40px, 5vw, 62px) 26px;
	margin-top: auto;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 34px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(255,255,255,.13);
}
.site-footer .brand--text { color: #fff; }
.site-footer .logo--footer { filter: brightness(0) invert(1); max-height: 32px; width: auto; }
.site-footer__note { margin: 14px 0 0; font-size: .95rem; max-width: 40ch; }

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 9px; }
.site-footer__list a {
	font-family: var(--sans);
	font-size: .92rem;
	color: rgba(255,255,255,.72);
	text-decoration: none;
}
.site-footer__list a:hover { color: #fff; }

.site-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 20px;
	font-family: var(--sans);
	font-size: .82rem;
	color: rgba(255,255,255,.5);
}
.site-footer__legal p { margin: 0; }

@media (max-width: 700px) {
	.site-footer__inner { grid-template-columns: 1fr; }
}

/* ══ Reviews ══════════════════════════════════════════════ */

.section__head--center { max-width: 660px; margin-inline: auto; text-align: center; }

.rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	font-family: var(--sans);
	font-size: .92rem;
	color: var(--muted);
}
.rating strong { color: var(--ink); }

.reviews {
	columns: 3;
	column-gap: 18px;
}

.review-card {
	break-inside: avoid;
	margin: 0 0 18px;
	padding: 20px 21px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.review-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.review-card blockquote {
	margin: 11px 0 14px;
	font-size: .98rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.review-card figcaption { font-family: var(--sans); font-size: .82rem; }
.review-card figcaption strong { display: block; color: var(--ink); }
.review-card figcaption span { color: var(--muted); font-size: .76rem; }

@media (max-width: 900px) { .reviews { columns: 2; } }
@media (max-width: 600px) { .reviews { columns: 1; } }

/* Pricing additions for the new tier shape */
.tier__tag {
	margin: -.6em 0 .7em;
	font-family: var(--sans);
	font-size: .8rem;
	font-weight: 600;
	color: var(--violet-deep);
}
.tier__perks {
	list-style: none;
	margin: 4px 0 18px;
	padding: 16px 0 0;
	border-top: 1px solid var(--hairline);
	font-size: .92rem;
}
.tier__perks li {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 4px 0;
	color: var(--ink-soft);
}
.tier__perks li::before {
	content: "";
	flex: 0 0 14px; width: 14px; height: 14px;
	margin-top: 4px;
	background: var(--green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.thanks__note { margin-top: 10px; font-family: var(--sans); font-size: .84rem; color: var(--muted); }