/*
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.15.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;

	/* Deeper tints for washes, so the page has some weather in it. */
	--violet-ink:  #3B2FA8;
	--blush:       #F6E4DC;
	--sage:        #E4EADF;
	--sand:        #F0E4D2;

	/* Motion. One curve and three durations for every hover, focus and
	   state change, so nothing snaps while its neighbour glides. */
	--ease:     cubic-bezier(.2, .7, .2, 1);
	--ease-pop: cubic-bezier(.2, .9, .3, 1.3);
	--t-fast:   .18s;   /* colour, border, opacity */
	--t:        .28s;   /* transform, shadow, size */
	--t-slow:   .45s;   /* the hero pair, progress */

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

	/* Hand-drawn marks lifted from the original brand's arrows. */
	--squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='none' stroke='%237066E0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 18c14-12 26 6 40-4s26 8 38-2'/%3E%3C/svg%3E");

	--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; }

/*
 * Paper.
 *
 * A watercolour shop rendered on flat #FFF reads like a template. This is a
 * single fixed grain layer over the whole page — cheap, no image request, and
 * it does more for the character of the thing than any amount of extra markup.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
}

/* Everything real sits above the grain.
   `main` deliberately gets no z-index: giving it one creates a stacking
   context, which traps position:fixed descendants (the full-screen preview)
   underneath the sticky header — its close button ends up beneath the menu. */
.site-header, .site-footer { position: relative; z-index: 2; }
main { position: relative; }

/* A soft bloom of colour, positioned per section. Two of these behind a
   section do more than a flat background fill and cost nothing to paint. */
.wash { position: relative; overflow: hidden; }
.wash::before, .wash::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	pointer-events: none;
}

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.1;
	letter-spacing: -.022em;
	font-optical-sizing: auto;
	text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.7vw, 2.75rem); }
h3 { font-size: 1.16rem; letter-spacing: -.012em; }

/* Italic serif for the emotional beat in a headline — the one flourish the
   brand's own logotype already earns. */
h1 em, h2 em, .hero__lede em {
	font-style: italic;
	font-weight: 600;
	color: var(--violet-ink);
}

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; transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
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 var(--t-fast) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--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); }
.link-quiet { transition: color var(--t-fast) var(--ease); }

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

.site-header {
	position: sticky; top: 0; z-index: 40;
	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); }
.site-nav__list a { transition: color var(--t-fast) var(--ease); }

.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 var(--t) var(--ease), opacity var(--t-fast) var(--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;
}

.site-nav__list a { white-space: nowrap; }
@media (max-width: 1080px) {
	.site-nav__list { gap: 18px; }
	.site-nav__list a { font-size: .88rem; }
}
/* Five links plus a button need about 1000px; below that the menu takes over. */
@media (max-width: 1000px) {
	.site-nav, .site-header__cta { display: none; }
	.nav-toggle { display: block; }
}
@media (min-width: 1001px) {
	.mobile-nav { display: none !important; }
}

/* Checkout: the logo and a lock, nothing to click away to. Not sticky — the
   wizard's own progress bar takes the top of the screen once you scroll. */
.site-header--bare {
	position: static;
	background: var(--cream);
	backdrop-filter: none;
	border-bottom: 0;
}
.site-header--bare .site-header__inner {
	justify-content: space-between;
	min-height: 60px;
}
.site-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 500;
	color: var(--muted);
}
.site-header__secure svg { width: 15px; height: 15px; }

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

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 6vw, 88px) clamp(52px, 7vw, 100px);
	background: var(--cream);
	border-bottom: 1px solid var(--hairline);
}

/* Two washes rather than a flat panel: colour that pools, like the medium. */
.hero::before, .hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
}
.hero::before {
	width: 46vw; height: 46vw;
	right: -8vw; top: -14vw;
	background: radial-gradient(circle, rgba(112,102,224,.30), transparent 68%);
}
.hero::after {
	width: 34vw; height: 34vw;
	left: -12vw; bottom: -18vw;
	background: radial-gradient(circle, rgba(219,91,65,.16), transparent 68%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	/* The pair is the pitch: it gets the wider column and bleeds a little past it. */
	grid-template-columns: .82fr 1.18fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
}
@media (min-width: 901px) {
	.hero__art { margin-right: -6%; }
}

.hero__title { margin-bottom: .34em; font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -.02em; }

.hero__lede {
	font-size: clamp(1.06rem, 1.55vw, 1.22rem);
	color: var(--ink-soft);
	max-width: 32em;
}

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

.trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 20px;
	margin: 0; padding: 0;
	list-style: none;
	font-family: var(--sans);
	font-size: .85rem;
	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;
	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/12px 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.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/*
 * The before/after pair.
 *
 * Two identical rectangles side by side is the arrangement a template would
 * pick. These overlap and sit at slight angles, like prints put down on a
 * table, with the brand's hand-drawn arrow between them.
 */
.compare {
	position: relative;
	display: grid;
	grid-template-columns: .92fr 1.08fr;
	align-items: start;
	margin: 0;
	padding: 10px 0 30px;
}

.compare__side { position: relative; }
/* Several pairs share one frame and crossfade; the first is laid out
   normally so the figure has a height, the rest sit on top of it. */
.compare__stack { position: relative; }
.compare__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.compare__frame:first-child { position: relative; }
.compare__frame.is-on { opacity: 1; }
.compare__side img, .compare__side .slot-empty {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
	background: var(--paper);
	/* A print, not a UI card: thin white border and a real drop shadow. */
	border: 9px solid var(--paper);
	box-shadow: 0 18px 40px rgba(35,34,34,.16), 0 2px 6px rgba(35,34,34,.10);
	transition: transform var(--t-slow) var(--ease);
}

.compare__side:first-child {
	margin-top: 34px;
	transform: rotate(-3.4deg);
	z-index: 1;
}
.compare__side:last-child {
	margin-left: -14%;
	transform: rotate(2.6deg);
	z-index: 2;
}
.compare:hover .compare__side:first-child { transform: rotate(-4.6deg) translateY(-4px); }
.compare:hover .compare__side:last-child  { transform: rotate(3.4deg) translateY(-6px); }

.compare__side figcaption {
	position: absolute;
	left: 0; right: 0; bottom: -28px;
	text-align: center;
	font-family: var(--sans);
	/* These two labels explain the entire product; they were unreadable. */
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ink-soft);
}

/* The arrow is the brand's own gesture; it sits over the seam. */
.compare__arrow {
	position: absolute;
	/* On the seam: the left print ends at 46% (.92 of two columns) and the
	   right one overlaps it by 14% of its own width. */
	left: 43%; top: 46%;
	width: 74px;
	margin-left: -37px;
	z-index: 3;
	color: var(--violet);
	transform: rotate(-6deg);
	filter: drop-shadow(0 2px 4px rgba(255,255,255,.9));
}
.compare__arrow svg { width: 100%; }

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

/* Narrow screens: less overlap and a smaller caption, so the two labels stop
   crowding each other under the seam. */
@media (max-width: 520px) {
	.compare__side:last-child { margin-left: -8%; }
	.compare__side figcaption { font-size: .72rem; letter-spacing: .02em; }
	.compare__arrow { width: 56px; margin-left: -34px; }
}

/* 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;
	/* Equal height, so the three buttons land on one line instead of a
	   staircase — the cards carry different content lengths by design. */
	align-items: stretch;
}

.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,
.tier__frames { display: none; }   /* retired: the landing cards carry one features list */

