/*
 * The organiser look (24-14): the start flow and the organiser's squad page. Loaded after squads.css, on those pages only.
 *
 * Budget: squads.css + this file together are gated at 10,240 B gz (tools/check-budgets.sh, "organiser pages").
 * This is a deliberate, owner-approved exception to the store's "pure Flatsome" rule (UI-SPEC "Two systems, one rule"):
 * ivory, a system serif for headings (no webfont), no CSS images (inline SVG <symbol>s only), no inline styles.
 * Everything is scoped under .exsq-org, and the palette lives once in the --exo-* tokens below.
 * 261108-vfr: the buttons, progress and dots fill with the call-to-action pair --exsq-cta / --exsq-on-cta (the store secondary or the
 * brand orange, with computed dark ink; both are printed by PHP, so no brand hex lives here), accent text and small highlights follow
 * --exsq-accent, soft tints --exsq-accent-soft. Maroon only remains as the fallback of a page cached before those tokens existed,
 * and in the dashboard hero (plan 03). The wide desktop layout is in squads-org-v2.css under its own gate.
 * 4 sizes (28 / 20 / 16 / 13) and 2 weights (400 / 600). Targets are 44px or more (48 for rows, 56 for the CTA).
 */
.exsq-wrap.exsq-org {
	--exo-bg: #fbf7f2;
	--exo-card: #fff;
	--exo-ink: #221a1c;
	--exo-muted: #5f5254;
	--exo-cta: var(--exsq-cta, #7a1f2b);
	--exo-on-cta: var(--exsq-on-cta, #fff);
	--exo-accent: var(--exsq-accent, #7a1f2b);
	--exo-accent-hover: var(--exo-accent);
	--exo-blush: var(--exsq-accent-soft, #f6ebe3);
	--exo-seg: #ecdfd6;
	--exo-line: #e3d5cb;
	--exo-sep: #f3ebe5;
	--exo-gold: var(--exsq-accent, #b8862f);
	--exo-edge: #8f7a70;
	--exo-ctl: #7a6a66;
	--exo-err: #8a2424;
	--exo-ok: #1d5c2e;
	--exo-warn: #7a5410;
	--exo-warn-bg: #fbf3e3;
	--exo-wa: #0f7a43;
	--exo-wa-bg: #e7f6dd;
	--exo-wa-ink: #0b6b3a;
	--exo-wa-line: #bfe3ad;
	--exo-serif: Georgia, "Times New Roman", serif;
	--exo-shadow: 0 4px 16px rgba(34, 26, 28, .08);
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 30rem;
	padding: 0 20px;
	background: var(--exo-bg);
	box-shadow: 0 0 0 100vmax var(--exo-bg);
	clip-path: inset(0 -100vmax);
	color: var(--exo-ink);
	font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.exsq-org :is(h1, h2, h3, p, ul, ol, li, fieldset, figure) {
	margin: 0;
	padding: 0;
}

.exsq-org :is(ul, ol) {
	list-style: none;
}

.exsq-org :is(h1, h2, h3, legend) {
	color: var(--exo-ink);
	font-family: var(--exo-serif);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.exo-h1 {
	font-size: 28px;
	line-height: 1.15;
}

.exo-h2 {
	font-size: 20px;
	line-height: 1.2;
}

.exsq-org strong {
	font-weight: 600;
}

.exsq-org a {
	color: var(--exo-accent);
}

.exsq-org a:hover {
	color: var(--exo-accent-hover);
}

.exsq-org :focus-visible {
	outline: 2px solid var(--exo-accent);
	outline-offset: 2px;
}

.exo-ico {
	flex: none;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.exo-sprite {
	position: absolute;
}

.exo-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.exo-help,
.exo-err,
.exo-cap,
.exo-step,
.exo-chip {
	font-size: 13px;
	line-height: 1.4;
}

.exo-help,
.exo-cap {
	color: var(--exo-muted);
}

.exo-err {
	color: var(--exo-err);
}

/* Top bar: back link, step label and the segmented progress (the first segment is partly filled on purpose). */
.exo-top {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
}

.exo-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.exo-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	text-decoration: none;
}

.exo-step {
	color: var(--exo-accent);
	font-weight: 600;
}

.exo-progress {
	display: grid;
	grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
	gap: 4px;
}

.exo-progress span {
	height: 5px;
	border-radius: 3px;
	background: var(--exo-seg);
}

.exo-progress .on {
	background: var(--exo-cta);
}

.exo-progress [style] {
	background: linear-gradient(90deg, var(--exo-cta) var(--p), var(--exo-seg) var(--p));
}

.exo-skipped {
	margin: 6px 0 0;
}

/* Hero: three matching tees with the couple's names (art, aria-hidden). */
.exo-hero {
	--tee: #7a1f2b;
	--ink: #fdf3e7;
	position: relative;
	padding: 24px 16px;
	border-radius: 24px;
	background: radial-gradient(circle at 20% 15%, #fff4e6 0, #f3e3d3 45%, #ead2c0 100%);
	box-shadow: 0 10px 30px rgba(34, 26, 28, .12);
	overflow: hidden;
}

.exo-hero > i {
	position: absolute;
	border-radius: 50%;
	background: var(--exo-gold);
}

.exo-hero > i:nth-child(1) {
	top: 14px;
	left: 22px;
	width: 8px;
	height: 8px;
	opacity: .7;
}

.exo-hero > i:nth-child(2) {
	top: 34px;
	right: 30px;
	width: 6px;
	height: 6px;
	background: var(--exo-accent);
	opacity: .5;
}

.exo-hero > i:nth-child(3) {
	bottom: 70px;
	left: 16px;
	width: 5px;
	height: 5px;
	opacity: .6;
}

.exo-hero > i:nth-child(4) {
	top: 60px;
	left: 52%;
	width: 4px;
	height: 4px;
}

.exo-tees {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.exo-tee {
	position: relative;
	flex: 0 1 96px;
	min-width: 0;
	opacity: .92;
}

.exo-tee-m {
	z-index: 2;
	flex-basis: 136px;
	margin: 0 -14px;
	opacity: 1;
	filter: drop-shadow(0 8px 12px rgba(34, 26, 28, .18));
}

.exo-tee svg {
	display: block;
	width: 100%;
	aspect-ratio: 120 / 116;
	fill: var(--tee);
	stroke: rgba(0, 0, 0, .08);
}

.exo-tee-art {
	position: absolute;
	inset: 36% 26% 14%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	overflow: hidden;
	color: var(--ink);
	text-align: center;
}

.exo-tee-art i {
	font: italic 400 9px/1.1 var(--exo-serif);
	overflow-wrap: anywhere;
}

.exo-tee-art b {
	font-size: 6px;
	font-weight: 400;
	letter-spacing: 2px;
}

.exo-tee-m .exo-tee-art i {
	font-size: 13px;
}

.exo-tee-m .exo-tee-art b {
	font-size: 8px;
}

.exo-c-ivory {
	background: #fffaf2;
}

.exo-cap {
	margin-top: 2px;
	text-align: center;
}

.exo-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.exo-sub {
	color: var(--exo-muted);
}

.exo-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.exo-steps li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.exo-steps strong {
	display: block;
}

.exo-disc {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--exo-card);
	box-shadow: 0 2px 8px rgba(34, 26, 28, .12);
	color: var(--exo-accent);
	font: 600 20px/1 var(--exo-serif);
}

.exo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--exo-card);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.exo-chip .exo-ico {
	stroke: var(--exo-accent);
}

/* The one card base, and the form inside it. */
.exo-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border-radius: 20px;
	background: var(--exo-card);
	box-shadow: var(--exo-shadow);
}

.exo-form,
.exo-group {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.exo-group {
	min-width: 0;
	border: 0;
}

.exo-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.exo-field label {
	margin: 0;
	font: 600 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-transform: none;
}

.exsq-org .exo-field :is(input, select, textarea) {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--exo-edge);
	border-radius: 12px;
	background: #fffdfb;
	box-shadow: none;
	color: var(--exo-ink);
	font: 400 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.exsq-org .exo-field :is(input, select, textarea)[aria-invalid="true"] {
	border: 2px solid var(--exo-err);
}

.exo-sum {
	color: var(--exo-muted);
	overflow-wrap: anywhere;
}

.exo-edit summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--exo-accent);
	font-weight: 600;
	cursor: pointer;
}

.exo-edit[open] summary {
	margin-bottom: 8px;
}

/* The single primary action, pinned to the thumb zone. While a field has focus it stops being fixed so the on-screen
 * keyboard can never cover it. */
.exo-cta {
	position: sticky;
	bottom: 0;
	z-index: 1100;
	margin: 0 -20px;
	padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
	background: var(--exo-bg);
	box-shadow: 0 -6px 18px rgba(34, 26, 28, .06);
}

.exsq-org:has(.exo-form :is(input, select, textarea):focus) .exo-cta {
	position: static;
}

.exsq-org .exo-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 16px;
	background: var(--exo-cta);
	box-shadow: 0 6px 16px rgba(34, 26, 28, .2);
	color: var(--exo-on-cta);
	font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.exsq-org .exo-btn:hover {
	background: var(--exo-cta);
	color: var(--exo-on-cta);
	opacity: .92;
}

.exsq-org .exo-btn:is(:disabled, [aria-disabled="true"]) {
	background: var(--exo-line);
	box-shadow: none;
	color: var(--exo-muted);
	cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
	.exo-btn {
		transition: background-color .15s, box-shadow .15s, border-color .15s;
	}
}

/* ---- Shared by the remaining screens (O-3 to O-6): one option-card base, pills, wells, forms, lists, timeline. ---- */

/* Option card: a real radio inside a label. The input is invisible but fills the card, so the whole card is the hit area. */
.exo-opt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 8px;
	border: 2px solid transparent;
	border-radius: 20px;
	background: var(--exo-card);
	box-shadow: 0 2px 10px rgba(34, 26, 28, .06);
	cursor: pointer;
}

.exo-opt > input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.exo-opt:has(input:checked) {
	border-color: var(--exo-accent);
	box-shadow: 0 8px 20px rgba(34, 26, 28, .18);
}

.exo-opt:has(input:focus-visible) {
	outline: 2px solid var(--exo-accent);
	outline-offset: 2px;
}

.exo-row {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 12px;
}

/* Check badge (design cards) and radio dot (names and own-art cards): shown by the checked state, never by colour alone. */
.exo-chk,
.exo-rd {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--exo-on-cta);
}

.exo-chk {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 26px;
	height: 26px;
	background: var(--exo-cta);
	visibility: hidden;
}

.exo-opt:has(input:checked) .exo-chk {
	visibility: visible;
}

.exo-rd {
	width: 24px;
	height: 24px;
	border: 2px solid var(--exo-ctl);
}

.exo-rd .exo-ico {
	visibility: hidden;
}

.exo-opt:has(input:checked) .exo-rd {
	border-color: var(--exo-cta);
	background: var(--exo-cta);
}

.exo-opt:has(input:checked) .exo-rd .exo-ico {
	visibility: visible;
}

.exo-grow {
	flex: 1;
	min-width: 0;
}

.exo-badge,
.exo-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.exo-badge {
	background: var(--exo-blush);
	color: var(--exo-accent);
}

.exo-opt:has(input:checked) .exo-badge {
	background: var(--exo-cta);
	color: var(--exo-on-cta);
}

.exo-pill {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	background: var(--exo-card);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	color: var(--exo-accent);
}

.exo-well {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--exo-blush);
	color: var(--exo-accent);
}

.exo-well.big {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

/* Design step: function filter chips and the two-column grid. */
.exo-filters {
	display: flex;
	gap: 8px;
	margin: 0 -20px;
	padding: 0 20px 4px;
	overflow-x: auto;
}

.exo-fchip {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--exo-line);
	border-radius: 999px;
	background: var(--exo-card);
	white-space: nowrap;
	cursor: pointer;
}

.exo-fchip input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.exsq-org a.exo-fchip {
	color: var(--exo-ink);
	text-decoration: none;
}

.exo-fchip:has(input:checked),
.exsq-org a.exo-fchip[aria-checked="true"] {
	border-color: var(--exo-ink);
	background: var(--exo-ink);
	color: #fff;
	font-weight: 600;
}

.exo-fchip:has(input:focus-visible),
.exo-fchip:focus-visible {
	outline: 2px solid var(--exo-accent);
	outline-offset: 2px;
}

.exo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.exo-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 168px;
	border-radius: 16px;
	background: var(--st, var(--exo-blush));
}

.exo-stage .exo-tee {
	flex-basis: 128px;
	margin: 0;
	opacity: 1;
}

.exo-dname,
.exo-hint {
	padding: 0 4px;
}

.exo-dname {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.exo-hint {
	display: -webkit-box;
	overflow: hidden;
	color: var(--exo-muted);
	font-size: 13px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.exo-empty {
	color: var(--exo-muted);
	text-align: center;
}

/* A template's own preview with the couple's names laid over the zone the template labels for them (aria-hidden text). */
.exo-pv {
	position: relative;
	width: 128px;
	height: 124px;
}

.exo-pv img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.exo-zone {
	position: absolute;
	top: var(--zt);
	left: var(--zl);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--zw);
	height: var(--zh);
	overflow: hidden;
	background: rgba(255, 255, 255, .88);
	color: var(--exo-ink);
	font-family: var(--exo-serif);
	text-align: center;
}

.exo-zone i {
	font-style: italic;
	white-space: nowrap;
}

.exo-zone[data-wrap] i {
	white-space: normal;
	overflow-wrap: anywhere;
}

.exsq-org [hidden] {
	display: none !important;
}

/* Tabs: a two-segment control with real tab semantics. */
.exo-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 4px;
	border-radius: 16px;
	background: #f0e4da;
}

.exsq-org .exo-tab {
	min-height: 44px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--exo-muted);
	font: 400 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-transform: none;
	cursor: pointer;
}

