/* ==========================================================================
   The Handoff Standard: the CSS theme.json cannot express.
   Enqueued by functions.php on the front end and in the editor.

   Design tokens (colours, fonts, sizes, spacing, layout widths) live in
   theme.json and reach this file only as WordPress preset variables
   (--wp--preset--color--*, --wp--preset--font-size--*, ...). Nothing here
   hard-codes a colour or a size that theme.json could hold instead, with two
   exceptions kept local below (--hs-toc-width, --hs-doc-gap, --hs-radius).

   Spec: docs/design/tokens.md. Reference render: docs/design/mockup.html.
   ========================================================================== */

/* ---- Dark mode ----------------------------------------------------------
   theme.json has no light/dark switch, so the presets are redefined here for
   a viewer whose system asks for dark. Same design, swapped values: every
   token has both. html:root outranks WordPress's own :root global-styles
   block whatever order the two stylesheets load in. color-scheme makes
   scrollbars and native form controls follow the theme too. */

:root {
	color-scheme: light;

	--hs-toc-width: 14rem;   /* Contents column on wide screens */
	--hs-doc-gap: 5rem;      /* gap between Contents and the text */
	--hs-radius: 3px;
}

@media (prefers-color-scheme: dark) {
	html:root {
		color-scheme: dark;
		--wp--preset--color--base: #121316;
		--wp--preset--color--contrast: #e9e7e2;
		--wp--preset--color--primary: #8fb5ff;
		--wp--preset--color--primary-hover: #b8d0ff;
		--wp--preset--color--on-primary: #0f1115;
		--wp--preset--color--secondary: #c4c1ba;
		--wp--preset--color--accent: #e6a960;
		--wp--preset--color--surface: #1c1e22;
		--wp--preset--color--surface-contrast: #e9e7e2;
		--wp--preset--color--muted: #9ea3ab;
		--wp--preset--color--border: #30343a;
		--wp--preset--color--field: #16181b;
		--wp--preset--color--danger: #ff8f86;
	}
}

/* ---- Base --------------------------------------------------------------- */

body {
	font-optical-sizing: auto;   /* the serif picks its display cut for the title */
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent);
	color: inherit;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* One focus style everywhere. The element list matches the parent theme's own
   rule so this one wins on load order rather than on specificity. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

/* WordPress prints its own skip link; this is the visible-on-focus chip. */
html body .skip-link.screen-reader-text:focus {
	padding: 0.5rem 0.875rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--hs-radius);
	box-shadow: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

/* ---- Header (parts/header.html) ---------------------------------------- */

.hs-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-group.hs-header__inner {
	align-items: baseline;
	gap: 0.25rem 1.5rem;
	padding-block: var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--ui);
}

.hs-header .wp-block-site-title {
	margin: 0;
	letter-spacing: -0.005em;
}

.hs-header .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hs-header .wp-block-site-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.hs-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.hs-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* The current page: contrast text with an accent underline. */
.hs-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--accent);
}

/* ---- Footer (parts/footer.html) ---------------------------------------- */

.hs-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}

.wp-block-group.hs-footer__inner {
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.wp-block-group.hs-footer__inner > * {
	margin-block: 0;
}

.wp-block-group.hs-footer__inner > * + * {
	margin-block-start: 0.4rem;
}

.hs-footer a {
	color: var(--wp--preset--color--secondary);
}

.hs-footer a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---- The document: intro, Contents, the standard ----------------------- */

/* Below 64rem: one column at text width, in reading order (title, Contents,
   sections). From 64rem: Contents becomes a sticky left column and the text
   keeps its measure. The three widths add up to wideSize exactly, so the
   header, the document and the footer share one left edge.

   The grid lives on the post content element itself, not on a wrapper group,
   so that every section is a root block and gets its own row in List View. A
   new owner's most likely first edit to this page is moving a section, and
   with a wrapper the List View opened on one collapsed row and the section
   rows were not there to drag. Ryan's call, 2026-09-11.

   Two consequences of hanging the grid on post content, both deliberate:
   `has-global-padding` gives the side gutters below 64rem and is removed at
   64rem, where the centred max-width provides the margin instead. Leaving it
   on would subtract the padding from wideSize under border-box and move the
   text column's left edge off the header's. */
.home .wp-block-post-content {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--2-xl);
}

.home .wp-block-post-content > * {
	margin-block: 0;
}

/* Only the Contents block takes the gap below the title. Section spacing is
   carried by each section's own h2 (margin, hairline, padding), so a generic
   `> * + *` here would add a second gap between every section. */
.home .wp-block-post-content > .hs-toc {
	margin-block-start: var(--wp--preset--spacing--lg);
}