.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, .about__art .slot-video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* The clip is shot 9:16 with the paper in the lower half; keep that half. */
	object-position: 50% 60%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	background: var(--cream-2);
}
@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 var(--t) var(--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 ══════════════════════════════════════════ */

/* The pairs strip above the closing call: photo, arrow, portrait, six across. */
.pairs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	max-width: 980px;
	margin-inline: auto;
	margin: 0 0 clamp(36px, 5vw, 60px);
	padding: 0;
	list-style: none;
}
.pair {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}
.pair img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 4px solid var(--paper);
	border-radius: 3px;
	box-shadow: 0 8px 20px rgba(35,34,34,.14), 0 1px 3px rgba(35,34,34,.08);
	transition: transform var(--t-slow) var(--ease);
}
.pair__photo    { transform: rotate(-3deg); margin-top: 10px; z-index: 1; }
.pair__portrait { transform: rotate(2.4deg); margin-left: -12%; z-index: 2; }
.pair:hover .pair__photo    { transform: rotate(-4.2deg) translateY(-3px); }
.pair:hover .pair__portrait { transform: rotate(3.2deg) translateY(-5px); }
.pair__arrow {
	position: absolute;
	left: 50%; top: 44%;
	width: 44px;
	margin-left: -26px;
	z-index: 3;
	color: var(--violet);
	transform: rotate(-6deg);
	filter: drop-shadow(0 1px 2px rgba(255,255,255,.9));
}
.pair__arrow svg { width: 100%; display: block; }
@media (max-width: 700px) {
	.pairs { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
}

/* On a pricing card the pair is the picture: a little more air, a bigger arrow. */
/* The chosen sample laid into a photographed blank scene. The art rectangle
   is where the empty sheet / mat opening sits in each photo, as fractions. */
.mock {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 16px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--cream-2);
}
.mock__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock__art {
	position: absolute;
	object-fit: cover;
	/* multiply keeps the scene's shading on the paper */
	mix-blend-mode: multiply;
}
.mock--print  .mock__art { left: 26.5%; top: 16.5%; width: 47.6%; height: 67%; }
.mock--framed .mock__art { left: 29.2%; top: 22.7%; width: 41.7%; height: 54.7%; }
.mock--digital .mock__art {
	left: 50%; top: 50%;
	width: 52%; height: auto; aspect-ratio: 3 / 4;
	transform: translate(-50%, -50%) rotate(-2deg);
	mix-blend-mode: normal;
	border: 5px solid #fff;
	border-radius: 3px;
	box-shadow: 0 14px 30px rgba(35,34,34,.18), 0 2px 5px rgba(35,34,34,.1);
}
.mock__art:not([src]) { visibility: hidden; }

.pair--tier {
	padding: 18px 10px 26px;
	margin-bottom: 16px;
	background: var(--cream-2);
	border-radius: var(--radius);
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
}
.pair--tier img { width: 86%; margin-inline: auto; }
.pair--tier .pair__photo    { margin-top: 14px; margin-left: 6%; }
.pair--tier .pair__portrait { margin-left: -4%; }
.pair--tier .pair__arrow { width: 52px; margin-left: -30px; top: 42%; }


.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 {
	/* 44px: the smallest target a thumb reliably hits, and this is the only
	   way back through the flow. */
	flex: 0 0 44px;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 50%;
	color: var(--ink);
	cursor: pointer;
	transition: transform var(--t) var(--ease), border-color var(--t-fast) var(--ease);
}
.wiz__back:hover { transform: translateX(-2px); border-color: var(--ink); }
.wiz__back svg { width: 20px; }

.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 var(--t) var(--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: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	opacity: .55;
	transition: opacity var(--t) var(--ease), color var(--t) var(--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 var(--t-slow) var(--ease) 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 var(--t) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Wallet buttons above the card button; Stripe draws them. */
.express { margin: 0 0 14px; }
.express__or {
	display: flex; align-items: center; gap: 12px;
	margin: 14px 0 0;
	font-family: var(--sans); font-size: .8rem; color: var(--muted);
}
.express__or::before, .express__or::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

.btn--pay { background: var(--green); }
.btn--pay:hover { background: #01913a; }
.btn--pay { transition: background var(--t-fast) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }

.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 1fr; gap: 12px; }
/* City + ZIP, where the second field only needs five characters. */
.field-row--tight { grid-template-columns: 1fr auto; }

.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-color: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: 11px;
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
	/* Without this Safari draws its own control: a grey gradient on selects,
	   an inset shadow on inputs, and none of the border we just set. */
	-webkit-appearance: none;
	appearance: none;
}

/* appearance:none removes the native arrow, so supply one. */
.field select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23857C76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	cursor: pointer;
}
.field select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237066E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); }

/* Date and number spinners are Safari's too. */
.field input::-webkit-date-and-time-value { text-align: left; }
.field input::-webkit-inner-spin-button,
.field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.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 var(--t) var(--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 var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t) var(--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);
}


/* Photo-step choices — the two things baked into the painting. */
.panel__form > .sub-step { margin-bottom: 14px; }

.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.look { position: relative; display: block; cursor: pointer; }
.look input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.look__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	height: 100%;
	padding: 8px 8px 10px;
	text-align: center;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.look:hover .look__body { border-color: #C9BFB2; transform: translateY(-2px); }
.look input:checked + .look__body {
	border-color: var(--violet);
	background: var(--violet-wash);
	box-shadow: 0 0 0 3px rgba(112,102,224,.13);
}
.look input:focus-visible + .look__body { outline: 3px solid var(--violet); outline-offset: 2px; }
.look__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 6px;
	background: #fff;
}
.look__name { font-weight: 700; color: var(--ink); font-size: .93rem; }

.tickrow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 14px;
	margin-bottom: 14px;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tickrow input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tickrow:hover { border-color: #C9BFB2; }
.tickrow:has(input:checked) { border-color: var(--violet); background: var(--violet-wash); }
.tickrow:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 2px; }
.tickrow__box {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	margin-top: 1px;
	border: 1.5px solid #C9BFB2;
	border-radius: 6px;
	background: #fff;
	color: #fff;
	display: grid; place-items: center;
	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tickrow__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease); }
.tickrow:has(input:checked) .tickrow__box { background: var(--violet); border-color: var(--violet); }
.tickrow:has(input:checked) .tickrow__box svg { opacity: 1; transform: scale(1); }
.tickrow__text { display: flex; flex-direction: column; gap: 2px; }
.tickrow__text strong { font-size: .95rem; color: var(--ink); }
.tickrow__text > span { font-family: var(--sans); font-size: .78rem; color: var(--muted); }

/* ── 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(.12) brightness(1.08) contrast(.9); }

/* The photo colours in from the top as the bar moves: the same image, full
   colour, revealed through a soft-edged mask driven by --p. */
.gen__art { --p: 0%; }
.gen__paint {
	position: absolute; inset: 0;
	filter: none !important;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--p) - 14%), transparent var(--p));
	        mask-image: linear-gradient(to bottom, #000 calc(var(--p) - 14%), transparent var(--p));
	transition: -webkit-mask-image var(--t-slow) linear, mask-image var(--t-slow) linear;
}