.exsq-org .exo-tab[aria-selected="true"] {
	background: var(--exo-card);
	box-shadow: 0 1px 4px rgba(34, 26, 28, .12);
	color: var(--exo-ink);
	font-weight: 600;
}

/* Upload zone (one label around a real file input), its progress bar and the done card with the quality chip. */
.exo-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 220px;
	margin: 0;
	padding: 20px;
	border: 2px dashed #c9a99a;
	border-radius: 20px;
	background: var(--exo-card);
	text-align: center;
	cursor: pointer;
}

.exo-drop input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.exo-drop:has(input:focus-visible) {
	outline: 2px solid var(--exo-accent);
	outline-offset: 2px;
}

.exo-bar {
	width: 100%;
	height: 5px;
	border-radius: 3px;
	background: var(--exo-seg);
}

.exo-bar span {
	display: block;
	width: var(--p, 0);
	height: 100%;
	border-radius: 3px;
	background: var(--exo-cta);
}

.exo-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px 16px 16px;
	border-radius: 20px;
	background: radial-gradient(circle at 20% 15%, #fff4e6 0, #f3e3d3 45%, #ead2c0 100%);
	text-align: center;
}

/* A tee holding the organiser's own artwork (the done card and the studio return). */
.exo-big {
	flex: none;
	width: 190px;
	opacity: 1;
	filter: drop-shadow(0 8px 14px rgba(34, 26, 28, .18));
}