@media (min-width: 64rem) {
	.home .wp-block-post-content {
		max-width: var(--wp--style--global--wide-size);
		padding-inline: 0;
		display: grid;
		grid-template-columns: var(--hs-toc-width) minmax(0, var(--wp--style--global--content-size));
		column-gap: var(--hs-doc-gap);
		justify-content: center;
		padding-top: var(--wp--preset--spacing--2-xl);
	}

	.home .wp-block-post-content > .hs-toc {
		margin-block-start: 0;
	}

	.home .wp-block-post-content > .hs-intro {
		grid-column: 2;
		grid-row: 1;
	}

	/* The nine sections fill column 2 by auto-placement, rows 2 to 10. */
	.home .wp-block-post-content > .hs-section {
		grid-column: 2;
	}

	/* The Contents block: the nav on the front end, its wrapper in the editor.
	   The span is the intro row plus the nine section rows. It cannot be
	   `1 / -1`, because negative line numbers resolve against the explicit
	   grid and every row here is implicit. Adding a tenth section means
	   changing this number, and the symptom would be the sticky column
	   stopping early rather than anything silent. */
	.home .wp-block-post-content > .hs-toc,
	.home .wp-block-post-content > .wp-block-handoffstandard-contents {
		grid-column: 1;
		grid-row: 1 / span 10;
	}
}

/* ---- Title, version line, version table -------------------------------- */

.hs-intro > * {
	margin-block: 0;
}

.hs-intro h1 {
	margin-block-end: var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.hs-intro .hs-lede {
	color: var(--wp--preset--color--secondary);
}

.wp-block-table.is-style-hs-meta {
	margin-block-start: var(--wp--preset--spacing--lg);
}

.wp-block-table.is-style-hs-meta table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.wp-block-table.is-style-hs-meta td {
	border: 0;
	padding: 0.55rem 0;
	vertical-align: baseline;
	word-break: normal;
}

.wp-block-table.is-style-hs-meta tr + tr td {
	border-top: 1px solid var(--wp--preset--color--border);
}

.wp-block-table.is-style-hs-meta td:first-child {
	width: 7.5rem;
	padding-right: 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Contents (blocks/contents) ---------------------------------------- */

/* Narrow screens: a box between the version table and section 1. */
.hs-toc {
	padding: 1.125rem 1.25rem 1.25rem;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hs-radius);
	font-family: var(--wp--preset--font-family--ui);
}

.hs-toc__label {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hs-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.hs-toc li {
	margin: 0;
}

.hs-toc a {
	display: block;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
	text-decoration: none;
}

.hs-toc a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Wide screens, inside the document grid: no box, a hairline down the left,
   sticky, and the section being read marked with an accent rule. */
@media (min-width: 64rem) {
	.home .wp-block-post-content .hs-toc {
		position: sticky;
		top: var(--wp--preset--spacing--lg);
		align-self: start;
		max-height: calc(100vh - 2 * var(--wp--preset--spacing--lg));
		overflow-y: auto;
		margin-top: 0.5rem;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}

	.home .wp-block-post-content .hs-toc ul {
		border-left: 1px solid var(--wp--preset--color--border);
	}

	.home .wp-block-post-content .hs-toc a {
		margin-left: -1px;
		padding: 0.35rem 0 0.35rem 0.875rem;
		border-left: 2px solid transparent;
		color: var(--wp--preset--color--secondary);
	}

	.home .wp-block-post-content .hs-toc a[aria-current="true"] {
		color: var(--wp--preset--color--contrast);
		font-weight: 600;
		border-left-color: var(--wp--preset--color--accent);
	}
}

/* ---- The standard's text ------------------------------------------------ */

.hs-section > * {
	margin-block: 0;
}

.hs-section > * + * {
	margin-block-start: 1.125rem;
}

.hs-section p {
	hanging-punctuation: first;
}

/* A section heading: space above, a hairline, then the heading.
 *
 * `h2:first-child`, not a bare `h2`, and the reason is specificity rather than
 * matching: every section's heading is already its first child, so the two
 * select the same elements. WordPress emits
 * `:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }`
 * for every flow-layout container, which each section is, and that selector
 * weighs (0,2,0). This rule used to read `.hs-body .hs-section > h2`, (0,2,1),
 * and won on weight. Flattening dropped the `.hs-body` prefix and with it the
 * class that was doing the winning: at (0,1,1) core's rule took over, the 72px
 * above every heading went to zero, and the page lost 576px of its height
 * without a single rule looking wrong. Adding `:first-child` puts it back at
 * (0,2,1). Do not "simplify" this back to `h2`.
 */
.hs-section > h2:first-child {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--2-xl);
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 1px solid var(--wp--preset--color--border);
	scroll-margin-top: var(--wp--preset--spacing--md);
	text-wrap: balance;
}

/* First section only. Was `.hs-body > .hs-section:first-child`; after
   flattening the first root child is the intro, so this keys off the first
   <section> among its siblings instead. */
.hs-section:first-of-type > h2 {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.hs-section > h2 + * {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/* The "#" link after a heading (added by the render filter in functions.php).
   Inline on touch and narrow screens; on hover-capable wide screens it hangs
   in the left margin and fades in. */
.hs-anchor {
	margin-left: 0.35em;
	padding: 0 0.15em;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 400;
	text-decoration: none;
	opacity: 0.55;
}

.hs-anchor:hover,
.hs-anchor:focus-visible {
	color: var(--wp--preset--color--primary);
	opacity: 1;
	text-decoration: none;
}

@media (hover: hover) and (min-width: 64rem) {
	.hs-anchor {
		position: absolute;
		left: -1.4em;
		margin-left: 0;
		opacity: 0;
		transition: opacity 120ms ease;
	}

	h2:hover > .hs-anchor,
	.hs-anchor:focus-visible {
		opacity: 1;
	}
}

.hs-section strong {
	font-weight: 650;
}

/* Section 7's run-in heads ("Front end", "Back end", "Standalone"). They are
   paragraphs in the source and stay paragraphs here. */
.hs-section p.hs-runin-head {
	margin-block-start: var(--wp--preset--spacing--lg);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--secondary);
}

.hs-section p.hs-runin-head strong {
	margin-right: 0.35em;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hs-section > p.hs-runin-head + ul {
	margin-block-start: 0.5rem;
}

/* Lists */
.hs-section ul,
.hs-section ol {
	padding-left: 1.5rem;
}

.hs-section li + li {
	margin-top: 0.5rem;
}

.hs-section li::marker {
	color: var(--wp--preset--color--muted);
}

.hs-section ol > li {
	padding-left: 0.25rem;
}

.hs-section ol > li::marker {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Inline code. overflow-wrap keeps a long identifier from widening the page. */
.hs-section code {
	padding: 0.1em 0.3em;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hs-radius);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.84em;
	overflow-wrap: anywhere;
}

/* ---- Section 3: the acceptance test (core/quote, "Acceptance test") ----- */

.wp-block-quote.is-style-hs-test {
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) 1.75rem;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--hs-radius) var(--hs-radius) 0;
	font-size: var(--wp--preset--font-size--lg);
	font-style: normal;
	line-height: 1.5;
}

.hs-section > .wp-block-quote.is-style-hs-test {
	margin-block: var(--wp--preset--spacing--lg);
}

.wp-block-quote.is-style-hs-test > p {
	margin: 0;
}

/* "If they can, it is a site..." sits below a rule, in the same panel. */
.wp-block-quote.is-style-hs-test > p + p {
	margin-top: var(--wp--preset--spacing--sm);
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--border);
	font-weight: 600;
}