/* 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__art--stopped img { filter: saturate(.2) brightness(1.06) opacity(.7); }
.gen__art--stopped .gen__shimmer,
.gen__art--stopped .gen__brush { display: none; }

.gen__error { margin-top: 6px; text-align: center; animation: rise var(--t) var(--ease) both; }
.gen__error p {
	margin: 0 auto 16px;
	max-width: 34ch;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink-soft);
}
.gen__error-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 320px; margin: 0 auto; }

.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 var(--t-slow) linear;
}

.gen__eta {
	font-family: var(--sans);
	font-size: .84rem;
	color: var(--muted);
	margin: 12px 0 0;
}

/* Empty sheets, one per portrait on its way. */
.gen__coming {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 26px auto 0;
	padding: 0;
}
.gen__slot {
	font-family: var(--sans);
	font-size: .74rem;
	color: var(--muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 84px;
}
.gen__slot span {
	display: block;
	width: 64px;
	aspect-ratio: 4 / 5;
	border-radius: 3px;
	border: 4px solid var(--paper);
	background: linear-gradient(120deg, var(--cream-2) 30%, #fff 50%, var(--cream-2) 70%);
	background-size: 240% 100%;
	box-shadow: 0 6px 16px rgba(35,34,34,.10);
	animation: sheet 2.2s ease-in-out infinite;
}
.gen__slot:nth-child(2) span { animation-delay: .35s; }
.gen__slot:nth-child(3) span { animation-delay: .7s; }
@keyframes sheet {
	from { background-position: 120% 0; }
	to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.gen__slot span, .gen__shimmer, .gen__brush { animation: none; }
}

/* ── 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 var(--t-fast) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/*
 * Previews are for looking at. With the pointer passing through the image to
 * its frame, a right-click or a long-press finds no image to offer to save,
 * and the card still selects on a tap. A screenshot gets past this; the
 * watermark is what has to hold.
 */
.sample__frame img,
.zoom__figure img,
.mock img {
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.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 var(--t-fast) var(--ease), transform var(--t) var(--ease-pop);
	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;
	min-height: 40px;
	padding: 9px 15px;
	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 var(--t-fast) var(--ease), background var(--t-fast) var(--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 var(--t-fast) var(--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;
}

/* People read this one line to decide whether the writing across their dog is
   permanent, so it is a notice, not fine print. */
.samples__note {
	font-family: var(--sans);
	font-size: .92rem;
	line-height: 1.5;
	color: var(--ink-soft);
	text-align: center;
	margin: 0 0 16px;
	padding: 11px 16px;
	background: var(--violet-wash);
	border-radius: var(--radius);
}
.samples__note strong { color: var(--ink); }

/* A quiet, centred pill: the note sits on the same line after a dot. */
.samples__reroll {
	display: flex;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 8px;
	padding: 10px 18px;
	font-size: .9rem;
}
.samples__reroll .btn__note { width: auto; margin: 0; }
.samples__reroll .btn__note:not(:empty)::before { content: '\00b7'; margin: 0 .5em 0 .1em; }

/* 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: 200;
	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 var(--t-fast) var(--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 var(--t) var(--ease-pop) 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 var(--t-fast) var(--ease);
}
.zoom__close:hover { background: rgba(255,255,255,.26); }
.zoom__close svg { width: 21px; }

.zoom__pick { flex: 0 0 auto; }

/* ── Launch offer ─────────────────────────────────────────── */

.offer {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 11px 14px;
	margin-bottom: 18px;
	background: linear-gradient(100deg, #FFF3EE, #FDEBE4);
	border: 1px solid #F3CDBE;
	border-radius: var(--radius);
	font-family: var(--sans);
	font-size: .88rem;
	color: #8C2F1B;
	animation: rise .4s ease both;
}

.offer__flag {
	flex: 0 0 auto;
	background: var(--terracotta);
	color: #fff;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 20px;
}

.offer__text { flex: 1 1 auto; min-width: 0; }

.offer__clock {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 1rem;
	color: var(--terracotta-deep);
	background: rgba(255,255,255,.7);
	padding: 3px 9px;
	border-radius: 7px;
}

/* "Karen sent you 25% off" — the bar pulse.js puts at the top of a referred visit. */
.refbar {
	background: var(--violet-ink);
	color: #fff;
	font-family: var(--sans);
	font-size: .9rem;
	line-height: 1.4;
	text-align: center;
	padding: 10px 16px;
}
.refbar b { font-weight: 700; }

/* Last five minutes: a slow pulse, not a strobe. */
.offer--urgent .offer__clock { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

.offer--hero {
	display: inline-flex;
	margin: 0 0 20px;
}

.review__saving dd { color: var(--terracotta-deep); }

/* ── 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 var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--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: block; padding-right: 30px; }
.fmt__name { display: block; font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.fmt__price { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; margin-top: 4px; }
.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__bonus,
.tier__bonus {
	display: flex; align-items: flex-start; gap: 7px;
	margin-top: 9px;
	font-family: var(--sans);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--violet-deep);
}
.fmt__bonus::before,
.tier__bonus::before {
	content: "+";
	flex: 0 0 auto;
	font-weight: 700;
}
.tier__bonus { margin: -.3em 0 1em; }

.fmt__perks { display: none; margin-top: 11px; }
.fmt input:checked + .fmt__body .fmt__perks { display: block; animation: rise var(--t) var(--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 var(--t-fast) var(--ease), transform var(--t) var(--ease-pop);
}
.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: var(--violet-wash); }

/* Injected directly beneath the selected format card, so it reads as part of
   that card rather than as options belonging to the one below. */
.sub-steps {
	margin: 0 0 12px;
	padding: 4px 16px 16px;
	background: var(--violet-wash);
	border: 1.5px solid var(--violet);
	border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	animation: unfold .3s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes unfold {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Joined: the card loses its bottom edge and its bottom corners so the two
   elements read as one panel rather than two boxes with a seam between them. */
.fmt--joined .fmt__body {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-bottom: 4px;
}
.fmt--joined + .sub-steps { margin-top: 0; }

.sub-step { margin-bottom: 16px; }
.sub-step:last-child { margin-bottom: 0; }
.sub-step__title {
	font-family: var(--sans);
	font-size: .76rem;
	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-color: #D7D0EC;
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
@media (hover: hover) { .size:hover .size__body { border-color: #C9BFB2; } }
.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; }
/* Name and dimensions were wrapped together when the digital tiers arrived;
   without this they ran into each other ("Small12" x 16""). */
.size__text { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.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-color: #D7D0EC;
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--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 var(--t) var(--ease-pop);
}
.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 .mock { width: min(300px, 78vw); margin: 0 auto; }
.review__art .mock--digital { aspect-ratio: 4 / 5; background: transparent; }
.review__art .mock--digital .mock__art { width: 68%; }
.review__art .mock--set .mock__art, .review__art .mock--collection .mock__art { width: 54%; }
.review__art .mock__sheet { width: 54%; }

/* Pay first (/paint/): the tiers are the whole step, with no format card to hang from. */
.wiz--prepay .sub-steps { margin: 0 0 16px; padding: 0; background: none; border: 0; border-radius: 0; animation: none; }

/* Pay first (/paint/): the portrait is painted and waiting, blurred until they pay. */
.ready { margin: 0 auto 20px; }
.ready__frame {
	position: relative;
	display: block;
	width: min(280px, 70vw);
	aspect-ratio: 4 / 5;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--paper);
	box-shadow: 0 14px 34px rgba(35,34,34,.16);
}
.ready__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.ready__lock {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 99px;
	background: rgba(255,255,255,.92);
	font-family: var(--sans);
	font-size: .8rem;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	width: max-content;   /* from the middle of the frame it only gets half its width */
}
.ready__lock svg { flex: none; width: 15px; height: 15px; }
.ready--small { margin-bottom: 16px; }
.ready--small .ready__frame { width: min(200px, 56vw); }
/* Pay first, after paying: how to paint the more. */
.more { margin: 22px 0 8px; padding: 18px; background: var(--paper); border: 1.5px solid var(--hairline); border-radius: var(--radius-lg); }
.more__title { margin: 0 0 12px; font-size: 1.15rem; }
.more__opts { display: grid; gap: 8px; }
.more__opt { position: relative; cursor: pointer; }
.more__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.more__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: var(--radius); font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.more__body strong { font-family: var(--serif); font-size: .98rem; color: var(--ink); }
.more__opt input:checked + .more__body { border-color: var(--violet); background: var(--violet-wash); box-shadow: 0 0 0 3px rgba(112,102,224,.13); }
.more__opt input:focus-visible + .more__body { outline: 3px solid var(--violet); outline-offset: 2px; }
.more__photo { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: end; margin-top: 12px; }
.more__drop { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; padding: 8px; overflow: hidden; border: 1.5px dashed #C9BFB2; border-radius: var(--radius); background: var(--paper); font-family: var(--sans); font-size: .78rem; text-align: center; color: var(--muted); cursor: pointer; }
.more__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.more__drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.more__photo .field { margin: 0; }
.more__bonus { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius); background: #FFF6E6; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.more .btn { margin-top: 14px; }
.size__bonus { display: block; margin-top: 5px; font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--terracotta-deep); }

.why__guarantee { margin-top: 14px; text-align: center; font-family: var(--sans); font-size: .85rem; color: var(--muted); }

/*
 * One rhythm down the whole list.
 *
 * The rows and the total used to stack a bottom border, the list's own margin
 * and the total's top padding — roughly double the gap between the rows above
 * it, which read as a mistake rather than a deliberate break. Now every row
 * carries the same padding, the last drops its rule, and the total is set off
 * by one heavier rule instead.
 */
.review__lines { margin: 0; }
.review__lines > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cream-2);
}
.review__lines > div:last-child { border-bottom: 0; }
.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;
	gap: 14px;
	padding: 14px 0 2px;
	border-top: 2px solid var(--hairline);
	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;
	/* Flat line box, so the big number cannot inflate the row it sits in. */
	line-height: 1;
	color: var(--ink);
	letter-spacing: -.02em;
}

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

/* The three beats after paying: label, then what happens. */
.pay-next {
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	display: grid;
	gap: 9px;
}
.pay-next li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline; font-size: .95rem; color: var(--ink-soft); }
.pay-next b { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-deep); }
.btn__and { font-weight: 500; opacity: .92; }

/* The guarantee under the pay buttons: a shield on a violet wash, the
   promise in one breath. Not a card — no border, no accent bar. */
.promise {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: start;
	margin: 22px 0 0;
	padding: 18px 20px;
	background: var(--violet-wash);
	border-radius: var(--radius);
}
.promise__mark { width: 40px; color: var(--violet-deep); padding-top: 2px; }
.promise__mark svg { width: 100%; height: auto; }
.promise__title {
	font-size: 1.12rem;
	margin: 0 0 4px;
	color: var(--violet-ink);
}
.promise__body p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.promise__body a { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 420px) { .promise { grid-template-columns: 1fr; gap: 10px; } .promise__mark { width: 34px; } }
.code-note {
	margin: 14px 0 0;
	padding: 10px 14px;
	font-family: var(--sans);
	font-size: .88rem;
	color: var(--violet-deep);
	background: var(--violet-wash);
	border-radius: var(--radius);
}
@media (max-width: 480px) { .btn--pay .btn__and { display: block; font-size: .9rem; } }

.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 var(--t) var(--ease-pop);
}
.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 .mock { width: 320px; }
	.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; }
	.wiz--options .wiz__stage { max-width: 960px; }
	.wiz--options .formats { grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
	.wiz--options .fmt__body { height: 100%; box-sizing: border-box; }
	.wiz--options .fmt__perks { display: block; }   /* room for them; no need to hide until chosen */
	.wiz--options .pair--tier { padding: 12px 6px 18px; }
	/* The size/frame block is moved under the chosen card by script; in the
	   three-column grid it takes a full row of its own instead of a cell. */
	.wiz--options .formats > .sub-steps { grid-column: 1 / -1; order: 10; }
	/* Side by side, the "joined" look has nothing to join to: the panel becomes
	   a compact row of its own — a label on the left, the choices beside it. */
	.wiz--options .fmt--joined .fmt__body { border-bottom: 1.5px solid var(--violet); border-radius: var(--radius); padding-bottom: 16px; }
	.wiz--options .sub-steps {
		margin: 4px 0 0;
		padding: 14px 18px;
		border-top: 1.5px solid var(--violet);
		border-radius: var(--radius);
		display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center;
	}
	.wiz--options .sub-step { display: flex; align-items: center; gap: 14px; margin: 0; }
	.wiz--options .sub-step__title { margin: 0; }
	.wiz--options .sizes { grid-template-columns: repeat(3, 118px); gap: 8px; }
	.wiz--options .size__body { padding: 8px 10px; gap: 0; }
	.wiz--options .size__name { font-size: .88rem; }
	.wiz--options .size__price { margin-top: 3px; flex-direction: row; gap: 5px; justify-content: center; }
	.wiz--options .frames { gap: 8px; }
	.samples { grid-template-columns: repeat(auto-fit, minmax(190px, 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 { 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;
	transition: color var(--t-fast) var(--ease);
}
.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; }
}

/* Checkout footer: one quiet line, on the page colour rather than the dark
   block, with the legal links opening in a new tab so the order is not lost. */
.site-footer--bare {
	background: transparent;
	color: var(--muted);
	padding-block: 18px 26px;
	border-top: 1px solid var(--hairline);
}
.site-footer__bare-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px 24px;
	flex-wrap: wrap;
	font-family: var(--sans);
	font-size: .82rem;
}
.site-footer__bare-inner p { margin: 0; }
.site-footer__bare-list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.site-footer__bare-list a { color: var(--muted); text-decoration: none; 	transition: color var(--t-fast) var(--ease);
}
.site-footer__bare-list a:hover { color: var(--ink); text-decoration: underline; }

/* ══ 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); }

/* Three real columns rather than CSS multi-column: transforming a card inside
   a multicol container makes Safari drop and repaint it, which showed up as
   cards vanishing for a beat on hover. */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: start;
}
.reviews__col { display: flex; flex-direction: column; gap: 18px; }

.review-card {
	margin: 0;
	padding: 20px 21px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.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; }

/* Under three across, the dealt columns would stack one under another and
   leave a hole; dissolve them and let the cards flow into CSS columns. */
@media (max-width: 900px) {
	.reviews { display: block; columns: 2; column-gap: 16px; }
	.reviews__col { display: contents; }
	.review-card { break-inside: avoid; margin-bottom: 16px; }
}
@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;
	flex: 1 0 auto;
	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); }

