/* Homepage ("Royal Original", brand book p17): hero + tilted template wall, "The assembly" scroll story,
   blue three-step band, Explore templates, pale collage panel, Why choose us, FAQ, final blue CTA.
   Mobile first. Only the new tokens from styles/tokens.css + base.css. Literal colors appear only inside the
   mini email of the scroll story (an email keeps its own colors). */

section { position: relative; }

/* =====================================================================
 * Hero: centered copy, then a tilted wall of 7 / 5 / 3 real template previews (book p10)
 * ================================================================== */
.hero { padding-top: var(--section-padding); overflow: clip; text-align: center; }
.hero__copy { display: grid; justify-items: center; padding-inline: var(--page-inline); }
.hero__title {
	margin-top: var(--space-4); max-width: var(--measure-hero);
	font-size: var(--font-size-display); font-weight: var(--font-weight-display);
	line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display);
}
.hero__lead { margin-top: var(--space-4); max-width: 60ch; font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); width: 100%; }
@media (max-width: 767px) { .hero__actions .btn { flex: 1 1 100%; } }

/* The wall: big cards in a row wider than the screen, overlapping a little, so the outer cards are cut by the
   screen edge and every card is cut at the bottom by the section edge.
   --tile-ratio = card height / width. It matches today's thumbnails (600 x 750), so no email is cut at the sides.
   When the thumbnails are taller (photo templates), raise it (for example 5 / 3) and the cards grow taller.
   Tilt from the inline --tilt (-10 -6 -3 0 3 6 10deg). The middle card sits on top. */
.hero .wall {
	--tile-ratio: 5 / 4;
	--tile-w: calc(100vw / 1.9);
	--tile-h: calc(var(--tile-w) * var(--tile-ratio));
	--overlap: calc(var(--tile-w) * -.06);
	display: flex; justify-content: center; align-items: flex-start;
	height: calc(var(--tile-h) * .92 + var(--space-6));
	margin-top: var(--space-6); padding-top: var(--space-6);
	overflow: clip;
}
.wall__item { position: relative; flex: 0 0 var(--tile-w); margin-inline: var(--overlap); }
/* --dN = distance from the middle card (homepage.php). The wall has 7, 5 or 3 cards (only real-photo templates are
   shown, so it shrinks while there are few). Phone: the middle 3; tablet: the middle 5; 1024px+: all. */
.wall__item--d0 { z-index: 4; }
.wall__item--d1 { z-index: 3; }
.wall__item--d2 { z-index: 2; }
.wall__item--d2, .wall__item--d3 { display: none; }
.wall__link {
	display: block; height: var(--tile-h); overflow: hidden;
	border: 1px solid var(--color-border); border-radius: var(--radius-card);
	background: var(--color-surface); box-shadow: var(--shadow-raised);
	transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 100%;
}
.wall__link img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (prefers-reduced-motion: no-preference) {
	.wall__link { transition: transform var(--motion-duration-base) var(--motion-ease); }
	@media (hover: hover) { .wall__link:hover { transform: translateY(-2px) rotate(var(--tilt, 0deg)); } }
}
@media (min-width: 768px) {
	.hero .wall { --tile-w: calc(100vw / 3.3); }
	.wall__item--d2 { display: block; }
}
@media (min-width: 1024px) {
	.hero .wall { --tile-w: min(340px, calc(100vw / 4.7)); }
	.wall__item--d3 { display: block; }
}

/* =====================================================================
 * The assembly (scroll story, book p11)
 * Default (no JS, reduced motion, or a window under 768 x 700): the finished email and the three captions.
 * .is-live (set by homepage.js): a 240svh section with a 100svh sticky stage; the scroll position picks the state
 * on the stage (data-state 0-3). Each change is a 400ms transform + opacity transition. The page is never moved.
 * ================================================================== */
.asm { background: var(--color-surface-tint); border-top: 1px solid var(--color-border); }
.asm__stage { display: grid; gap: var(--space-7); align-items: center; padding: var(--section-padding) var(--page-inline); }
.asm__side { display: grid; gap: var(--space-4); align-content: center; justify-items: start; }
.asm__title { max-width: var(--measure-heading); }
.asm__steps { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.asm__step {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
	padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface);
}
.asm__num {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--color-primary); color: var(--color-on-primary); font-size: 18px; font-weight: var(--font-weight-label); line-height: 1;
}
.asm__step h3 { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: var(--letter-spacing-h4); }
.asm__step p { margin-top: var(--space-1); color: var(--color-text-muted); max-width: 42ch; }
.asm__progress, .asm__skip { display: none; }
.asm__foot { display: contents; }

.asm__desk { position: relative; display: grid; place-items: center; isolation: isolate; }
.asm__tray, .env, .asm__done { display: none; }