.exo-big .exo-tee-art {
	inset: 30% 24% 12%;
}

.exo-tee-art img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.exo-q {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--exo-card);
	color: var(--exo-ok);
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

.exo-q.warn {
	background: var(--exo-warn-bg);
	color: var(--exo-warn);
}

.exsq-org .exo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--exo-accent);
	font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

.exo-tiles {
	display: flex;
	gap: 12px;
}

.exo-tiles > * {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--exo-blush);
	color: var(--exo-accent);
	font: 600 20px/1 var(--exo-serif);
}

/* Secondary buttons: outlined, WhatsApp, and the copied state. */
.exsq-org .exo-btn.o,
.exsq-org .exo-btn.sec {
	min-height: 52px;
	box-shadow: none;
}

.exsq-org .exo-btn.o,
.exsq-org .exo-btn.sec {
	border: 2px solid var(--exo-ink);
	background: transparent;
	color: var(--exo-ink);
}

.exsq-org .exo-btn.o:hover,
.exsq-org .exo-btn.sec:hover {
	background: var(--exo-blush);
	color: var(--exo-ink);
	opacity: 1;
}

.exsq-org .exo-btn.sec.copied {
	border-color: var(--exo-wa-line);
	background: var(--exo-wa-bg);
	color: #0b5a31;
}

