/*
 * The v3 look of the public squad pages: the 2026 homepage language (Fraunces headlines, pill buttons, rounded doors, the orange
 * stitched thread). Loaded after squads.css by the hub (and, from plan 04, the launch page); the join page keeps squads-public.css.
 * Its own budget gate is in tools/check-budgets.sh, and squads.css + squads-v3.css stay inside the 10,240 B per-page total.
 *
 * Rules (SourceLintTest): no font-family, @font-face or @import (headings are Flatsome's h1-h3 and .heading-font, body is the theme's);
 * no colour literal (colours are the --exsq-* tokens the server prints on .exsq-wrap, or the white / black keywords); the stitched
 * thread, the needle and the waves are masks filled with tokens; no 100vw (full-bleed bands use box-shadow + clip-path); motion only
 * under prefers-reduced-motion: no-preference; every focus keeps a visible outline.
 */
.exsq-wrap.exsq-v3 {
	--exsq-v3-muted: color-mix(in srgb, currentColor 72%, transparent);
	--exsq-v3-dash: color-mix(in srgb, var(--exsq-cta, currentColor) 45%, white);
	--exsq-v3-radius: 1.625rem;
	--exsq-v3-stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M2 14C60 2 110 22 160 12S250 4 298 14' fill='none' stroke='black' stroke-width='3' stroke-dasharray='10 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--exsq-v3-needle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 34L36 4' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--exsq-v3-thread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M-20 44C200 8 420 80 700 40S1180 6 1460 46' fill='none' stroke='black' stroke-width='3' stroke-dasharray='14 10' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--exsq-v3-knot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill-rule='evenodd' d='M3 20a17 17 0 1 0 34 0a17 17 0 1 0 -34 0zM12.6 15a2.4 2.4 0 1 0 4.8 0a2.4 2.4 0 1 0 -4.8 0zM22.6 15a2.4 2.4 0 1 0 4.8 0a2.4 2.4 0 1 0 -4.8 0zM12.6 25a2.4 2.4 0 1 0 4.8 0a2.4 2.4 0 1 0 -4.8 0zM22.6 25a2.4 2.4 0 1 0 4.8 0a2.4 2.4 0 1 0 -4.8 0z'/%3E%3C/svg%3E");
	max-width: 73.75rem;
	padding: 0 1rem 2.5rem;
	font-size: 1rem;
	line-height: 1.55;
}

/* Flatsome indents list items in page content (.entry-content ul li, 0-1-2) and loads after this sheet, so the reset needs more weight. */
.exsq-v3 :is(ul, ol, dl, dd)[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

.exsq-v3 :is(ul, ol)[class] > li {
	margin-left: 0;
}

/* Flatsome sets every dl smaller, faded and in capitals, and every th and button in capitals; the v3 look keeps sentence case. */
.exsq-v3 dl[class] {
	font-size: inherit;
	opacity: 1;
	text-transform: none;
}

.exsq-v3 :is(tbody th, button) {
	text-transform: none;
	letter-spacing: normal;
}

.exsq-v3 :is(a, button, summary, input):focus-visible {
	outline: 3px solid var(--exsq-accent, currentColor);
	outline-offset: 2px;
}

.exsq-v3 .exsq-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--exsq-accent, inherit);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.exsq-v3 :is(h1, h2, h3) {
	margin: 0;
	font-weight: 800;
	color: inherit;
	text-transform: none;
	text-wrap: balance;
}

.exsq-v3 h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
}