/* "The $20k handover test." on its own line, as a label. */
.wp-block-quote.is-style-hs-test > p:first-child > strong:first-child {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---- Section 4: the criteria (core/group, "Criterion") ----------------- */

.wp-block-group.is-style-hs-criterion {
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--border);
	scroll-margin-top: var(--wp--preset--spacing--md);
}

.hs-section > .wp-block-group.is-style-hs-criterion {
	margin-block-start: var(--wp--preset--spacing--md);
}

.wp-block-group.is-style-hs-criterion > p {
	margin: 0;
}

/* "C1. Sole control." as its own line; the rest of the paragraph runs on. */
.wp-block-group.is-style-hs-criterion > p:first-child > strong:first-child {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.005em;
}

/* The Test line, as an inset strip. */
.wp-block-group.is-style-hs-criterion > p + p {
	margin-top: 0.75rem;
	padding: 0.625rem 0.875rem;
	background-color: var(--wp--preset--color--surface);
	border-left: 2px solid var(--wp--preset--color--border);
	font-size: 0.9375em;
	line-height: 1.55;
}

.wp-block-group.is-style-hs-criterion > p + p > em:first-child {
	color: var(--wp--preset--color--accent);
	font-weight: 650;
}

/* Linked to directly (/#c4): mark which criterion the link meant. */
.wp-block-group.is-style-hs-criterion:target > p + p {
	border-left-color: var(--wp--preset--color--accent);
}

/* ---- Single-column pages: the form and the 404 ------------------------- */

.hs-main.hs-single {
	padding-block: var(--wp--preset--spacing--2-xl);
}