.exsq-org .exo-btn.wa,
.exsq-org .exo-btn.wa:hover {
	background: var(--exo-wa);
	box-shadow: none;
	color: #fff;
}

.exsq-org .exo-btn.wa:hover {
	background: var(--exo-wa-ink);
	opacity: 1;
}

.exo-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.exo-two .exo-btn {
	min-height: 48px;
}

.exo-helper {
	color: var(--exo-muted);
	font-size: 13px;
	text-align: center;
}

/* Switch row and checkbox row: native inputs restyled, state also stated in words. */
.exo-switch,
.exo-check {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.exo-switch {
	min-height: 72px;
	padding: 14px 20px;
	border-radius: 20px;
	background: var(--exo-card);
	box-shadow: var(--exo-shadow);
}

.exo-check {
	min-height: 48px;
}

.exo-switch input,
.exo-check input {
	position: relative;
	flex: none;
	margin: 0;
	border: 2px solid var(--exo-ctl);
	background: var(--exo-card);
	appearance: none;
	cursor: pointer;
}

.exo-switch input {
	width: 48px;
	height: 28px;
	border-radius: 999px;
	background: var(--exo-ctl);
}

.exo-check input {
	width: 24px;
	height: 24px;
	border-radius: 8px;
}

.exo-switch input::after,
.exo-check input::after {
	content: "";
	position: absolute;
}

.exo-switch input::after {
	top: 1px;
	left: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
}

.exo-check input::after {
	top: 2px;
	left: 7px;
	width: 5px;
	height: 11px;
	border: solid var(--exo-on-cta);
	border-width: 0 3px 3px 0;
	opacity: 0;
	transform: rotate(45deg);
}

.exo-switch input:checked,
.exo-check input:checked {
	border-color: var(--exo-cta);
	background: var(--exo-cta);
}

.exo-switch input:checked::after {
	left: 21px;
}

.exo-check input:checked::after {
	opacity: 1;
}

.exo-note,
.exo-tip {
	display: flex;
	gap: 12px;
	padding: 16px;
	border-radius: 20px;
	background: var(--exo-blush);
	font-size: 13px;
	line-height: 1.4;
}

.exo-tip {
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--exo-card);
}