.exsq-v3 h3 {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

.exsq-v3 .exsq-v3-accent {
	font-style: italic;
	color: var(--exsq-accent, inherit);
}

.exsq-v3-sec {
	padding-block: 2.25rem;
}

.exsq-v3 .exsq-v3-h1 {
	font-size: clamp(2.375rem, 5.4vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.exsq-v3-stitched {
	position: relative;
	font-style: italic;
	color: var(--exsq-accent, inherit);
	white-space: nowrap;
}

.exsq-v3-stitched::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.2em;
	left: 0;
	height: 0.24em;
	background: var(--exsq-cta, transparent);
	-webkit-mask: var(--exsq-v3-stitch) 0 0 / 100% 100% no-repeat;
	mask: var(--exsq-v3-stitch) 0 0 / 100% 100% no-repeat;
}

.exsq-v3-needle::before {
	content: "";
	position: absolute;
	right: -0.6em;
	bottom: -0.38em;
	width: 0.52em;
	height: 0.52em;
	background: var(--exsq-on-cta, currentColor);
	-webkit-mask: var(--exsq-v3-needle) 0 0 / contain no-repeat;
	mask: var(--exsq-v3-needle) 0 0 / contain no-repeat;
}

/* The thread divider: a stitched wave with a button in the middle. Decorative. */
.exsq-v3-thread {
	position: relative;
	height: 4.5rem;
}

.exsq-v3-thread::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--exsq-cta, transparent);
	-webkit-mask: var(--exsq-v3-thread) 0 0 / 100% 100% no-repeat;
	mask: var(--exsq-v3-thread) 0 0 / 100% 100% no-repeat;
}

.exsq-v3-thread::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.25rem;
	height: 2.25rem;
	margin: -1.125rem 0 0 -1.125rem;
	background: var(--exsq-on-cta, currentColor);
	-webkit-mask: var(--exsq-v3-knot) 50% 50% / contain no-repeat;
	mask: var(--exsq-v3-knot) 50% 50% / contain no-repeat;
}

/* Pill buttons and the text link. */
.exsq-v3 .exsq-btn {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 3.125rem;
	padding: 0 1.625rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	border-width: 2px;
	border-radius: 999px;
}

.exsq-v3-link {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--exsq-cta, currentColor);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.exsq-v3-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem 1.25rem;
	align-items: center;
	margin-top: 1.625rem;
}

/* Hero: the copy beside a stitched photo door; the photo first on phones. */
.exsq-v3-hero {
	display: grid;
	gap: 1.375rem;
	align-items: center;
	padding: 1rem 0 2rem;
}

.exsq-v3-hero > * {
	min-width: 0;
}

.exsq-v3-lede {
	max-width: 56ch;
	margin: 1.625rem 0 0;
	font-size: 1.0625rem;
}

.exsq-v3 ul.exsq-v3-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.125rem 0 0;
}

.exsq-v3-pills li {
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
	margin: 0;
	padding: 0.375rem 0.8125rem;
	font-size: 0.875rem;
	font-weight: 600;
	background: white;
	border: 1.5px dashed var(--exsq-v3-dash);
	border-radius: 999px;
}

.exsq-v3-pills li::before {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	background: var(--exsq-cta, transparent);
	border-radius: 50%;
}

.exsq-v3-door {
	position: relative;
	order: -1;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3.3;
	border-radius: 2rem;
}

.exsq-v3-door picture {
	display: block;
	height: 100%;
}

.exsq-v3-door img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exsq-v3-door::after {
	content: "";
	position: absolute;
	inset: 0.75rem;
	border: 2px dashed color-mix(in srgb, white 75%, transparent);
	border-radius: 1.375rem;
	pointer-events: none;
}

.exsq-v3-tag {
	position: absolute;
	bottom: 1.625rem;
	left: 1.625rem;
	z-index: 2;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: black;
	background: white;
	border-radius: 999px;
	box-shadow: 0 4px 14px color-mix(in srgb, black 18%, transparent);
}


/* Occasion page: the crumbs, a wide text-free photo door (4:3 on phones, the hero's own 2.4:1 from 40em) and the copy under it. */
.exsq-v3-crumbs {
	padding-top: 1.125rem;
	font-size: 0.875rem;
	color: var(--exsq-v3-muted);
}

.exsq-v3-crumbs a {
	color: inherit;
}

.exsq-v3-door.exsq-v3-type-hero {
	margin-top: 0.875rem;
	aspect-ratio: 4 / 3;
	border-radius: 1.5rem;
}