/* ── The post-purchase upgrade card ───────────────────────── */
.upgrade {
	margin: 40px auto 0;
	max-width: 560px;
	padding: 26px 24px 22px;
	text-align: left;
	background: var(--paper);
	border: 2px solid var(--violet);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 42px rgba(112,102,224,.16);
}
.upgrade--done { border-color: var(--green); box-shadow: none; }
.upgrade__eyebrow {
	margin: 0 0 6px;
	font-family: var(--sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--violet-deep);
}
.upgrade--done .upgrade__eyebrow { color: var(--green); }
.upgrade__title { margin: 0 0 .4em; font-size: 1.45rem; }
.upgrade__lede { margin: 0 0 18px; color: var(--ink-soft); }
.upgrade__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; margin-bottom: 12px; }
.upgrade__opt { position: relative; cursor: pointer; }
.upgrade__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upgrade__opt-body {
	display: flex; flex-direction: column; gap: 3px;
	padding: 12px 13px;
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.upgrade__opt:hover .upgrade__opt-body { border-color: #C9BFB2; }
.upgrade__opt input:checked + .upgrade__opt-body { border-color: var(--violet); background: var(--violet-wash); box-shadow: 0 0 0 3px rgba(112,102,224,.13); }
.upgrade__opt input:focus-visible + .upgrade__opt-body { outline: 3px solid var(--violet); outline-offset: 2px; }
.upgrade__opt-size { font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.upgrade__opt-price { font-size: 1.05rem; color: var(--ink); }
.upgrade__opt-price s { color: var(--muted); font-size: .88rem; margin-right: 4px; }
/* Pay first: the print or the frame, each with its own sizes. */
.upgrade__formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.upgrade__format { position: relative; cursor: pointer; }
.upgrade__format input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upgrade__format span {
	display: inline-block;
	padding: 8px 14px;
	border: 1.5px solid var(--hairline);
	border-radius: 99px;
	font-family: var(--sans);
	font-size: .88rem;
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.upgrade__format input:checked + span { border-color: var(--violet); background: var(--violet-wash); }
.upgrade__format input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }
.upgrade__frames { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; font-family: var(--sans); font-size: .9rem; }
.upgrade__frame { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.upgrade .thanks__note { text-align: center; }

.tier__was { color: var(--muted); font-size: 1rem; font-weight: 400; margin-right: 2px; }
.fmt__was { color: var(--muted); font-size: .88rem; font-weight: 400; }

/* ══ Section washes ═══════════════════════════════════════ */

.wash--how::before {
	width: 40vw; height: 40vw;
	left: -14vw; top: -10vw;
	background: radial-gradient(circle, rgba(228,234,223,.9), transparent 70%);
}
.wash--how::after {
	width: 26vw; height: 26vw;
	right: -8vw; bottom: -8vw;
	background: radial-gradient(circle, rgba(112,102,224,.14), transparent 70%);
}
.wash--pricing::before {
	width: 44vw; height: 44vw;
	right: -16vw; top: -16vw;
	background: radial-gradient(circle, rgba(246,228,220,.95), transparent 70%);
}
.wash--pricing::after {
	width: 30vw; height: 30vw;
	left: -12vw; bottom: -14vw;
	background: radial-gradient(circle, rgba(112,102,224,.12), transparent 70%);
}
.wash--reviews::before {
	width: 36vw; height: 36vw;
	left: 50%; top: -18vw; margin-left: -18vw;
	background: radial-gradient(circle, rgba(253,199,0,.14), transparent 70%);
}
.wash--reviews::after { display: none; }
.wash--closer::before {
	width: 52vw; height: 52vw;
	left: 50%; bottom: -34vw; margin-left: -26vw;
	background: radial-gradient(circle, rgba(219,91,65,.16), transparent 68%);
}
.wash--closer::after { display: none; }

.wash > .wrap { position: relative; z-index: 1; }

/* ══ Discounted prices ════════════════════════════════════
   A struck-through sibling only ever renders when the offer is
   live, so the general sibling combinator is enough to colour
   the live price — no :has(), no extra class plumbing.
   ═════════════════════════════════════════════════════════ */

.fmt__price s ~ strong,
.tier__price s ~ strong,
.size__price s ~ strong,
.review__amount s ~ strong { color: var(--terracotta-deep); }

.fmt__was, .tier__was, .size__price s, .review__amount s {
	color: var(--muted);
	text-decoration-thickness: 1.5px;
	text-decoration-color: rgba(219,91,65,.5);
}

.size input:checked + .size__body .size__price strong { color: var(--terracotta-deep); }

/* The offer itself carries more weight than a tinted strip. */
.offer {
	position: relative;
	background: linear-gradient(100deg, #FFF0EA, #FCE3DA);
	border: 1.5px solid rgba(219,91,65,.35);
	box-shadow: 0 2px 10px rgba(219,91,65,.10);
	color: #8C2F1B;
	font-weight: 500;
}
.offer__flag {
	background: var(--terracotta);
	box-shadow: 0 2px 6px rgba(219,91,65,.35);
	font-size: .78rem;
}
.offer__clock {
	background: var(--ink);
	color: #fff;
	font-size: 1.02rem;
	letter-spacing: .02em;
	padding: 4px 10px;
}
.offer--urgent { border-color: var(--terracotta); }
.offer--urgent .offer__clock { background: var(--terracotta); }

/* A friend's code or a reward: violet, no clock. */
.offer--code {
	background: linear-gradient(100deg, #F1EFFD, var(--violet-wash));
	border-color: rgba(112,102,224,.4);
	box-shadow: 0 2px 10px rgba(112,102,224,.12);
	color: var(--violet-ink);
}
.offer--code .offer__flag { background: var(--violet); box-shadow: 0 2px 6px rgba(112,102,224,.35); }

/* ══ Steps, as four drawn cards ═══════════════════════════
   Each step gets a small ink drawing on its own wash — the
   washes go round the palette so the row reads as a set, not
   four copies. The numeral sits on the card like a stamp.
   ═════════════════════════════════════════════════════════ */

.steps { counter-reset: step; gap: 20px; }

.step {
	position: relative;
	padding: 0 0 22px;
	background: var(--paper);
	border: 1px solid rgba(35,34,34,.09);
	border-radius: 6px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.step__ill svg { transition: transform var(--t-slow) var(--ease); transform-origin: 50% 60%; }
.step:hover .step__ill svg { transform: scale(1.06); }
.step h3 { margin: 0 20px .35em; font-size: 1.1rem; }
.step p { margin: 0 20px; font-size: .96rem; }

.step__ill {
	position: relative;
	aspect-ratio: 10 / 7;
	margin-bottom: 18px;
	color: var(--ink);
	background: var(--violet-wash);
}
.step__ill svg { display: block; width: 100%; height: 100%; padding: 3% 3% 0; }
.step--2 .step__ill { background: var(--blush); }
.step--3 .step__ill { background: var(--sage); }
.step--4 .step__ill { background: var(--sand); }

.ill__paper { fill: #fff; }
.ill__wash  { fill: rgba(35,34,34,.07); }
.ill__tint  { fill: var(--violet); opacity: .28; }
.step--2 .ill__tint { fill: var(--terracotta); }
.step--3 .ill__tint { fill: var(--green); }
.step--4 .ill__tint { fill: #B4713C; }
.ill__badge { fill: var(--green); }

.step__n {
	position: absolute;
	top: 12px; left: 14px;
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 30px; height: 30px;
	margin: 0;
	background: var(--ink);
	color: #fff;
	border-radius: 50%;
	font-family: var(--sans);
	font-size: .86rem;
	font-weight: 700;
	line-height: 1;
	opacity: 1;
}

/* The thank-you page reuses the list without drawings; keep it plain there. */
.steps--compact .step { padding: 6px 0 0; background: none; border: 0; box-shadow: none; }
.steps--compact .step h3, .steps--compact .step p { margin-inline: 0; }
.steps--compact .step__n { position: static; margin-bottom: 14px; background: var(--violet); }

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

.tier {
	border-radius: 6px;
	border-color: rgba(35,34,34,.10);
	box-shadow: 0 1px 2px rgba(35,34,34,.04), 0 12px 28px rgba(35,34,34,.06);
	transition: transform var(--t) var(--ease-pop), box-shadow var(--t) var(--ease);
}
.tier--featured {
	border-color: var(--violet);
	border-width: 2px;
	box-shadow: 0 1px 2px rgba(35,34,34,.04), 0 18px 42px rgba(112,102,224,.16);
}
.tier__flag { border-radius: 4px; box-shadow: 0 3px 8px rgba(112,102,224,.3); }
.tier__price strong { font-size: 2.3rem; }
.tier__name { font-size: 1.35rem; }

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

.rating {
	display: inline-flex;
	padding: 9px 18px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 40px;
	box-shadow: var(--shadow-sm);
}
.rating strong { font-size: 1.06rem; }

.review-card {
	position: relative;
	border-radius: 6px;
	border-color: rgba(35,34,34,.09);
	padding: 22px 22px 20px;
}
/* An open quote set in the display face, bled into the corner. */
.review-card::before {
	content: "\201C";
	position: absolute;
	top: -6px; right: 14px;
	font-family: var(--serif);
	font-size: 4.4rem;
	line-height: 1;
	color: var(--violet);
	opacity: .13;
	pointer-events: none;
}
.review-card blockquote { position: relative; z-index: 1; }
/* The buyer's own photo, bled to the card edges above the quote. */
.review-card { padding-top: 0; overflow: hidden; }
.review-card::before { display: none; }   /* the quote mark would sit on the photo */
.review-card__shot {
	display: block;
	width: calc(100% + 44px);
	margin: 0 -22px 16px;
	padding: 0;
	border: 0;
	background: var(--cream-2);
	cursor: zoom-in;
}
.review-card__shot img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 340px;
	object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}
.review-card__shot:hover img { transform: scale(1.04); }
.review-card__shot:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
.reviews__more { margin: 28px 0 0; text-align: center; }

.shot-dialog {
	max-width: min(92vw, 900px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--paper);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.shot-dialog::backdrop { background: rgba(35,34,34,.72); }
.shot-dialog img { display: block; max-width: 92vw; max-height: 92vh; }
.shot-dialog__close {
	position: absolute;
	top: 10px; right: 10px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: rgba(255,255,255,.92);
	border: 0;
	border-radius: 50%;
	color: var(--ink);
	cursor: pointer;
	transition: background var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.shot-dialog__close svg { width: 18px; height: 18px; }

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

.section--violet {
	position: relative;
	overflow: hidden;
	background: var(--violet-ink);
}
.section--violet::before {
	content: "";
	position: absolute;
	width: 44vw; height: 44vw;
	right: -12vw; top: -20vw;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
	pointer-events: none;
}
.guarantee { position: relative; z-index: 1; }
.guarantee__mark { width: 68px; }

/* ══ Closer ═══════════════════════════════════════════════ */

.closer__title { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.closer__sub { font-size: 1.12rem; }

/* ══ Wizard polish ════════════════════════════════════════ */

/* Cleaner: less rounding, one weight of border, more air. */
.fmt__body, .sub-steps, .review, .chosen-strip, .drop {
	border-radius: 8px;
}
.sample__frame { border-radius: 6px; }

.panel__head h1 { font-size: clamp(1.72rem, 6vw, 2.15rem); }

.fmt__name { font-size: 1.14rem; }
.fmt__price strong { font-size: 1.42rem; }

/* The chosen portrait gets the same "print on a table" treatment as the hero. */
.chosen-strip img {
	border: 4px solid var(--paper);
	border-radius: 3px;
	box-shadow: 0 6px 16px rgba(35,34,34,.16);
	transform: rotate(-2deg);
}
.sample__frame img { border-radius: 4px; }

/* Progress marks read as brushed strokes rather than a loading bar. */
.wiz__dot-mark { height: 4px; border-radius: 4px; }
.wiz__dot.is-now .wiz__dot-mark {
	background: linear-gradient(90deg, var(--violet), var(--violet-ink));
}

/* The generating screen gets the paper treatment too. */
.gen__art {
	border-radius: 4px;
	border: 10px solid var(--paper);
	box-shadow: 0 20px 44px rgba(35,34,34,.18);
}

/* ══ Content pages ════════════════════════════════════════ */

.page-hero {
	padding-block: clamp(38px, 5vw, 68px) clamp(24px, 3vw, 38px);
	border-bottom: 1px solid var(--hairline);
	background: var(--cream);
}
.page-hero h1 { margin-bottom: .2em; }
.page-hero .eyebrow { margin-bottom: .6em; }

.prose { font-size: 1.04rem; }
.prose > h2 {
	margin: 2.1em 0 .5em;
	padding-top: .8em;
	border-top: 2px solid var(--hairline);
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose > h3 {
	margin: 1.6em 0 .35em;
	font-size: 1.1rem;
	color: var(--violet-ink);
}
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose .lede {
	font-size: 1.16rem;
	color: var(--muted);
	margin-bottom: 1.6em;
}
.prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88em;
	background: var(--cream-2);
	padding: 2px 6px;
	border-radius: 4px;
}
.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: .98rem;
}
.prose th, .prose td {
	text-align: left;
	padding: 11px 14px;
	border-bottom: 1px solid var(--hairline);
}
.prose thead th {
	font-family: var(--sans);
	font-size: .78rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-width: 2px;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose a { text-decoration-color: rgba(87,76,209,.4); }
.prose a:hover { text-decoration-color: currentColor; }

/* The thank-you page reuses the wizard's review block, minus the card. */
.review--flat {
	box-shadow: none;
	margin: 28px 0;
	text-align: left;
}

/* ══ Upload prompt ════════════════════════════════════════
   Most of this traffic arrives from a Facebook ad and gives the
   page a second or two. The dropzone has to read as the only
   thing to do on the screen, without becoming a fairground.
   ═════════════════════════════════════════════════════════ */

.drop--waiting {
	border-color: var(--violet);
	background: linear-gradient(var(--violet-wash), var(--violet-wash)) padding-box;
	animation: drop-breathe 2.4s ease-in-out infinite;
}
@keyframes drop-breathe {
	0%, 100% { box-shadow: 0 0 0 0 rgba(112,102,224,.30); }
	55%      { box-shadow: 0 0 0 12px rgba(112,102,224,0); }
}
.drop--waiting:hover, .drop--waiting.is-over { animation: none; }

/* The icon already breathes; give it a stronger, warmer presence. */
.drop--waiting .drop__icon {
	background: var(--violet);
	color: #fff;
	width: 62px; height: 62px;
}
.drop--waiting .drop__icon svg { width: 29px; }

.drop__empty strong { font-size: 1.14rem; }

/* Inside the box, above the camera: the whole box is the target, so the arrow
   points at what to tap rather than at the gap above it. */
.drop__nudge {
	display: block;
	width: 20px;
	margin: 0 auto 4px;
	color: var(--violet);
	animation: nudge 1.5s ease-in-out infinite;
}
.drop__nudge svg { width: 100%; display: block; }
@keyframes nudge {
	0%, 100% { transform: translateY(-4px); opacity: .45; }
	50%      { transform: translateY(2px);  opacity: 1; }
}
.drop:not(.drop--waiting) .drop__nudge { display: none; }

@media (prefers-reduced-motion: reduce) {
	.drop--waiting, .drop__nudge, .drop--waiting .drop__icon { animation: none !important; }
	.drop--waiting { box-shadow: 0 0 0 4px rgba(112,102,224,.22); }
}

/* ══ Product photo strips ═════════════════════════════════
   A native scroll-snap scroller, not a carousel library: it
   flicks correctly on a phone, works with no JavaScript, and
   adds nothing to the page weight.
   ═════════════════════════════════════════════════════════ */

.shots {
	position: relative;
	margin: -4px 0 16px;
}

.shots__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
	/* No visible scrollbar; the peek of the next image is the affordance. */
	scrollbar-width: none;
}
.shots__track::-webkit-scrollbar { display: none; }
.shots__track:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

.shots__item {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}
/* With more than one, the next photo peeks in to say it is swipeable. */
.shots--many .shots__item { flex-basis: 88%; }

.shots__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	background: var(--cream-2);
}

.shots__hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	font-family: var(--sans);
	font-size: .74rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
}
.shots__hint span {
	width: 14px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	animation: swipe-hint 1.8s ease-in-out infinite;
}
@keyframes swipe-hint {
	0%, 100% { transform: translateX(0);   opacity: .4; }
	50%      { transform: translateX(6px); opacity: 1; }
}

/* Arrows for pointers. Touch keeps the swipe and the hint; a mouse gets
   these instead, sitting over the image edges and only fully present on
   hover so the photo stays the thing you look at. */
.shots__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	color: var(--ink);
	box-shadow: 0 2px 10px rgba(35,34,34,.18);
	cursor: pointer;
	opacity: .55;
	transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease), background var(--t-fast) var(--ease);
	z-index: 2;
}
.shots__arrow svg { width: 18px; height: 18px; display: block; margin: auto; }
.shots__arrow--prev { left: 10px; }
.shots__arrow--prev svg { transform: scaleX(-1); }
.shots__arrow--next { right: 10px; }
.shots__arrow:hover { opacity: 1; background: #fff; }
.shots__arrow:focus-visible { opacity: 1; outline: 3px solid var(--violet); outline-offset: 2px; }
.shots:hover .shots__arrow { opacity: .9; }

@media (hover: hover) and (pointer: fine) {
	.shots--many .shots__arrow { display: block; }
	.shots--many .shots__hint  { display: none; }
	/* The arrows are now the affordance; no need for the peek. */
	.shots--many .shots__item  { flex-basis: 100%; }
	/* The hint's space is gone, so keep the card rhythm the same. */
	.shots--many { margin-bottom: 14px; }
}

/* Until real photos exist, one labelled placeholder rather than four. */
.shots--empty .slot-empty {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
}

/* In the wizard the cards are tighter, so the strip is shallower. */
.fmt__body .shots { margin: 10px 0 12px; }
.fmt__body .shots__item img { aspect-ratio: 16 / 10; }

@media (prefers-reduced-motion: reduce) {
	.shots__hint span { animation: none; }
	.shots__track { scroll-behavior: auto; }
}

/* ══ Commission page ══════════════════════════════════════
   The wait and the price are a filter, and a filter works
   better stated up front than discovered at the end.
   ═════════════════════════════════════════════════════════ */

/*
 * Stated figures, set like the "how it works" row rather than boxed.
 * A hairline above, the number carrying the weight — same language as the
 * rest of the site, and it stops these reading as two generic cards.
 */
.facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin: 30px 0 32px;
}
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; gap: 26px; } }

.fact { border-top: 2px solid var(--violet); padding-top: 15px; }
.fact:nth-child(2) { border-top-color: var(--terracotta); }

.fact__label {
	display: block;
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}
.fact__value {
	display: block;
	font-size: clamp(1.5rem, 3.6vw, 1.95rem);
	line-height: 1.05;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -.03em;
	margin-bottom: 10px;
}
.fact__note {
	display: block;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--muted);
}

.commission-form .step-block:first-of-type,
.return-form .step-block:first-of-type { border-top: 0; padding-top: 0; }
.commission-form input[type="file"],
.return-form input[type="file"] {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--sans);
	font-size: .92rem;
	background: var(--paper);
	border: 1.5px dashed var(--hairline);
	border-radius: 9px;
	transition: border-color var(--t-fast) var(--ease);
}
.commission-form input[type="file"]:hover,
.return-form input[type="file"]:hover { border-color: var(--violet); }

/* ══ Returns ══════════════════════════════════════════════ */

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Form feedback, for the plain POST forms (commission, returns). */
.alert {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 0 22px;
	padding: 14px 16px;
	border-radius: var(--radius);
	font-family: var(--sans);
	font-size: .95rem;
	line-height: 1.5;
	background: var(--cream-2);
	border: 1.5px solid var(--hairline);
	color: var(--ink-soft);
}
.alert--error { background: #FBEFEC; border-color: #F0C9BF; color: #8A3A26; }
.alert--info  { background: var(--violet-wash); border-color: #D7D2F6; color: #3F3894; }
.alert strong { font-size: 1rem; }

/* The order being returned: the picture they chose and three facts. */
.ret-order {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 26px;
	padding: 14px 16px;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
}
.ret-order__art {
	flex: 0 0 64px;
	width: 64px;
	aspect-ratio: 4 / 5;
	border-radius: 6px;
	overflow: hidden;
	background: var(--cream-2);
}
.ret-order__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ret-order__facts { display: grid; gap: 4px; margin: 0; min-width: 0; }
.ret-order__facts div { display: flex; gap: 10px; align-items: baseline; }
.ret-order__facts dt { flex: 0 0 62px; font-family: var(--sans); font-size: .78rem; color: var(--muted); }
.ret-order__facts dd { margin: 0; font-weight: 600; font-size: .95rem; color: var(--ink); }

/* Radios in the tickrow shell: a round mark instead of the box. */
.tickrow--radio .tickrow__box { border-radius: 50%; }
.tickrow--radio .tickrow__box svg { width: 20px; height: 20px; }
.return-form .step-block legend .opt { font-weight: 400; color: var(--muted); font-size: .95rem; }
.return-form .tickrow:last-of-type { margin-bottom: 4px; }

/* ══ Fieldset groups ══════════════════════════════════════
   Used by the commission form. A bare <fieldset> carries a
   browser default border and an unstyled <legend>; both have
   to be replaced rather than merely overridden.
   ═════════════════════════════════════════════════════════ */

.step-block {
	border: 0;
	border-top: 1px solid var(--hairline);
	margin: 0;
	padding: 26px 0 0;
	min-width: 0;   /* stops a fieldset forcing its grid children wide */
}
.step-block:first-of-type { border-top: 0; padding-top: 0; }

.step-block legend {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 16px;
	padding: 0;
	font-family: var(--serif);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ink);
}

.step-block__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px; height: 27px;
	flex: 0 0 27px;
	background: var(--violet);
	color: #fff;
	border-radius: 50%;
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 700;
}

/* ── Leaving a review ─────────────────────────────────────── */
.starpick { display: flex; gap: 6px; }
.starpick__star { position: relative; cursor: pointer; }
.starpick__star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick__star svg { width: 44px; height: 44px; fill: #E4DED6; transition: fill .15s, transform .15s; }
.starpick__star:hover svg, .starpick__star:has(~ .starpick__star:hover) svg { fill: #F0C660; }
.starpick__star:has(input:checked) svg, .starpick__star:has(~ .starpick__star input:checked) svg { fill: #E0A526; }
.starpick__star:has(input:focus-visible) svg { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.starpick__star:active svg { transform: scale(.92); }
.stars svg.off { opacity: .22; }
.review-card--noshot { padding-top: 22px; }


/* The camera alternative under the photo drop. */
.drop__alt { margin: -6px 0 16px; text-align: center; font-size: 14px; color: var(--ink-3, #6b6560); }
.drop__alt label { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* "These aren't quite right" under the samples, and the sheet it opens.
   Quiet and only as wide as its words — the Continue button is the one
   thing on this step that should look like a button. */
.why { margin: 14px 0 4px; text-align: center; }
.why__open {
	font: inherit; font-family: var(--sans); font-size: .88rem;
	padding: 6px 4px; border: 0; background: none; cursor: pointer;
	color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.why__open:hover { color: var(--ink); }
.why__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sheet {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(24,23,23,.6);
	backdrop-filter: blur(4px);
	animation: zoom-in var(--t-fast) var(--ease) both;
}
.sheet__box {
	position: relative;
	width: min(460px, 100%);
	max-height: 86vh; overflow-y: auto;
	padding: 26px 22px 22px;
	background: var(--paper);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(24,23,23,.3);
}
.sheet__close {
	position: absolute; top: 10px; right: 10px;
	width: 34px; height: 34px; display: grid; place-items: center;
	border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.sheet__close:hover { background: var(--cream-2); color: var(--ink); }
.sheet__close svg { width: 18px; }
.sheet__title { font-size: 1.25rem; margin: 0 0 6px; }
.sheet__lead { font-family: var(--sans); font-size: .92rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; }
.sheet [data-why-answer] { margin-bottom: 18px; }
.why__chip {
	font: inherit; font-size: 13.5px; padding: 8px 12px; border-radius: 999px;
	border: 1px solid var(--line, #E3DED6); background: #fff; color: var(--ink, #232222); cursor: pointer;
}
.why__chip.is-on { border-color: var(--violet, #7066E0); background: #F1EFFC; color: #3B2FA8; }

/* ══ Order page: the context an ad visitor never saw ══════════ */

.intro { margin: 0 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line, #E3DED6); }
.intro__title { font-size: clamp(1.7rem, 6.4vw, 2.25rem); line-height: 1.12; margin: 0 0 .45em; text-wrap: balance; }
.intro__title em { font-style: italic; color: var(--violet); }
.intro__lede { color: var(--muted); font-size: 1.02rem; margin: 0 0 6px; }
.compare--intro { max-width: 420px; margin: 4px auto 34px; padding-top: 6px; }
.compare--intro .compare__side img { border-width: 7px; box-shadow: 0 12px 28px rgba(35,34,34,.14), 0 2px 5px rgba(35,34,34,.08); }
.compare--intro .compare__side figcaption { font-size: .74rem; bottom: -24px; }

/* Three steps in a row, each a hairline rule, a small-caps label and one serif line. */
.intro__how { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.intro__how li { border-top: 1px solid var(--ink, #232222); padding-top: 10px; font-size: .95rem; line-height: 1.4; }
.intro__k { display: block; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin-bottom: 4px; }
@media (max-width: 480px) {
	.intro__how { grid-template-columns: 1fr; gap: 10px; }
	.intro__how li { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: 10px; padding-top: 8px; }
	.intro__k { margin: 0; }
}
.intro__trust { justify-content: center; }
/* With the intro above it, the form's title is a second heading, not the page's. */
.wiz-intro .panel[data-panel="1"] .panel__head h1 { font-size: clamp(1.35rem, 5vw, 1.6rem); }

/* ── A/B tests (inc/experiments.php) ─────────────────────────
   Plain A until <html data-exp-KEY="b"> says otherwise. */
[data-exp-start-b] { display: none; }
html[data-exp-start="b"] [data-exp-start-b] { display: revert; }
html[data-exp-start="b"] [data-exp-start-a] { display: none; }

/* ── Format cards on a phone: one row each ───────────────────
   Picture left, name and price right; the perks unfold only on the
   chosen card, and the button stays in view while they compare. */
@media (max-width: 759px) {
	.wiz--options .fmt__body {
		display: grid;
		grid-template-columns: 88px 1fr;
		grid-template-areas: "mock top" "mock tag" "bonus bonus" "perks perks";
		column-gap: 14px;
		row-gap: 0;
		align-items: start;
		padding: 12px 40px 12px 12px;
	}
	.wiz--options .fmt__body .mock { grid-area: mock; width: 88px; aspect-ratio: 1 / 1; margin: 0; border-radius: 6px; }
	.wiz--options .mock--digital .mock__art { width: 58%; border-width: 3px; }
	.wiz--options .fmt__top  { grid-area: top; padding-right: 0; }
	.wiz--options .fmt__name { font-size: 1.02rem; }
	.wiz--options .fmt__price { margin-top: 2px; }
	.wiz--options .fmt__price strong { font-size: 1.22rem; }
	.wiz--options .fmt__tag  { grid-area: tag; margin-top: 2px; }
	.wiz--options .fmt__bonus { grid-area: bonus; display: none; margin-top: 0; }
	.wiz--options .fmt__perks { grid-area: perks; display: none; margin-top: 0; }
	.wiz--options .fmt input:checked + .fmt__body .fmt__bonus { display: flex; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(112,102,224,.18); }
	.wiz--options .fmt input:checked + .fmt__body .fmt__perks { display: block; margin-top: 6px; }
	.wiz--options .fmt__check { top: 12px; right: 12px; }
	.wiz--options .fmt__flag { left: 12px; }
	/* Spacing by margins, not grid gap, so the size panel can sit flush
	   under its card with no seam between the two. */
	.wiz--options .formats { gap: 0; margin-bottom: 16px; }
	.wiz--options .fmt { margin-bottom: 10px; }
	.wiz--options .fmt--joined { margin-bottom: 0; }
	.wiz--options .fmt--joined .fmt__body { padding-bottom: 8px; }
	.wiz--options .sub-steps {
		margin: 0 0 10px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		/* The chosen card's selection ring continues around the panel. */
		box-shadow: 0 0 0 3px rgba(112,102,224,.14);
		clip-path: inset(0 -4px -4px -4px);
		/* Positioned, so it paints over the card's ring rather than under it. */
		position: relative;
	}

	/* The way forward is always on screen. */
	.wiz--options [data-form="options"] > [data-submit] {
		position: sticky;
		bottom: 10px;
		z-index: 30;
		box-shadow: 0 6px 18px rgba(35,34,34,.16);
	}
}

/* Sizes on a phone: one line each, the full width — name and dimensions
   left, the price right. No lift on hover (it sticks under a thumb). */
@media (max-width: 759px) {
	.sizes { grid-template-columns: 1fr; gap: 7px; }
	.size__body {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 14px;
		text-align: left;
		height: auto;
	}
	.size__text { flex-direction: row; align-items: baseline; gap: 8px; margin-right: auto; }
	.size__name { font-size: .95rem; }
	.size__price { flex-direction: row; align-items: baseline; gap: 7px; margin-top: 0; }
	.size__price s { font-size: .78rem; }
	.size__price strong { font-size: 1rem; }
	.sub-steps { padding: 2px 12px 12px; }
}

/* ══ Digital tiers, the collection's extras, the downloads page ══ */

/* Tiers read as a list: name and what is in it on the left, price right.
   The same at every width — three boxes of 118px cannot hold a sentence. */
.sizes.sizes--tiers { grid-template-columns: 1fr; gap: 7px; }
.wiz--options .sizes.sizes--tiers { grid-template-columns: 1fr; width: 100%; }
.size--tier .size__body {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	text-align: left;
	height: auto;
}
.size--tier .size__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.size--tier .size__name { font-size: .95rem; }
.size__desc { font-family: var(--sans); font-size: .78rem; line-height: 1.35; color: var(--muted); }
.size--tier .size__price { flex-direction: column; align-items: flex-end; margin-top: 0; flex-shrink: 0; }
.wiz--options .size--tier .size__price { flex-direction: column; gap: 0; justify-content: flex-start; }
.size--tier .size__price strong { font-size: 1.02rem; }
.size--tier input:checked + .size__body .size__desc { color: var(--ink-soft); }

/* The collection's two portraits to order: four chips, two ticked. */
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.extra { position: relative; display: block; cursor: pointer; }
.extra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.extra__body {
	display: flex; flex-direction: column; gap: 2px; height: 100%;
	padding: 10px 12px;
	background: var(--paper);
	border: 1.5px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.extra input:checked + .extra__body { border-color: var(--violet); background: var(--violet-wash); box-shadow: 0 0 0 3px rgba(112,102,224,.13); }
.extra input:focus-visible + .extra__body { outline: 3px solid var(--violet); outline-offset: 2px; }
.extra__name { font-weight: 700; color: var(--ink); font-size: .9rem; }
.extra__desc { font-family: var(--sans); font-size: .76rem; line-height: 1.35; color: var(--muted); }
.extras__note { margin: 8px 0 0; font-family: var(--sans); font-size: .8rem; color: var(--muted); }
.wiz--options .sub-step[data-extras-block] { display: block; flex-basis: 100%; }
.wiz--options .sub-step[data-extras-block] .sub-step__title { margin-bottom: 8px; }
@media (max-width: 759px) {
	.extras { grid-template-columns: 1fr; }
}

/* The downloads page. */
.downloads .panel__head { margin-bottom: 26px; }
.dl {
	display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start;
	padding: 18px 0; border-top: 1px solid var(--hairline);
}
.dl--text { grid-template-columns: 1fr; }
.dl--all { grid-template-columns: 1fr; text-align: center; padding: 26px 0 8px; }
.dl__art img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 22px rgba(35,34,34,.12); }
.dl__brush {
	display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 6px;
	background: linear-gradient(110deg, #F4F1EC 30%, #EAE4DB 50%, #F4F1EC 70%);
	background-size: 200% 100%; animation: dl-brush 1.6s linear infinite;
}
@keyframes dl-brush { to { background-position: -200% 0; } }
.dl__title { font-size: 1.15rem; margin: 0 0 8px; }
.dl__note { margin: 0; font-family: var(--sans); font-size: .88rem; color: var(--muted); }
.dl__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dl__files li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dl__file { font-weight: 700; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.dl__file.btn { text-decoration: none; color: inherit; }
.dl__meta { font-family: var(--sans); font-size: .8rem; color: var(--muted); }
.dl--all .dl__files li { justify-content: center; flex-direction: column; align-items: center; }
.dl__credit { grid-template-columns: 1fr; }
@media (max-width: 759px) {
	.dl { grid-template-columns: 88px 1fr; gap: 14px; }
}

/* ══ The digital tiers, drawn: sheets fanned, a phone, a PDF tag, a card ══ */

.mock--set .mock__art, .mock--collection .mock__art {
	left: 50%; top: 48%; width: 48%;
	transform: translate(-50%, -50%) rotate(-3deg);
	z-index: 3;
}
.mock__sheet {
	position: absolute; left: 50%; top: 48%; width: 48%; aspect-ratio: 3 / 4;
	border: 5px solid #fff; border-radius: 3px; background: #fff;
	box-shadow: 0 10px 24px rgba(35,34,34,.14);
	overflow: hidden;
}
.mock__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mock__sheet--1 { transform: translate(-50%, -50%) rotate(8deg) translate(10%, -4%); z-index: 2; }
.mock__sheet--2 { transform: translate(-50%, -50%) rotate(-13deg) translate(-12%, 2%); z-index: 1; }
.mock__plus {
	position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 5;
	padding: .3em .7em; border-radius: 999px;
	background: var(--violet); color: #fff;
	font-family: var(--sans); font-size: .66rem; font-weight: 700; white-space: nowrap;
	box-shadow: 0 4px 10px rgba(112,102,224,.3);
}
/* On the small card the layers shrink with it; the label goes. */
.wiz--options .fmt .mock__plus { font-size: .5rem; padding: .2em .45em; }
@media (max-width: 759px) {
	.wiz--options .fmt .mock__plus { display: none; }
	.wiz--options .fmt .mock--set .mock__art, .wiz--options .fmt .mock--collection .mock__art { width: 56%; }
	.wiz--options .fmt .mock__sheet { width: 56%; border-width: 3px; }
}