.exo-tip .exo-ico {
	stroke: var(--exo-gold);
	stroke-width: 2;
}

.exo-mini {
	display: flex;
	flex: 0 1 128px;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	height: 104px;
	border-radius: 12px;
	background: var(--exo-blush);
}

.exo-mini .exo-tee {
	flex-basis: 66px;
	margin: 0 -4px;
	opacity: 1;
}

/* Squad page: the peak-moment hero, invite bubble, price progress, guest list, timeline. */
.exo-live {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 20px 20px;
	border-radius: 24px;
	background: linear-gradient(150deg, #8f2735, #7a1f2b 55%, #5a1520);
	box-shadow: 0 12px 30px rgba(122, 31, 43, .3);
	color: #f6e3dc;
	overflow: hidden;
}

.exo-live :is(h1, h2) {
	color: #fff;
}

.exo-live :focus-visible {
	outline-color: #fdf3e7;
}

.exo-live > i {
	position: absolute;
	border-radius: 50%;
	background: #e8c77a;
}

.exo-live > i:nth-child(1) {
	top: 16px;
	right: 28px;
	width: 8px;
	height: 8px;
}

.exo-live > i:nth-child(2) {
	top: 44px;
	right: 64px;
	width: 10px;
	height: 4px;
	border-radius: 2px;
	background: #fdf3e7;
	transform: rotate(35deg);
}

.exo-live > i:nth-child(3) {
	top: 28px;
	right: 100px;
	width: 6px;
	height: 6px;
	background: #f3b8b0;
}

.exo-live > i:nth-child(4) {
	top: 72px;
	right: 24px;
	width: 10px;
	height: 4px;
	border-radius: 2px;
	transform: rotate(-25deg);
}

.exo-live > i:nth-child(5) {
	top: 60px;
	right: 90px;
	width: 5px;
	height: 5px;
	background: #fdf3e7;
}

.exo-live .exo-step {
	align-self: flex-start;
	padding: 2px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.exo-names {
	color: #fdf3e7;
	font: italic 400 20px/1.2 var(--exo-serif);
}

.exo-between {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.exo-bubble {
	max-width: 300px;
	padding: 10px 12px;
	border-radius: 4px 14px 14px 14px;
	background: var(--exo-wa-bg);
}

.exo-bubble a {
	color: var(--exo-wa-ink);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.exo-from {
	display: block;
	color: var(--exo-muted);
	font-size: 13px;
	text-align: right;
}

.exo-prog {
	position: relative;
	height: 14px;
	margin: 0 12px;
	border-radius: 999px;
	background: #f0e4da;
}

.exo-prog > span {
	display: block;
	width: var(--p);
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--exo-gold), var(--exo-cta));
}

.exo-prog > b {
	position: absolute;
	top: 50%;
	left: var(--p);
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid var(--exo-gold);
	border-radius: 50%;
	background: var(--exo-card);
}

.exo-ladder {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

.exo-cell {
	padding: 12px;
	border: 2px solid transparent;
	border-radius: 12px;
	background: var(--exo-bg);
	font-size: 13px;
	line-height: 1.4;
}

.exo-cell b {
	display: block;
	font: 600 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.exo-cell.now {
	border-color: var(--exo-accent);
	background: var(--exo-blush);
}

.exo-cell.now em {
	color: var(--exo-accent);
	font-style: normal;
	font-weight: 600;
}

.exo-g {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 10px 0;
	border-bottom: 1px solid var(--exo-sep);
}

.exo-av {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--exo-blush);
	color: var(--exo-accent);
	font-size: 13px;
	font-weight: 600;
}

.exo-g:nth-child(4n + 2) .exo-av {
	background: #fbf0cf;
	color: #6b4a00;
}

.exo-g:nth-child(4n + 3) .exo-av {
	background: #e2eadf;
	color: #2f4a2c;
}

.exo-g:nth-child(4n) .exo-av {
	background: #e6e1ee;
	color: #3d2c5a;
}

.exo-you,
.exo-tag {
	display: inline-block;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}

.exo-you {
	background: var(--exo-blush);
	color: var(--exo-accent);
}

.exo-tag {
	background: var(--exo-warn-bg);
	color: var(--exo-warn);
}

.exo-tl li {
	position: relative;
	display: flex;
	gap: 12px;
	padding-bottom: 16px;
}

.exo-tl li:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 24px;
	bottom: 0;
	left: 11px;
	width: 2px;
	background: var(--exo-seg);
}

.exo-td {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--exo-seg);
	border-radius: 50%;
	background: var(--exo-card);
	color: var(--exo-accent);
	font-size: 13px;
	font-weight: 600;
}

.exo-tl .cur .exo-td,
.exo-tl .done .exo-td {
	border-color: var(--exo-cta);
	background: var(--exo-cta);
	color: var(--exo-on-cta);
}

.exo-icard {
	display: flex;
	align-items: center;
	gap: 12px;
}

.exo-card.blush {
	background: var(--exo-blush);
}

.exo-foot {
	padding-bottom: 24px;
	font-size: 13px;
	text-align: center;
}

.exo-foot a {
	font-weight: 600;
}

/* Squad page, second half (24-18): guest rows, the names pill, the design stage, links, the closing card. */
.exo-each {
	font-weight: 600;
}

.exo-pp {
	line-height: 1.45;
}

.exo-cell em,
.exo-cell span {
	display: block;
	font-style: normal;
}

.exo-gl {
	display: flex;
	flex-direction: column;
}

.exo-gb {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.exo-g {
	align-items: flex-start;
}

.exo-gn,
.exo-gd,
.exo-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
}

.exo-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 600 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.exo-sub2 {
	color: var(--exo-muted);
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.exo-acts :is(a, button),
.exsq-org .exo-lnk {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--exo-accent);
	font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-decoration: underline;
	cursor: pointer;
}

.exsq-org .exo-lnk {
	align-self: flex-start;
	font-size: 16px;
}

.exo-tag {
	border-radius: 8px;
}

.exo-pillbtn {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	align-self: flex-start;
	min-height: 44px;
	padding: 4px 12px;
	border: 1px solid var(--exo-line);
	border-radius: 999px;
	background: var(--exo-bg);
	color: var(--exo-ink);
	font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	align-items: center;
	cursor: pointer;
}

.exo-pillbtn span {
	color: var(--exo-accent);
	font-weight: 600;
}

.exo-dstage {
	--tee: #7a1f2b;
	--ink: #fdf3e7;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 112px;
	overflow: hidden;
	border-radius: 14px;
	background: #f3e1d8;
}

.exo-dstage .exo-tee {
	flex-basis: 92px;
	opacity: 1;
}

.exo-dstage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.exo-tail {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.exo-ask {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.exo-reassure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--exo-muted);
	font-size: 13px;
}

.exo-reassure .exo-ico {
	color: var(--exo-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.exo-switch input,
	.exo-switch input::after,
	.exo-opt,
	.exo-prog > span {
		transition: background-color .15s, left .15s, border-color .15s, box-shadow .15s, width .3s;
	}
}

/* Garment and colour step (261109-h2u): the choices and a preview of the design on the chosen garment. On a phone the preview comes first. */
.exo-gcols {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.exo-gshow {
	order: -1;
	text-align: center;
}

.exo-gtee {
	--tee: var(--exo-blush);
	display: block;
	width: 50%;
	margin: 0 auto 8px;
}

.exo-gcols .exo-grow > .exo-help {
	display: block;
}

.exo-cpills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exo-cpill {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 2px solid var(--exo-ctl);
	border-radius: 999px;
	background: var(--exo-card);
	font-weight: 600;
	cursor: pointer;
}

.exo-cpill > input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.exo-cpill:has(input:checked) {
	border-color: var(--exo-cta);
	background: var(--exo-cta);
	color: var(--exo-on-cta);
}

.exo-cpill:has(input:checked)::before {
	content: "\2713\00a0";
}

.exo-cpill:has(input:disabled) {
	border-style: dashed;
	opacity: .55;
	text-decoration: line-through;
	cursor: not-allowed;
}

.exo-cpill:has(input:focus-visible) {
	outline: 2px solid var(--exo-accent);
	outline-offset: 2px;
}

@media (min-width: 48rem) {
	.exo-gcols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		align-items: start;
	}

	.exo-gshow {
		order: 0;
		position: sticky;
		top: 16px;
	}
}

@media (min-width: 60rem) {
	.exsq-wrap.exo-flow > .exo-gcols,
	.exsq-wrap.exo-flow[data-exsq-flow="garment"] > .exo-head {
		max-width: 60rem;
	}
}