.exsq-v3-door-plain {
	background: var(--exsq-accent-soft, transparent);
}

.exsq-v3-door-plain img {
	object-fit: contain;
}

.exsq-v3-type {
	display: grid;
	gap: 1.375rem;
	align-items: start;
	margin-top: 1.375rem;
}

.exsq-v3-type > * {
	min-width: 0;
}

.exsq-v3-type .exsq-v3-lede {
	margin-top: 0;
}

/* Occasions: a row card on phones (photo beside the words), then a 2- and 3-column grid of photo-over-words cards. */
.exsq-v3-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: end;
	justify-content: space-between;
	margin-bottom: 1.375rem;
}

.exsq-v3-note,
.exsq-v3-muted {
	margin: 0;
	color: var(--exsq-v3-muted);
}

.exsq-v3-note {
	max-width: 42ch;
}

.exsq-v3 h2 + .exsq-v3-muted {
	margin-top: 0.625rem;
}

.exsq-v3-occs {
	display: grid;
	gap: 1rem;
}

.exsq-v3-occ {
	position: relative;
	display: grid;
	grid-template-columns: 8.25rem 1fr;
	margin: 0;
	overflow: hidden;
	background: white;
	border: 1px solid var(--exsq-line);
	border-radius: var(--exsq-v3-radius);
}

.exsq-v3-pic {
	min-height: 9.375rem;
	overflow: hidden;
}

.exsq-v3-pic picture {
	display: block;
	height: 100%;
}

.exsq-v3-pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exsq-v3-occ-body {
	display: grid;
	gap: 0.375rem;
	align-content: start;
	min-width: 0;
	padding: 0.875rem 1rem;
}

.exsq-v3-occ h3 {
	font-size: 1.1875rem;
}

.exsq-v3-occ p {
	display: none;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--exsq-v3-muted);
}

.exsq-v3-kicker {
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--exsq-accent, inherit);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.exsq-v3-from {
	font-size: 0.8125rem;
	font-weight: 700;
}

.exsq-v3-occ a {
	margin-top: 0.375rem;
	font-weight: 800;
	color: inherit;
	text-decoration: none;
}

.exsq-v3-occ a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.exsq-v3-occ:has(a:focus-visible) {
	outline: 3px solid var(--exsq-accent, currentColor);
	outline-offset: 2px;
}

/* The cream "At a glance" band: full-bleed by box-shadow and clip-path (never 100vw), with wavy edges. */
.exsq-v3-band {
	margin-top: 1rem;
}

.exsq-v3-wave {
	position: relative;
	height: 3rem;
	color: var(--exsq-accent-soft, transparent);
}

.exsq-v3-wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

.exsq-v3-wave::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: 1.75rem;
	background: currentColor;
	box-shadow: 0 0 0 100vmax currentColor;
	clip-path: inset(0 -100vmax);
}

.exsq-v3-wave-top::before {
	bottom: 0;
}

.exsq-v3-wave-bot::before {
	top: 0;
}

.exsq-v3-glance {
	padding-block: 0.25rem;
	background: var(--exsq-accent-soft, transparent);
	box-shadow: 0 0 0 100vmax var(--exsq-accent-soft, transparent);
	clip-path: inset(0 -100vmax);
}