.hs-single .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--md);
	text-wrap: balance;
}

.hs-single .wp-block-post-content > p,
.hs-single > p {
	color: var(--wp--preset--color--secondary);
}

/* On the 404 the Contents list keeps its box at every width. */
.hs-single .hs-toc {
	position: static;
	max-height: none;
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* ---- Gravity Forms ----------------------------------------------------- */

/* The framework theme (Orbital) is driven by its own custom properties, so the
   way to restyle it is to set those on the wrapper rather than to fight its
   selectors. Everything below maps a GF variable to one of our tokens. */
.gform_wrapper {
	--gf-color-primary: var(--wp--preset--color--primary);

	--gf-ctrl-font-family: var(--wp--preset--font-family--ui);
	--gf-ctrl-font-size: 1rem;   /* 16px: stops iOS zooming the page on focus */
	--gf-ctrl-color: var(--wp--preset--color--contrast);
	--gf-ctrl-bg-color: var(--wp--preset--color--field);
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--field);
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--field);
	--gf-ctrl-bg-color-error: var(--wp--preset--color--field);
	--gf-ctrl-border-color: var(--wp--preset--color--muted);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--contrast);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--primary);
	--gf-ctrl-border-color-error: var(--wp--preset--color--danger);
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-radius: var(--hs-radius);
	--gf-ctrl-size-md: 2.75rem;  /* 44px touch target */
	--gf-ctrl-padding-x: 0.75rem;

	--gf-ctrl-label-font-family-primary: var(--wp--preset--font-family--ui);
	--gf-ctrl-label-font-size-primary: 1rem;
	--gf-ctrl-label-font-weight-primary: 600;
	--gf-ctrl-label-color-primary: var(--wp--preset--color--contrast);
	--gf-ctrl-label-font-family-req: var(--wp--preset--font-family--ui);
	--gf-ctrl-label-font-size-req: var(--wp--preset--font-size--xs);
	--gf-ctrl-label-font-weight-req: 400;
	--gf-ctrl-label-color-req: var(--wp--preset--color--muted);

	--gf-ctrl-desc-font-family: var(--wp--preset--font-family--ui);
	--gf-ctrl-desc-font-size: var(--wp--preset--font-size--sm);
	--gf-ctrl-desc-line-height: 1.45;
	--gf-ctrl-desc-color: var(--wp--preset--color--muted);
	--gf-ctrl-desc-color-error: var(--wp--preset--color--danger);
	--gf-ctrl-desc-font-weight-error: 600;

	--gf-ctrl-textarea-height: 11rem;
	--gf-ctrl-textarea-resize: vertical;
	--gf-ctrl-textarea-padding-y: 0.625rem;
	--gf-ctrl-textarea-radius: var(--hs-radius);

	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--ui);
	--gf-ctrl-btn-font-size-md: 1rem;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-size-md: 2.75rem;
	--gf-ctrl-btn-padding-x-md: 1.5rem;
	--gf-ctrl-btn-radius: var(--hs-radius);
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary-hover);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--primary-hover);
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--primary-hover);
	--gf-ctrl-btn-border-color-focus-primary: var(--wp--preset--color--primary-hover);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--on-primary);
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--on-primary);
	--gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--on-primary);

	--gf-form-gap-y: var(--wp--preset--spacing--md);
	--gf-form-footer-margin-y-start: var(--wp--preset--spacing--lg);
	--gf-form-validation-color: var(--wp--preset--color--danger);
	--gf-form-validation-font-family: var(--wp--preset--font-family--ui);
	--gf-form-validation-font-size: var(--wp--preset--font-size--sm);
	--gf-form-validation-bg-color: var(--wp--preset--color--surface);
	--gf-form-validation-border-color: var(--wp--preset--color--danger);

	margin-top: var(--wp--preset--spacing--xl);
	font-family: var(--wp--preset--font-family--ui);
}

/* The select's chevron. GF's own icon is a fixed-colour image, which would go
   invisible in dark mode, so it is drawn here from two gradients in a token
   colour instead. No vertical padding on a select: it clips the option text. */
.hs-single .gform_wrapper select {
	padding: 0 2.25rem 0 0.75rem;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted) 50%),
		linear-gradient(135deg, var(--wp--preset--color--muted) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

/* The submit button is sized by its content, not the column. */
.hs-single .gform_wrapper .gform_footer input[type="submit"] {
	width: auto;
}

/* Confirmation after a successful submission. */
.gform_confirmation_message {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--hs-radius) var(--hs-radius) 0;
	font-family: var(--wp--preset--font-family--ui);
	color: var(--wp--preset--color--contrast);
}