/* The email being built: a sample email, so it keeps its own colors. */
.asm__email { position: relative; z-index: 2; width: min(420px, 100%); --mail-w: 100%; }
.mail {
	container-type: inline-size; width: var(--mail-w); overflow: hidden;
	color: #1F2A26; background: #FFFFFF;
	border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.mail__chrome {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1cqi 4cqi;
	padding: 3cqi 5cqi; border-bottom: 1px solid var(--color-border); background: var(--color-surface-tint);
	font-family: var(--font-body); font-size: 3.2cqi; color: var(--color-text-muted);
}
.mail__chrome b { margin-right: 1cqi; font-weight: 600; color: var(--color-text); }
.slot { --k: 1; position: relative; }
.slot::before {
	content: ''; position: absolute; inset: 1.2cqi 3cqi; opacity: 0;
	border: 1px dashed var(--color-control-border); border-radius: var(--radius-tooltip);
}
.blk { position: relative; background: #FFFFFF; transform-origin: 50% 50%; }
.blk::after {
	content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
	border-radius: var(--radius-tooltip); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-card);
}
.blk--logo { display: flex; align-items: center; justify-content: space-between; padding: 4cqi 6cqi 3cqi; }
.blk__logo { display: inline-flex; align-items: center; gap: 2cqi; font-size: 4.6cqi; font-weight: 600; letter-spacing: -.02em; }
.blk__logo i { width: 4.6cqi; height: 4.6cqi; border-radius: 50% 50% 50% 0; background: #2F6B57; transform: rotate(-45deg); }
.blk__view { font-size: 2.8cqi; color: #5E6B66; text-decoration: underline; }
.blk--hero { height: 44cqi; margin: 0 6cqi; overflow: hidden; border-radius: 3cqi; }
.blk__ph, .blk__art { position: absolute; inset: 0; }
.blk__ph { display: grid; place-items: center; background: #EEF2F7; font-size: 3.2cqi; color: #4B5768; opacity: 0; }
.blk__ph span { padding: 1cqi 2.4cqi; border: 1px dashed #64748B; border-radius: 1cqi; }
.blk__art { background: #F6DCA6; }
.blk__art .sun { position: absolute; left: 58%; top: 16%; width: 15cqi; height: 15cqi; border-radius: 50%; background: #E9743B; }
.blk__art .hill { position: absolute; border-radius: 50%; }
.blk__art .hill--1 { left: -20%; right: 30%; top: 56%; height: 90%; background: #3E8C78; }
.blk__art .hill--2 { left: 30%; right: -30%; top: 64%; height: 90%; background: #2F6B57; }
.blk--head { display: grid; padding: 5cqi 6cqi 2cqi; font-size: 7.2cqi; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: #142019; }
.blk__tok, .blk__fin { grid-area: 1 / 1; }
.blk__tok { opacity: 0; }
.blk__tok code { padding: 0 .2em; border-radius: 3px; font-size: .62em; font-weight: 400; letter-spacing: 0; color: #1D4ED8; background: #EFF6FF; }
.blk--text { padding: 1cqi 6cqi 3cqi; }
.blk--text p { font-size: 3.7cqi; line-height: 1.5; color: #3F4A46; }
.blk--btn { padding: 2cqi 6cqi 5cqi; }
.blk--btn span { display: inline-block; padding: 3cqi 6cqi; border-radius: 2cqi; background: #2F6B57; color: #FFFFFF; font-size: 3.6cqi; font-weight: 600; }
.blk--foot { display: flex; justify-content: space-between; gap: 3cqi; padding: 3.4cqi 6cqi; background: #F3F5F4; font-size: 2.8cqi; color: #5E6B66; }

/* Static: the three captions next to the email from 768px. */
@media (min-width: 768px) {
	.asm__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- live ---------- */
.asm.is-live { height: 240svh; }
.asm.is-live .asm__stage {
	position: sticky; top: 0; height: 100svh; overflow: clip;
	grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: var(--space-3);
	padding: calc(var(--header-height) + var(--space-4)) var(--page-inline) var(--space-4);
}
.admin-bar .asm.is-live .asm__stage { padding-top: calc(var(--header-height) + 32px + var(--space-4)); }
.asm.is-live .asm__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); width: 100%; }
.asm.is-live .asm__skip {
	display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); margin-right: calc(-1 * var(--space-3));
	border-radius: var(--radius-control); color: var(--color-link);
}
.asm__skip .icon { width: 20px; height: 20px; }
.asm.is-live .asm__side { gap: var(--space-2); align-content: start; }
.asm.is-live .asm__steps { margin-top: var(--space-1); }
.asm.is-live .asm__step {
	grid-area: 1 / 1; padding: var(--space-3) var(--space-4);
	opacity: 0; transform: translateY(8px);
	transition: opacity var(--motion-duration-story) var(--motion-ease), transform var(--motion-duration-story) var(--motion-ease);
}
.asm.is-live [data-step="1"] .asm__step[data-n="1"],
.asm.is-live [data-step="2"] .asm__step[data-n="2"],
.asm.is-live [data-step="3"] .asm__step[data-n="3"] { opacity: 1; transform: none; }
.asm.is-live .asm__progress { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 180px; color: var(--color-text-muted); }
.asm__track { position: relative; flex: 1; max-width: 220px; height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-border); }
.asm__bar {
	position: absolute; inset: 0; border-radius: inherit; background: var(--color-primary);
	transform-origin: left; transform: scaleX(.08); transition: transform var(--motion-duration-story) var(--motion-ease);
}
[data-state="1"] .asm__bar { transform: scaleX(.38); }
[data-state="2"] .asm__bar { transform: scaleX(.69); }
[data-state="3"] .asm__bar { transform: scaleX(1); }
.asm__count b { font-weight: 500; color: var(--color-text); }

.asm.is-live .asm__desk {
	container-type: size;
	/* The envelope with its flap open is 1.58 x its height: it must fit the desk with a margin. */
	/* States 2 and 3 use ONE envelope in ONE place. The group = open flap (.58 x envelope height) + envelope +
	   16px + the end text, centered in the desk. Short windows scale the envelope and the text down, never hide it.
	   (cqw / cqh resolve where the variables are used: inside the desk, which is the size container.) */
	--done-b: clamp(28px, 7.5cqh, var(--font-size-h1));
	--done-h: calc(var(--done-b) * 1.1 + 40px);
	--env-w: min(560px, 92cqw, (100cqh - var(--done-h) - 40px) / 1.58 / .6346);
	--env-h: calc(var(--env-w) * .6346);
	--env-top: calc(50% - (var(--env-h) * 1.58 + 16px + var(--done-h)) / 2 + var(--env-h) * .58);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
	min-height: 0; height: 100%;
}
.asm.is-live .asm__email { width: auto; --mail-w: clamp(150px, calc((100cqh - 210px) / 1.37), min(330px, 80cqw)); }

/* Blocks tray: the label sits on top of each cell, the part below it (homepage.js reads the label height). */
.asm.is-live .asm__tray {
	display: grid; gap: var(--space-2); z-index: 1; width: min(100%, 420px); padding: var(--space-3);
	border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface);
}
.asm__tray-head { display: flex; justify-content: space-between; padding: 0 2px; font-weight: 500; color: var(--color-text-muted); }
.asm__cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.asm__cell {
	position: relative; height: clamp(56px, 7.5svh, 76px);
	border: 1px dashed var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface-tint);
}
.asm__cell span { position: absolute; left: 8px; top: 4px; font-size: 14px; line-height: 1.3; color: var(--color-text-muted); white-space: nowrap; }

/* Short tablet windows: drop the eyebrow and step text so the email keeps its size. */
@media (max-width: 899px) and (max-height: 760px) {
	.asm.is-live .eyebrow, .asm.is-live .asm__step p { display: none; }
	.asm.is-live .asm__email { --mail-w: clamp(150px, calc((100cqh - 172px) / 1.37), min(330px, 80cqw)); }
}

/* Envelope parts: one box, stacked with z-index around the email, a little above the middle (room for the end text).
   A solid envelope with depth: white paper with a soft blue fall-off, royal-blue outline, a thin blue inner edge,
   the inside in a blue tint, a raised shadow. Royal-blue stamp and a blue postmark ring (book p11, R5 brief).
   Tint and shade colors are mixed from the tokens. */
.asm.is-live .env {
	display: block; position: absolute; z-index: 1;
	width: var(--env-w); aspect-ratio: 520 / 330;
	left: calc(50% - var(--env-w) / 2);
	top: var(--env-top);
	pointer-events: none;
	--env-ink: var(--color-primary);
	--env-in-top: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));
	--env-in-bottom: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
	--env-paper-low: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.env svg { width: 100%; height: 100%; overflow: visible; }
.asm.is-live .env--back { border-radius: 2.5%/4%; box-shadow: var(--shadow-raised); }
.env-in-a { stop-color: var(--env-in-top); }
.env-in-b { stop-color: var(--env-in-bottom); }
.env-paper-a { stop-color: var(--color-surface); }
.env-paper-b { stop-color: var(--env-paper-low); }
.env-in { fill: var(--env-in-top); }
.env-line { stroke: var(--env-ink); stroke-width: 2; stroke-linejoin: round; }
.env-edge { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linejoin: round; opacity: .55; }
.env-crease { fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-linejoin: round; opacity: .18; }
.env-label { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; fill: var(--color-text-muted); }
.env-name { font-family: var(--font-body); font-size: 22px; font-weight: 500; fill: var(--color-text); }
.env-addr { font-family: var(--font-body); font-size: 16px; fill: var(--color-text-muted); }
/* The pocket throws a soft shadow up onto the email inside it; the closed flap throws one onto the pocket. */
.env--pocket svg { filter: drop-shadow(0 -3px 6px rgba(9, 9, 20, .10)); }
.flap__out { filter: drop-shadow(0 4px 5px rgba(9, 9, 20, .12)); }
.asm.is-live .env--flap { z-index: 1; perspective: 2600px; }
.asm.is-live .env--pocket { z-index: 3; }
.asm.is-live .env--marks { z-index: 5; }
.flap { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(180deg); }
.flap svg { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap__in { transform: rotateX(180deg); }
/* Stamp: white perforated paper, royal-blue face with the logo mark. Postmark: blue rings + wavy lines over it. */
.env__stamp { position: absolute; left: 80.5%; top: 6%; width: 13.5%; transform-origin: 50% 50%; filter: drop-shadow(0 2px 3px rgba(9, 9, 20, .22)); }
.stamp-paper { fill: var(--color-surface); }
.stamp-bg { fill: var(--color-primary); }
.stamp-mark-a, .stamp-mark-b, .stamp-mark-c { fill: var(--color-on-primary); }
.stamp-mark-a { opacity: .7; }
.stamp-mark-b { opacity: .85; }
.stamp-text { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 1px; fill: var(--color-on-primary); }
.env__postmark { position: absolute; left: 50%; top: 1%; width: 44%; transform-origin: 26.9% 50%; }
.pm { fill: none; stroke: var(--color-primary); opacity: .82; }
.pm text { stroke: none; fill: var(--color-primary); font-family: var(--font-body); font-weight: 600; }
.pm__ring { font-size: 10.5px; letter-spacing: 1.6px; }
.pm__big { font-size: 15px; letter-spacing: 2px; }
.pm__small { font-size: 9px; letter-spacing: 1.5px; }

/* The sample email's photo (a real template's hero photo). */
.blk__art img { width: 100%; height: 100%; object-fit: cover; }

/* End text, under the closed envelope */
.asm.is-live .asm__done {
	display: grid; justify-items: center; gap: var(--space-2); position: absolute; z-index: 6; left: 0; right: 0;
	top: calc(var(--env-top) + var(--env-h) + 16px);
	text-align: center;
}
.asm__done b {
	font-size: var(--done-b, var(--font-size-h1)); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1);
	letter-spacing: var(--letter-spacing-h1); color: var(--color-text);
}
.asm__done > span { font-size: var(--font-size-lead); line-height: 1.5; color: var(--color-text-muted); }

/* ---------- the four states ----------
 * Base rules = state 0. Transitions and animations only run with .is-anim (not on load, resize or a jump from
 * outside the scene). Delays sit on the target state, so going back plays at once. data-prev (homepage.js) is the
 * state the scene came from, so 2 can tell "from 1" (email slides in) from "from 3" (flap opens again).
 */
.asm.is-live [data-blk] { transform: translate3d(var(--dx, 0), var(--dy, 0), 0) rotate(var(--rot, 0deg)) scale(var(--s, 1)); }
.asm.is-live .slot::before { opacity: 1; }
.asm.is-live .blk::after { opacity: 1; }
.asm.is-live [data-ph] { opacity: 1; }
.asm.is-live [data-art] { opacity: 0; transform: scale(1.08); }
.asm.is-live [data-tok] { opacity: 1; }
.asm.is-live [data-fin] { opacity: 0; }
.asm.is-live [data-env] { opacity: 0; transform: translate3d(0, 48px, 0); }
.asm.is-live [data-stamp] { opacity: 0; transform: translate3d(-30%, -60%, 0) rotate(-24deg) scale(1.9); }
.asm.is-live [data-postmark] { opacity: 0; transform: rotate(-16deg) scale(1.35); }
.asm.is-live [data-done] { opacity: 0; transform: translate3d(0, 8px, 0); }

.asm.is-anim [data-blk] { transition: transform var(--motion-duration-story) var(--motion-ease); }
.asm.is-anim .slot:nth-child(3) [data-blk] { transition-delay: .04s; }
.asm.is-anim .slot:nth-child(4) [data-blk] { transition-delay: .08s; }
.asm.is-anim .slot:nth-child(5) [data-blk] { transition-delay: .12s; }
.asm.is-anim .slot:nth-child(6) [data-blk] { transition-delay: .16s; }
.asm.is-anim .slot:nth-child(7) [data-blk] { transition-delay: .2s; }
.asm.is-anim .slot::before, .asm.is-anim .blk::after { transition: opacity var(--motion-duration-base) var(--motion-ease); }
.asm.is-anim [data-ph], .asm.is-anim [data-art], .asm.is-anim [data-tok], .asm.is-anim [data-fin] { transition: opacity var(--motion-duration-base) var(--motion-ease), transform var(--motion-duration-story) var(--motion-ease); }
.asm.is-anim [data-tray] { transition: opacity var(--motion-duration-story) var(--motion-ease), transform var(--motion-duration-story) var(--motion-ease); }
.asm.is-anim [data-email] { transition: transform var(--motion-duration-story) var(--motion-ease), opacity .2s var(--motion-ease); }
.asm.is-anim [data-env] { transition: opacity var(--motion-duration-story) var(--motion-ease), transform var(--motion-duration-story) var(--motion-ease); }
.asm.is-anim [data-stamp], .asm.is-anim [data-postmark] { transition: opacity .15s var(--motion-ease), transform var(--motion-duration-story) cubic-bezier(.34, 1.4, .64, 1); }
.asm.is-anim [data-done] { transition: opacity var(--motion-duration-story) var(--motion-ease), transform var(--motion-duration-story) var(--motion-ease); }

/* 1: assembled (the parts fly from the tray into their slots) */
.asm.is-live [data-state]:not([data-state="0"]) [data-blk] { transform: none; }
.asm.is-live [data-state="1"] [data-email] { transform: translate3d(var(--cx, 0), var(--cy, 0), 0); }
.asm.is-live [data-state]:not([data-state="0"]) .slot::before,
.asm.is-live [data-state]:not([data-state="0"]) .blk::after { opacity: 0; transition-delay: .35s; }
.asm.is-live [data-state]:not([data-state="0"]) [data-ph],
.asm.is-live [data-state]:not([data-state="0"]) [data-tok] { opacity: 0; transition-delay: .4s; }
.asm.is-live [data-state]:not([data-state="0"]) [data-art],
.asm.is-live [data-state]:not([data-state="0"]) [data-fin] { opacity: 1; transform: none; transition-delay: .4s; }
.asm.is-live [data-state]:not([data-state="0"]) [data-tray] { opacity: 0; transform: translate3d(0, -24px, 0); transition-delay: .1s; }

/* 2: into the envelope. From 1 the open envelope rises in, the email lifts above it and slides down into it. */
.asm.is-live [data-state="2"] [data-env], .asm.is-live [data-state="3"] [data-env] { opacity: 1; transform: none; }
.asm.is-live [data-state="2"] [data-email], .asm.is-live [data-state="3"] [data-email] { transform: translate3d(var(--ex, 0), var(--ey, 0), 0) scale(var(--es, 1)); }
/* The lift runs on the inner .mail, so the outer box keeps plain transitions (no animation to hand over at 3). */
.asm.is-anim [data-state="2"][data-prev="1"] .mail { animation: asm-slide-in .8s var(--motion-ease) both; }
@keyframes asm-slide-in {
	0% { transform: none; }
	45% { transform: translate3d(0, -28%, 0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
	100% { transform: none; }
}

/* 3: the email sinks fully into the pocket, the flap closes in front, the stamp lands, the postmark hits it, then
   "Ready to send." appears under the envelope. The envelope does not move between 2 and 3.
   Timeline (all in by about .8s, so a quick reader sees it): email down 0-.2s, flap .12-.52s (the 90deg swap at
   .32s, after the email is in), text .3-.7s, stamp .5s, postmark .62s.
   The flap swaps layers exactly when it stands upright (90deg), like the auth envelope (auth.css sc-flap): behind
   the email while it is open, in front of it (and of the pocket) once it folds down. The 50% keyframe pins that
   moment, so easing can never let it fold down while still behind the letter. */
.asm.is-live [data-state="3"] .env--flap { z-index: 4; }
.asm.is-live [data-state="3"] .flap { transform: rotateX(0deg); }
.asm.is-anim [data-state="3"] .flap { animation: asm-flap-close var(--motion-duration-story) linear .12s both; }
.asm.is-anim [data-state="3"] .env--flap { animation: asm-flapz-close var(--motion-duration-story) linear .12s both; }
.asm.is-live [data-state="3"] [data-email] { transform: translate3d(var(--ex, 0), calc(var(--ey, 0px) + var(--env-h) * .2), 0) scale(var(--es, 1)); opacity: 0; transition-delay: 0s, .55s; }
.asm.is-anim [data-state="3"] [data-email] { transition-duration: .2s, .01s; }
.asm.is-live [data-state="3"] [data-stamp] { opacity: 1; transform: rotate(6deg); transition-delay: .5s; }
.asm.is-live [data-state="3"] [data-postmark] { opacity: 1; transform: rotate(-8deg); transition-delay: .62s; }
.asm.is-live [data-state="3"] [data-done] { opacity: 1; transform: none; transition-delay: .3s; }
@keyframes asm-flap-close {
	0% { transform: rotateX(180deg); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
	50% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(0, 0, .5, 1); }
	100% { transform: rotateX(0deg); }
}
@keyframes asm-flapz-close { 0%, 50% { z-index: 1; } 50.01%, 100% { z-index: 4; } }
/* Back from 3 to 2: the stamp, postmark and text leave first, the flap opens (same 90deg swap, the other way),
   then the email rises back to its place in the open envelope. */
.asm.is-anim [data-state="2"][data-prev="3"] [data-email] { transition-delay: .5s, 0s; }
.asm.is-anim [data-state="2"][data-prev="3"] .flap { animation: asm-flap-open var(--motion-duration-story) linear .1s both; }
.asm.is-anim [data-state="2"][data-prev="3"] .env--flap { animation: asm-flapz-open var(--motion-duration-story) linear .1s both; }
@keyframes asm-flap-open {
	0% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
	50% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(0, 0, .5, 1); }
	100% { transform: rotateX(180deg); }
}
@keyframes asm-flapz-open { 0%, 50% { z-index: 4; } 50.01%, 100% { z-index: 1; } }

/* Measuring pass: read the real layout boxes with every animated transform removed */
.asm.is-measuring [data-blk], .asm.is-measuring [data-email], .asm.is-measuring [data-env], .asm.is-measuring [data-tray] { transform: none !important; transition: none !important; animation: none !important; }

.asm.is-live .mail { overflow: visible; }
.asm.is-live .mail__chrome { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.asm.is-live .blk--foot { border-radius: 0 0 var(--radius-card) var(--radius-card); }

@media (min-width: 900px) {
	.asm.is-live .asm__stage {
		grid-template-columns: minmax(280px, .75fr) minmax(0, 1.5fr); grid-template-rows: minmax(0, 1fr);
		padding: calc(var(--header-height) + var(--space-5)) var(--page-inline) var(--space-5);
	}
	.asm.is-live .asm__side { align-content: center; gap: var(--space-4); }
	.asm.is-live .asm__steps { gap: var(--space-2); margin-top: var(--space-2); }
	/* Inactive steps: muted text (no opacity on text). Active: a white card with a blue number. */
	.asm.is-live .asm__step {
		grid-area: auto; padding: var(--space-4); border-color: transparent; background: transparent;
		opacity: 1; transform: none;
		transition: transform var(--motion-duration-story) var(--motion-ease);
	}
	.asm.is-live .asm__step h3 { color: var(--color-text-muted); }
	.asm.is-live .asm__step .asm__num { background: var(--color-surface); color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-border); }
	.asm.is-live [data-step="1"] .asm__step[data-n="1"],
	.asm.is-live [data-step="2"] .asm__step[data-n="2"],
	.asm.is-live [data-step="3"] .asm__step[data-n="3"] { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-card); transform: translateX(4px); }
	.asm.is-live [data-step="1"] [data-n="1"] h3, .asm.is-live [data-step="2"] [data-n="2"] h3, .asm.is-live [data-step="3"] [data-n="3"] h3 { color: var(--color-text); }
	.asm.is-live [data-step="1"] [data-n="1"] .asm__num, .asm.is-live [data-step="2"] [data-n="2"] .asm__num, .asm.is-live [data-step="3"] [data-n="3"] .asm__num { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
	.asm.is-live .asm__foot { margin-top: var(--space-2); padding-left: var(--space-4); }
	.asm.is-live .asm__desk { --env-w: min(600px, 80cqw, (100cqh - var(--done-h) - 40px) / 1.58 / .6346); flex-direction: row; gap: clamp(28px, 4vw, 72px); }
	.asm.is-live .asm__tray { width: clamp(220px, 20vw, 300px); }
	.asm.is-live [data-state]:not([data-state="0"]) [data-tray] { transform: translate3d(-40px, 0, 0); }
	.asm.is-live .asm__cells {
		grid-template-columns: 1fr; grid-template-rows: .8fr 2fr 1.05fr 1.15fr .9fr .8fr;
		height: min(calc(100svh - var(--header-height) - 200px), 520px);
	}
	.asm.is-live .asm__cell { height: auto; }
	.asm.is-live .asm__email { --mail-w: min(27vw, clamp(220px, calc((100svh - var(--header-height) - 90px) / 1.36), 380px)); }
}

/* Short laptop windows (768-820px tall): the captions keep their titles only, so the side column fits. */
@media (min-width: 900px) and (max-height: 820px) {
	.asm.is-live .asm__side .eyebrow, .asm.is-live .asm__step p { display: none; }
	.asm.is-live .asm__step { padding-block: var(--space-3); }
}

/* =====================================================================
 * Three steps: full-width royal blue band
 * ================================================================== */
.steps { display: grid; justify-items: center; gap: var(--space-6); padding: var(--section-padding) var(--page-inline); text-align: center; }
.steps__title { max-width: var(--measure-heading); }
.steps__list { display: grid; gap: var(--space-5); width: 100%; text-align: left; }
.steps__item { display: flex; align-items: flex-start; gap: var(--space-4); }
.steps__num {
	display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
	background: var(--on-band-blue); color: var(--band-blue); font-size: 18px; font-weight: var(--font-weight-label); line-height: 1;
}
.steps__item h3 { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.steps__item p { margin-top: var(--space-2); max-width: 36ch; }
.steps__arrow { display: none; }
@media (min-width: 768px) {
	.steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.steps__list { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--space-6); }
	.steps__arrow { display: block; margin-top: 4px; }
	.steps__arrow .icon { width: 32px; height: 32px; }
}

/* =====================================================================
 * Explore email templates: chips, 4 / 3 / 2 / 2 cards, "See all"
 * ================================================================== */
.explore { display: grid; gap: var(--space-6); padding: var(--section-padding) var(--page-inline); }
.explore__head { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.explore__head p { font-size: var(--font-size-lead); color: var(--color-text-muted); }
/* Phone: one scrolling row (inside its own box, the page never scrolls sideways). From 768px: centered, wrapping. */
.explore__chips { margin-inline: calc(-1 * var(--page-gutter)); overflow-x: auto; scrollbar-width: none; }
.explore__chips::-webkit-scrollbar { display: none; }
.explore__chips ul { list-style: none; display: flex; gap: var(--space-2); width: max-content; padding: 4px var(--page-gutter) 8px; }
.explore__chips .chip { white-space: nowrap; }
.explore__chips .chip .icon { width: 20px; height: 20px; }
@media (min-width: 768px) {
	.explore__chips { margin-inline: 0; overflow: visible; }
	.explore__chips ul { flex-wrap: wrap; justify-content: center; width: auto; padding: 0; }
}
.explore__grid { display: grid; grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr)); gap: var(--grid-gap); }
/* Never a half-empty row: 2 cards on phones, 3 at 1024-1439px, 4 on wide screens. */
@media (max-width: 767px) { .explore .explore__grid > :nth-child(n+3) { display: none; } }
@media (min-width: 1024px) and (max-width: 1439px) { .explore .explore__grid > :nth-child(n+4) { display: none; } }
.explore__more { display: flex; justify-content: center; }
@media (max-width: 767px) { .explore__more .btn { width: 100%; } }

/* =====================================================================
 * "New era of email marketing is here": pale rounded panel with a row of real previews (docs/brand/homepage-concept.png).
 * Hand-picked photo templates, 200-240px wide, a little overlapped and tilted, cut by the panel's bottom and right edge.
 * ================================================================== */
.era { padding: 0 var(--page-inline) var(--section-padding); }
.era__panel {
	--era-card: clamp(150px, 42vw, 200px);
	display: grid; gap: var(--space-6); align-items: end; overflow: hidden;
	padding: var(--panel-padding) 0 0 var(--panel-padding); border-radius: var(--radius-panel); background: var(--color-surface-tint);
}
.era__copy { display: grid; gap: var(--space-4); justify-items: start; align-self: center; padding-right: var(--panel-padding); }
.era__copy h2 { max-width: var(--measure-heading); }
.era__copy p:not(.eyebrow) { max-width: 52ch; font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); }
.era__copy .btn { margin-top: var(--space-2); }
@media (max-width: 767px) { .era__copy .btn { width: 100%; } }
.era .collage { display: flex; align-items: flex-end; min-width: 0; margin-bottom: -1px; padding-top: var(--space-5); }
.collage__item { flex: none; width: var(--era-card); margin-right: calc(var(--era-card) * -.07); }
.collage__item:nth-child(n+4) { display: none; }
.collage__link {
	display: block; overflow: hidden; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0;
	background: var(--color-surface); box-shadow: var(--shadow-card); transform-origin: 50% 100%;
}
.collage__link img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.collage__item:nth-child(1) .collage__link { aspect-ratio: 4 / 4.4; transform: rotate(-4deg); }
.collage__item:nth-child(2) .collage__link { aspect-ratio: 4 / 5; transform: rotate(-2deg); }
.collage__item:nth-child(3) .collage__link { aspect-ratio: 4 / 4.7; transform: rotate(1deg); }
.collage__item:nth-child(4) .collage__link { aspect-ratio: 4 / 5; transform: rotate(3deg); }
.collage__item:nth-child(5) .collage__link { aspect-ratio: 4 / 4.5; transform: rotate(5deg); }
@media (min-width: 768px) {
	.era__panel { --era-card: 200px; }
	.collage__item:nth-child(n+4) { display: block; }
}
@media (min-width: 1024px) {
	.era__panel { grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr); }
	.era__copy { padding: 0 0 var(--panel-padding); }
}
@media (min-width: 1280px) { .era__panel { --era-card: clamp(200px, 16.5vw, 240px); } }

/* =====================================================================
 * Why you should choose us?: editor picture + 3 points with icons
 * ================================================================== */
.why { display: grid; gap: var(--space-7); align-items: center; padding: var(--section-padding) var(--page-inline); }
.why__copy { display: grid; gap: var(--space-4); justify-items: start; }
.why__copy h2 { max-width: var(--measure-heading); }
.why__lead { max-width: 55ch; font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); }
.why__list { display: grid; gap: var(--space-5); margin-top: var(--space-4); }
.why__list li { display: flex; align-items: flex-start; gap: var(--space-4); }
.why__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-control); color: var(--color-primary); background: var(--color-info-bg); }
.why__list h3 { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: var(--letter-spacing-h4); }
.why__list p { margin-top: var(--space-1); max-width: 48ch; color: var(--color-text-muted); }
/* "Create your own template": the blank editor (guests: sign up first). */
.why__create { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.why__create p { color: var(--color-text-muted); }
@media (max-width: 767px) { .why__create .btn { width: 100%; } }
@media (min-width: 1024px) { .why { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); } }

/* A static picture of the real editor layout (book p19: top bar, blocks panel, neutral canvas stage, settings). */
.why__shot { margin: 0; min-width: 0; }
.ed {
	overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card);
	background: var(--color-surface); box-shadow: var(--shadow-raised);
	font-size: 13px; line-height: 1.3; color: var(--color-text);
}
.ed .icon { width: 16px; height: 16px; }
.ed__bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--color-border); }
.ed__back, .ed__saved, .ed__tools { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); white-space: nowrap; }
.ed__tools { gap: 8px; }
.ed__saved { color: var(--color-success); }
.ed__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; text-align: center; }
.ed__btn { padding: 6px 10px; border: 1px solid var(--color-primary); border-radius: 6px; color: var(--color-primary); font-weight: 500; }
.ed__btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.ed__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.ed__blocks, .ed__panel { display: none; }
.ed__stage { display: grid; place-items: start center; padding: 20px 20px 0; height: clamp(260px, 34vw, 440px); overflow: hidden; background: var(--color-surface-tint); }
.ed__canvas { position: relative; width: min(100%, 300px); border: 1px solid var(--color-border); border-radius: var(--radius-canvas) var(--radius-canvas) 0 0; background: var(--color-surface); }
.ed__canvas img { width: 100%; height: auto; }
/* The selection box sits exactly around the sample button: 218,356 170x50 inside the 600 x 750 thumbnail, plus 3px. */
.ed__sel { position: absolute; left: calc(36.33% - 3px); top: calc(47.47% - 3px); width: calc(27.17% + 6px); height: calc(6.67% + 6px); border: 2px solid var(--color-primary); border-radius: 15px; }
.ed__cut { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 768px) {
	.ed__body { grid-template-columns: 120px minmax(0, 1fr) 150px; }
	.ed__blocks, .ed__panel { display: grid; align-content: start; gap: 6px; padding: 12px 10px; }
	.ed__blocks { border-right: 1px solid var(--color-border); }
	.ed__panel { border-left: 1px solid var(--color-border); gap: 10px; }
	.ed__blocks span { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text-muted); }
	.ed__field { display: grid; gap: 4px; }
	.ed__field small { font-size: 12px; color: var(--color-text-muted); }
	.ed__field i { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border: 1px solid var(--color-control-border); border-radius: 6px; font-style: normal; }
	.ed__sw { width: 12px; height: 12px; flex: none; border-radius: 2px; background: #F5A425; }
	.ed__range { position: relative; border: 0 !important; padding: 0 !important; }
	.ed__range::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--color-border); }
	.ed__range em { position: absolute; left: 30%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--color-primary); }
}
@media (max-width: 767px) { .ed__back, .ed__tools, .ed__btn:not(.ed__btn--primary) { display: none; } }

/* =====================================================================
 * FAQ: tinted panel, heading left, accordion (base.css) right
 * ================================================================== */
.faq { padding: 0 var(--page-inline) var(--section-padding); }
.faq__panel { display: grid; gap: var(--space-6); padding: var(--panel-padding); border-radius: var(--radius-panel); background: var(--color-surface-tint); }
.faq__head { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.faq__head p { color: var(--color-text-muted); }
.faq__head .btn { margin-top: var(--space-2); }
.faq__list .accordion__item, .faq__list { border-color: var(--color-border); }
.faq__list .accordion__body p { max-width: 70ch; }
@media (min-width: 1024px) { .faq__panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: var(--space-8); } }

/* =====================================================================
 * Final CTA: full-width royal blue band, white primary + white outline button
 * ================================================================== */
.cta { display: grid; gap: var(--space-5); align-items: center; padding: var(--section-padding) var(--page-inline); }
.cta__copy { display: grid; gap: var(--space-4); }
.cta__copy h2 { max-width: var(--measure-heading); }
.cta__copy p { font-size: var(--font-size-lead); line-height: var(--line-height-lead); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 767px) { .cta__actions .btn { flex: 1 1 100%; } }
@media (min-width: 1024px) { .cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); } }