.exsq-v3-answer {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

.exsq-v3-def {
	margin: 0.625rem 0 0;
	font-size: 1.0625rem;
}

.exsq-v3-facts {
	display: grid;
	gap: 0.875rem;
}

.exsq-v3-fact {
	position: relative;
	padding: 1rem 1.125rem 1rem 4.5rem;
	background: white;
	border-radius: 1.25rem;
}

.exsq-v3-fact dt {
	font-weight: 800;
}

.exsq-v3-fact dd {
	margin: 0.125rem 0 0;
	font-size: 0.9375rem;
	color: var(--exsq-v3-muted);
}

.exsq-v3-dot {
	position: absolute;
	top: 1rem;
	left: 1.125rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.0625rem;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	color: var(--exsq-accent, inherit);
	background: white;
	border-radius: 50%;
	outline: 2px dashed var(--exsq-cta, currentColor);
	outline-offset: -5px;
}

/* Four steps on the stitched thread. */
.exsq-v3 ol.exsq-v3-steps {
	position: relative;
	display: grid;
	gap: 1.5rem;
	margin-top: 1.75rem;
}

.exsq-v3-steps li {
	display: grid;
	grid-template-columns: 3.625rem 1fr;
	column-gap: 0.875rem;
	align-content: start;
	margin: 0;
}

.exsq-v3-num {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 3.625rem;
	height: 3.625rem;
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	color: var(--exsq-accent, inherit);
	background: white;
	border-radius: 50%;
	outline: 2.5px dashed var(--exsq-cta, currentColor);
	outline-offset: -8px;
	box-shadow: 0 6px 16px color-mix(in srgb, black 10%, transparent);
}

.exsq-v3-steps strong {
	font-size: 1.0625rem;
	font-weight: 800;
}

.exsq-v3-step-text {
	max-width: 26ch;
	font-size: 0.9375rem;
	color: var(--exsq-v3-muted);
}

/* Prices. */
.exsq-v3-split {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

.exsq-v3-pricecard {
	padding: 0.25rem 0.875rem;
	overflow-x: auto;
	background: white;
	border: 1px solid var(--exsq-line);
	border-radius: var(--exsq-v3-radius);
}

.exsq-v3 .exsq-v3-prices {
	width: 100%;
	margin: 0;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	border: 0;
	border-collapse: collapse;
}

.exsq-v3 .exsq-v3-prices caption {
	padding: 0.875rem 0 0.25rem;
	font-size: 0.875rem;
	text-align: left;
	color: var(--exsq-v3-muted);
}

.exsq-v3 .exsq-v3-prices :is(th, td) {
	padding: 0.75rem 0.3125rem;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px dashed var(--exsq-line);
}

.exsq-v3 .exsq-v3-prices tr:last-child :is(th, td) {
	border-bottom: 0;
}

.exsq-v3 .exsq-v3-prices thead th {
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--exsq-v3-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.exsq-v3 .exsq-v3-prices tbody th {
	font-weight: 700;
}

.exsq-v3 .exsq-v3-prices .exsq-best {
	font-weight: 800;
	color: var(--exsq-accent, inherit);
}

.exsq-v3-lg {
	display: none;
}

/* FAQ. */
.exsq-v3-faq {
	display: grid;
	gap: 0.625rem;
	margin-top: 1.125rem;
}

.exsq-v3-faq details {
	padding: 0 1.25rem;
	background: white;
	border: 1px solid var(--exsq-line);
	border-radius: 1.25rem;
}

.exsq-v3-faq details[open] {
	border-color: var(--exsq-v3-dash);
}

.exsq-v3-faq summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.0625rem 0;
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.exsq-v3-faq summary::-webkit-details-marker {
	display: none;
}

.exsq-v3-faq summary::after {
	content: "+";
	display: grid;
	flex: none;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	font-weight: 800;
	color: var(--exsq-accent, inherit);
	background: var(--exsq-accent-soft, transparent);
	border-radius: 50%;
}

.exsq-v3-faq details[open] summary::after {
	content: "\2013";
}

.exsq-v3-faq details p {
	max-width: 70ch;
	margin: 0 0 1.125rem;
}

/* Occasion page: how names work (photo tees for the wedding, drawn tees for the others), the designs and the other squads. */
.exsq-v3-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.exsq-v3-namesband {
	padding-bottom: 1.5rem;
}

.exsq-v3 ul.exsq-v3-names {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 1.375rem;
}

.exsq-v3-namecard {
	display: grid;
	gap: 0.25rem;
	justify-items: center;
	margin: 0;
	padding: 0.5rem 0.5rem 0.625rem;
	text-align: center;
	background: white;
	border-radius: 1.125rem;
}

.exsq-v3-namecard :is(picture, img, svg) {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.875rem;
}

.exsq-v3-namecard b {
	margin-top: 0.375rem;
	font-size: 0.875rem;
}

.exsq-v3-namecard small {
	font-size: 0.75rem;
	color: var(--exsq-v3-muted);
}

.exsq-v3-tee-bg {
	fill: var(--exsq-accent-soft, transparent);
}

.exsq-v3-tee-body {
	fill: white;
	stroke: color-mix(in srgb, black 15%, transparent);
}

.exsq-v3-tee text {
	fill: var(--exsq-accent, currentColor);
}

.exsq-v3-tipline {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	margin: 1.125rem 0 0;
	padding: 0.625rem 1.125rem;
	font-size: 0.9375rem;
	background: white;
	border-radius: 1.125rem;
}

.exsq-v3-tipline::before {
	content: "\2713";
	display: grid;
	flex: none;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	font-weight: 800;
	color: var(--exsq-on-cta, inherit);
	background: var(--exsq-cta, transparent);
	border-radius: 50%;
}

.exsq-v3-leadline {
	margin: 1.5rem 0 0;
	color: var(--exsq-v3-muted);
	text-align: center;
}

.exsq-v3-filters:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.125rem 0 1.25rem;
}

.exsq-v3-filters button {
	padding: 0.5625rem 0.9375rem;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	background: white;
	border: 1.5px solid var(--exsq-line);
	border-radius: 999px;
}

.exsq-v3-filters button[aria-pressed="true"] {
	color: white;
	background: black;
	border-color: black;
}

.exsq-v3 ul.exsq-v3-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.exsq-v3-gallery li {
	margin: 0;
}

.exsq-v3-gallery .exsq-tpl {
	display: grid;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: white;
	border: 1px solid var(--exsq-line);
	border-radius: 1.375rem;
}

.exsq-v3-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.exsq-v3-gallery .exsq-tpl span {
	padding: 0.625rem 0.5rem 0.75rem;
	font-size: 0.9375rem;
	font-weight: 700;
	text-align: center;
}

.exsq-v3-others {
	margin-top: 2.5rem;
}

.exsq-v3 .exsq-v3-h3 {
	font-size: 1.375rem;
	line-height: 1.2;
}

.exsq-v3 ul.exsq-v3-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 0.875rem;
}

.exsq-v3-links li {
	margin: 0;
}

.exsq-v3-links a {
	display: inline-block;
	padding: 0.625rem 1rem;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	background: white;
	border: 1.5px dashed var(--exsq-v3-dash);
	border-radius: 999px;
}

/* The two help boxes. */
.exsq-v3-help {
	display: grid;
	gap: 1.375rem;
}

.exsq-v3-box {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	min-width: 0;
	padding: 1.625rem;
	border-radius: var(--exsq-v3-radius);
}

.exsq-v3-box h2 {
	font-size: 1.375rem;
	font-weight: 700;
}

.exsq-v3-box p {
	margin: 0;
}

.exsq-v3-box.exsq-find {
	background: white;
	border: 1.5px dashed var(--exsq-v3-dash);
}

.exsq-v3-box.exsq-bigger {
	color: var(--exsq-on-primary, inherit);
	background: var(--exsq-primary-fill, transparent);
}

.exsq-v3-box.exsq-bigger :is(a, button):focus-visible {
	outline-color: var(--exsq-cta, currentColor);
}

.exsq-v3 .exsq-v3-box .exsq-form {
	display: grid;
	gap: 0.625rem;
	align-items: end;
	margin: 0;
}

.exsq-v3 .exsq-v3-box .exsq-field {
	margin: 0;
}

.exsq-v3 .exsq-v3-box input[type="email"] {
	min-height: 3.125rem;
	padding: 0.75rem 0.875rem;
	background: white;
	border: 1.5px solid var(--exsq-line);
	border-radius: 0.875rem;
}

.exsq-v3 .exsq-v3-box .exsq-msg {
	margin: 0;
	grid-column: 1 / -1;
}

.exsq-v3-box .exsq-v3-row {
	margin-top: 0.25rem;
}

@media (min-width: 40em) {
	.exsq-v3-hero {
		grid-template-columns: 1.05fr 1fr;
		gap: 3rem;
		padding: 2rem 0 2.5rem;
	}

	.exsq-v3-door {
		order: 0;
		aspect-ratio: 5 / 4.4;
	}

	.exsq-v3-door.exsq-v3-type-hero {
		aspect-ratio: 2.4 / 1;
		border-radius: 2rem;
	}

	.exsq-v3-occs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.375rem;
	}

	.exsq-v3-occ {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.exsq-v3-pic {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.exsq-v3-occ-body {
		padding: 1.125rem 1.25rem 1.25rem;
	}

	.exsq-v3-occ h3 {
		font-size: 1.375rem;
	}

	.exsq-v3-occ p {
		display: block;
	}

	.exsq-v3-facts {
		grid-template-columns: 1fr 1fr;
	}

	.exsq-v3 ul.exsq-v3-names {
		gap: 1.25rem;
	}

	.exsq-v3-namecard {
		padding: 0.875rem 0.875rem 1rem;
		border-radius: var(--exsq-v3-radius);
	}

	.exsq-v3-namecard b {
		font-size: 1.0625rem;
	}

	.exsq-v3-namecard small {
		font-size: 0.875rem;
	}

	.exsq-v3 ul.exsq-v3-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}

	.exsq-v3-steps {
		grid-template-columns: 1fr 1fr;
		row-gap: 1.75rem;
	}

	.exsq-v3-pricecard {
		padding: 0.5rem 1.375rem;
	}

	.exsq-v3 .exsq-v3-prices {
		min-width: 32.5rem;
		font-size: 1rem;
	}

	.exsq-v3 .exsq-v3-prices :is(th, td) {
		padding: 0.875rem 0.625rem;
	}

	.exsq-v3-lg {
		display: inline;
	}

	.exsq-v3 .exsq-v3-box .exsq-form {
		grid-template-columns: 1fr auto;
	}
}

@media (min-width: 54rem) {
	.exsq-v3-type {
		grid-template-columns: 1.15fr 1fr;
		gap: 2.5rem;
		margin-top: 2.125rem;
	}

	.exsq-v3-occs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.exsq-v3-answer {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 3rem;
	}

	.exsq-v3-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.375rem;
	}

	.exsq-v3-steps::before {
		content: "";
		position: absolute;
		top: 1.75rem;
		right: 6%;
		left: 6%;
		height: 1.25rem;
		background: var(--exsq-cta, transparent);
		-webkit-mask: var(--exsq-v3-stitch) 0 0 / 100% 100% no-repeat;
		mask: var(--exsq-v3-stitch) 0 0 / 100% 100% no-repeat;
	}

	.exsq-v3-steps li {
		position: relative;
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.exsq-v3-num {
		grid-row: auto;
		margin-bottom: 0.375rem;
	}

	.exsq-v3-split {
		grid-template-columns: 0.8fr 1.2fr;
		gap: 2.75rem;
	}

	.exsq-v3-help {
		grid-template-columns: 1fr 1fr;
	}

	.exsq-v3 ul.exsq-v3-gallery {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 39.99em) {
	.exsq-v3 .exsq-v3-h1 {
		font-size: 2.375rem;
	}

	.exsq-v3-row .exsq-btn {
		flex: 1 1 100%;
	}

	.exsq-v3-box .exsq-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.exsq-v3 .exsq-btn {
		transition: opacity 0.15s;
	}

	.exsq-v3-occ {
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.exsq-v3-gallery .exsq-tpl {
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.exsq-v3-gallery .exsq-tpl:hover {
		box-shadow: 0 12px 26px color-mix(in srgb, currentColor 10%, transparent);
		transform: translateY(-3px);
	}

	.exsq-v3-occ:hover {
		box-shadow: 0 14px 30px color-mix(in srgb, currentColor 10%, transparent);
		transform: translateY(-3px);
	}
}