/**
 * Built file - do not edit. Generated from the sources listed below.
 *
 * The theme used to ship these as separate stylesheets. WordPress links the ones
 * it cannot inline, which meant ten render-blocking requests on a host that
 * answers in about a second over HTTP/1.1, and first paint took seven seconds.
 * One cached file costs a single round trip.
 *
 * Concatenated in cascade order: core-block overrides, custom-block styles,
 * theme.css, hero.css. Order matters - see the note at the top of the builder.
 */

/* ---- assets/css/blocks/button.css ---- */
/**
 * core/button style variations.
 */

.wp-block-button__link {
	transition: background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), transform 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	text-decoration: none;
}

.wp-block-button__link:hover {
	transform: translateY( -1px );
}

.wp-block-button.is-style-gc-ghost .wp-block-button__link {
	background: transparent;
	color: var( --wp--preset--color--contrast );
	border: 1px solid rgba( 9, 47, 56, 0.5 ); /* 3:1 on the surface band */
	box-shadow: none;
}

.wp-block-button.is-style-gc-ghost .wp-block-button__link:hover {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
	background: var( --wp--preset--color--primary-soft );
}

.wp-block-button.is-style-gc-on-dark .wp-block-button__link {
	background: #fff;
	color: var( --wp--preset--color--primary );
}

.wp-block-button.is-style-gc-on-dark .wp-block-button__link:hover {
	background: rgba( 255, 255, 255, 0.9 );
	color: var( --wp--preset--color--primary-hover );
}

.wp-block-button.is-style-gc-outline-light .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba( 255, 255, 255, 0.45 );
	box-shadow: none;
}

.wp-block-button.is-style-gc-outline-light .wp-block-button__link:hover {
	background: rgba( 255, 255, 255, 0.14 );
	border-color: rgba( 255, 255, 255, 0.75 );
	color: #fff;
}

/* Lime is retired: anything still set to it renders as the primary button. */

.wp-block-button.is-style-gc-lime .wp-block-button__link {
	background: var( --wp--preset--color--primary );
	color: #fff;
}

.wp-block-button.is-style-gc-lime .wp-block-button__link:hover {
	background: var( --wp--preset--color--primary-hover );
	color: #fff;
}

/* A button that reads as a link, with an arrow that steps forward on hover. */

.wp-block-button.is-style-gc-arrow .wp-block-button__link {
	background: transparent;
	color: var( --wp--preset--color--primary );
	padding-inline: 0;
	box-shadow: none;
	font-weight: 500;
}

.wp-block-button.is-style-gc-arrow .wp-block-button__link::after {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M14 6l6 6-6 6'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M14 6l6 6-6 6'/%3E%3C/svg%3E" );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-button.is-style-gc-arrow .wp-block-button__link:hover {
	transform: none;
	color: var( --wp--preset--color--primary-hover );
}

.wp-block-button.is-style-gc-arrow .wp-block-button__link:hover::after {
	transform: translateX( 3px );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-button__link,
	.wp-block-button.is-style-gc-arrow .wp-block-button__link::after {
		transition: none;
	}

	.wp-block-button__link:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 781px ) {
	/* The 1.5px border was added on top of identical padding: 46px beside 44px. */
	.wp-block-button.is-style-gc-outline-light .wp-block-button__link {
		padding-block: calc( 0.8125rem - 1.5px );
	}
}

/* The two buttons invert on their own inside a dark section, so a pattern never
   has to pick an on-dark variant. */

.gc-on-dark .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	background: #fff;
	color: var( --wp--preset--color--primary );
}

.gc-on-dark .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	background: rgba( 255, 255, 255, 0.9 );
	color: var( --wp--preset--color--primary-hover );
}

.gc-on-dark .wp-block-button.is-style-gc-ghost .wp-block-button__link {
	color: #fff;
	border-color: rgba( 255, 255, 255, 0.45 );
}

.gc-on-dark .wp-block-button.is-style-gc-ghost .wp-block-button__link:hover {
	background: rgba( 255, 255, 255, 0.14 );
	border-color: rgba( 255, 255, 255, 0.75 );
	color: #fff;
}

/* ---- assets/css/blocks/columns.css ---- */
/**
 * core/columns style variations.
 */

.wp-block-columns.is-style-gc-divided > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var( --wp--preset--color--line );
	padding-inline-start: var( --wp--preset--spacing--40 );
}

.gc-on-dark .wp-block-columns.is-style-gc-divided > .wp-block-column + .wp-block-column {
	border-inline-start-color: rgba( 255, 255, 255, 0.18 );
}

@media ( max-width: 781px ) {
	.wp-block-columns.is-style-gc-divided > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		padding-inline-start: 0;
		border-top: 1px solid var( --wp--preset--color--line );
		padding-top: var( --wp--preset--spacing--40 );
	}
}

/* Cards in a row end level with each other regardless of copy length. */

.wp-block-columns.is-style-gc-equalise > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.is-style-gc-equalise > .wp-block-column > * {
	flex: 1;
}

/* ---- assets/css/blocks/details.css ---- */
/**
 * core/details, the FAQ row.
 */

.wp-block-details {
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-details summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--contrast );
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	background-color: var( --wp--preset--color--ink-soft );
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E" );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: transform 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), background-color 200ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-details[open] summary::after {
	transform: rotate( 135deg );
	background-color: var( --wp--preset--color--primary );
}

.wp-block-details[open] {
	border-color: rgba( 3, 69, 79, 0.3 );
	box-shadow: var( --wp--preset--shadow--card );
}

.wp-block-details > :not(summary) {
	margin-top: 0.85rem;
	color: var( --wp--preset--color--ink-soft );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.65;
	max-width: 62ch;
}

/* Flat variation: rules instead of cards, for long FAQ pages. */

.wp-block-details.is-style-gc-faq-flat {
	border-width: 0 0 1px 0;
	border-radius: 0;
	background: transparent;
	padding-inline: 0;
	box-shadow: none;
}

.wp-block-details.is-style-gc-faq-flat[open] {
	box-shadow: none;
	border-color: var( --wp--preset--color--line );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-details,
	.wp-block-details summary::after {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 781px ) {
	/* The card's 24px padding sits on <details>; only <summary> toggles. Pull the summary out to the
		card edge: -24 margin + 24 padding = identical visuals, 75px hit area. */
	.wp-block-details > summary {
		margin: calc( -1 * var( --wp--preset--spacing--30 ) );
		padding: var( --wp--preset--spacing--30 );
		border-radius: inherit;
	}
	/* <details> is a flow container and <summary> its first child, so core's
		`:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }` (0,2,0) cancelled the top
		pull of the (0,1,1) rule above while the 24px top padding stayed: every closed row came out 24px
		top-heavy. (0,2,1) wins it back. */
	.wp-block-details > summary:first-child {
		margin-block-start: calc( -1 * var( --wp--preset--spacing--30 ) );
	}
	.wp-block-details[open] > summary {
		margin-block-end: 0;
		padding-block-end: 0; /* answer keeps its 0.85rem offset */
	}
	/* Flat variation has no inline padding to cancel. */
	.wp-block-details.is-style-gc-faq-flat > summary {
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* ---- assets/css/blocks/group.css ---- */
/**
 * core/group and core/column style variations.
 */

.wp-block-group.is-style-gc-card,
.wp-block-column.is-style-gc-card,
.wp-block-group.is-style-gc-card-hover,
.wp-block-column.is-style-gc-card-hover {
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
	padding: var( --wp--preset--spacing--40 );
	height: 100%;
}

.wp-block-group.is-style-gc-card-hover,
.wp-block-column.is-style-gc-card-hover {
	transition: transform 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), border-color 200ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-group.is-style-gc-card-hover:hover,
.wp-block-column.is-style-gc-card-hover:hover {
	border-color: rgba( 3, 69, 79, 0.32 );
}

.wp-block-group.is-style-gc-outline,
.wp-block-column.is-style-gc-outline {
	background: transparent;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
	padding: var( --wp--preset--spacing--40 );
	height: 100%;
}

.wp-block-group.is-style-gc-panel {
	background: var( --wp--preset--color--surface );
	border-radius: var( --wp--custom--radius--xl );
	padding: var( --wp--preset--spacing--50 );
}

/* Glass reads correctly only on a dark or image background. */

.wp-block-group.is-style-gc-glass {
	background: rgba( 255, 255, 255, 0.1 );
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: var( --wp--custom--radius--lg );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	padding: var( --wp--preset--spacing--40 );
	color: #fff;
	height: 100%;
}

.wp-block-group.is-style-gc-glass :where( h1, h2, h3, h4, h5, h6 ) {
	color: #fff;
}

.wp-block-group.is-style-gc-glass p {
	color: rgba( 255, 255, 255, 0.82 );
}

/* Backdrops: the dot-grid and grid-lines styles are retired. The classes stay
   valid in saved content and now draw nothing. */

.wp-block-group.is-style-gc-dot-grid,
.wp-block-group.is-style-gc-grid-lines {
	position: relative;
}

/* Backdrops: the dot-grid and grid-lines styles are retired. The classes stay
   valid in saved content and now draw nothing. */

.wp-block-group.is-style-gc-dot-grid,
.wp-block-group.is-style-gc-grid-lines {
	position: relative;
}

/* Sticky sidebar ---------------------------------------------------------- */

.wp-block-group.is-style-gc-sticky {
	position: sticky;
	top: calc( var( --wp--custom--header--height ) + 1.5rem );
}

@media ( max-width: 781px ) {
	.wp-block-group.is-style-gc-sticky {
		position: static;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-group.is-style-gc-card-hover,
	.wp-block-column.is-style-gc-card-hover {
		transition: none;
	}

	.wp-block-group.is-style-gc-card-hover:hover,
	.wp-block-column.is-style-gc-card-hover:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 600px ) {
	.wp-block-group.is-style-gc-card,
	.wp-block-column.is-style-gc-card,
	.wp-block-group.is-style-gc-card-hover,
	.wp-block-column.is-style-gc-card-hover,
	.wp-block-group.is-style-gc-outline,
	.wp-block-column.is-style-gc-outline,
	.wp-block-group.is-style-gc-glass {
		padding: var( --wp--preset--spacing--30 ); /* 32 -> 24: same inset as the query cards and FAQ rows */
	}
	.wp-block-group.is-style-gc-panel {
		padding: 1.75rem var( --wp--preset--spacing--30 ); /* 48 -> 28 / 24 */
	}
	/* Instances that carry padding inline (contact form card, tool-page panel). */
	.wp-block-group.is-style-gc-card[style*="padding"],
	.wp-block-group.is-style-gc-card-hover[style*="padding"] {
		padding: var( --wp--preset--spacing--30 ) !important;
	}
	.wp-block-group.is-style-gc-panel[style*="padding"] {
		padding: 1.75rem var( --wp--preset--spacing--30 ) !important;
	}
}

@media ( max-width: 781px ) {
	/* An arrow link that closes a card keeps its 44px hit area but stops adding 13px of invisible bottom padding. */
	:is(.is-style-gc-card, .is-style-gc-card-hover, .is-style-gc-outline) > .wp-block-buttons:last-child > .wp-block-button.is-style-gc-arrow {
		margin-bottom: -0.8125rem;
	}
}

/* ---- assets/css/blocks/image.css ---- */
/**
 * core/image style variations.
 */

.wp-block-image.is-style-gc-rounded img {
	border-radius: var( --wp--custom--radius--lg );
}

/* A product screenshot in a browser-ish frame: a hairline, a soft shadow and
   a light inner border so light UI screenshots don't bleed into the page. */

.wp-block-image.is-style-gc-screenshot img {
	border-radius: var( --wp--custom--radius--xl );
	border: 1px solid rgba( 9, 47, 56, 0.08 );
	box-shadow: var( --wp--preset--shadow--floating );
	background: var( --wp--preset--color--base );
}

.gc-on-dark .wp-block-image.is-style-gc-screenshot img {
	border-color: rgba( 255, 255, 255, 0.22 );
	box-shadow: 0 32px 70px -24px rgba( 0, 0, 0, 0.45 );
}

.wp-block-image.is-style-gc-float img {
	border-radius: var( --wp--custom--radius--lg );
	box-shadow: var( --wp--preset--shadow--raised );
}

/* Images inside cards fill the card's top edge cleanly. */

.is-style-gc-card > .wp-block-image:first-child img,
.is-style-gc-card-hover > .wp-block-image:first-child img {
	border-radius: var( --wp--custom--radius--md );
}

/* ---- assets/css/blocks/list.css ---- */
/**
 * core/list style variations.
 */

.wp-block-list.is-style-gc-check,
.wp-block-list.is-style-gc-cross,
.wp-block-list.is-style-gc-plain,
.wp-block-list.is-style-gc-steps {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.wp-block-list.is-style-gc-check > li,
.wp-block-list.is-style-gc-cross > li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.6rem;
	line-height: 1.55;
}

.wp-block-list.is-style-gc-check > li::before,
.wp-block-list.is-style-gc-cross > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.wp-block-list.is-style-gc-check > li::before {
	color: var( --wp--preset--color--primary );
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.4 12.3l2.4 2.4 4.8-5'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.4 12.3l2.4 2.4 4.8-5'/%3E%3C/svg%3E" );
}

.wp-block-list.is-style-gc-cross > li::before {
	color: var( --wp--preset--color--ink-faint );
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.8 9.2l-5.6 5.6'/%3E%3Cpath d='M9.2 9.2l5.6 5.6'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.8 9.2l-5.6 5.6'/%3E%3Cpath d='M9.2 9.2l5.6 5.6'/%3E%3C/svg%3E" );
}

/* On dark sections the check is white. */

.gc-on-dark .wp-block-list.is-style-gc-check > li::before {
	color: #fff;
}

/* Numbered steps ---------------------------------------------------------- */

.wp-block-list.is-style-gc-steps {
	counter-reset: gc-step;
}

.wp-block-list.is-style-gc-steps > li {
	counter-increment: gc-step;
	position: relative;
	padding-left: 3rem;
	margin-bottom: 1.35rem;
	line-height: 1.6;
}

.wp-block-list.is-style-gc-steps > li::before {
	content: counter( gc-step );
	position: absolute;
	left: 0;
	top: -0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var( --wp--preset--color--primary-soft );
	color: var( --wp--preset--color--primary );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1;
}

.gc-on-dark .wp-block-list.is-style-gc-steps > li::before {
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 781px ) {
	/* Panels and plan cards were ~10px bottom-heavy. */
	.wp-block-list.is-style-gc-check > li:last-child,
	.wp-block-list.is-style-gc-cross > li:last-child,
	.wp-block-list.is-style-gc-steps > li:last-child {
		margin-bottom: 0;
	}
}
@media ( max-width: 600px ) {
	/* Step description read as heavy as its own title (17px, full ink). Match the 15px soft card copy around it. */
	.wp-block-list.is-style-gc-steps > li {
		font-size: var( --wp--preset--font-size--small );
		line-height: 1.55;
		color: var( --wp--preset--color--ink-soft );
	}
	.wp-block-list.is-style-gc-steps > li > strong {
		font-size: var( --wp--preset--font-size--medium );
		color: var( --wp--preset--color--contrast );
	}
	.gc-on-dark .wp-block-list.is-style-gc-steps > li,
	.gc-on-dark .wp-block-list.is-style-gc-steps > li > strong {
		color: inherit;
	}
}

/* ---- assets/css/blocks/navigation.css ---- */
/**
 * core/navigation, desktop dropdowns, mega panels and the mobile overlay.
 *
 * Core's stylesheet collapses a closed submenu to width:0/height:0 and sets
 * min-width:200px again inside its own :hover rule, so every sizing rule here
 * has to live in matching open-state selectors with higher specificity, a
 * base-state min-width silently loses. Desktop rules are prefixed with
 * `.wp-block-navigation__responsive-container:not(.is-menu-open)` so none of
 * them leak into the mobile overlay, where hover never happens and a
 * hover-driven reveal would leave items invisible.
 */

/* -------------------------------------------------------------------------
   1. Top-level links, animated underline, Lexend-style
   ---------------------------------------------------------------------- */

.gc-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	transition: color 160ms cubic-bezier( 0.4, 0, 0.2, 1 );
	text-decoration: none;
}

.gc-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0.1rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.85;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 240ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-header .wp-block-navigation > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.gc-header .wp-block-navigation > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after,
.gc-header .wp-block-navigation > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX( 1 );
}

/* The dropdown chevron turns as the panel opens. */

.gc-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	transition: transform 200ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-icon,
.gc-header .wp-block-navigation .has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.gc-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-icon {
	transform: rotate( 180deg );
}

/* -------------------------------------------------------------------------
   2. Desktop dropdown panel
   ---------------------------------------------------------------------- */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	/* Closed state: kept in the layout (core zeroes the box) but faded and
	   dropped a few pixels, so opening reads as a rise-and-fade-in. */
	left: 50%;
	top: 100%;
	margin-top: 0.75rem;
	opacity: 0;
	visibility: hidden;
	transform: translateX( -50% ) translateY( 12px );
	transition:
		opacity 220ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 220ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		visibility 220ms;

	padding: 0.5rem;
	background: #fff;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
	box-shadow: 0 2px 6px rgba( 4, 47, 54, 0.06 ), 0 30px 70px -24px rgba( 4, 47, 54, 0.35 );
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.25rem;
}

/* An invisible bridge over the visual gap, so the pointer can travel from the
   link down into the panel without the hover chain breaking. */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.85rem;
	height: 0.85rem;
}

/* Open states, hover and keyboard focus. Width must be restated here because
   core sets its own inside the matching rules. */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):not(.content-only):focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	transform: translateX( -50% ) translateY( 0 );
	width: max-content;
	min-width: 34rem;
	max-width: min( 40rem, calc( 100vw - 3rem ) );
	height: auto;
	overflow: visible;
}

/* Panels whose links carry no description (Resources, Company) drop to a
   single tidy column. Browsers without :has() just keep the two-column grid. */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container:not(:has(.wp-block-navigation-item__description)) {
	grid-template-columns: minmax( 0, 1fr );
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container:not(:has(.wp-block-navigation-item__description)),
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):not(.content-only):focus-within > .wp-block-navigation__submenu-container:not(:has(.wp-block-navigation-item__description)) {
	min-width: 15rem;
}

/* -------------------------------------------------------------------------
   3. Items inside the panel
   ---------------------------------------------------------------------- */

/* High specificity on purpose: the transparent-header treatment paints nav
   links white, and these sit on a white panel. */

.gc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.7rem 0.85rem;
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--contrast );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	transition:
		background-color 150ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		color 150ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		transform 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.gc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var( --wp--preset--color--primary-soft );
	color: var( --wp--preset--color--primary );
	transform: translateX( 3px );
	text-decoration: none;
}

.gc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: block;
	margin-top: 0.2rem;
	color: var( --wp--preset--color--ink-soft );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
	transition: color 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__description {
	color: var( --wp--preset--color--primary );
	opacity: 0.75;
}

/* Items cascade in with a short stagger once the panel opens. */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	opacity: 0;
	transform: translateY( 6px );
	transition:
		opacity 260ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 260ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):not(.content-only):focus-within > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	opacity: 1;
	transform: translateY( 0 );
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(1) { transition-delay: 30ms; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2) { transition-delay: 60ms; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3) { transition-delay: 90ms; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(4) { transition-delay: 120ms; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(5) { transition-delay: 150ms; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(6) { transition-delay: 180ms; }

/* -------------------------------------------------------------------------
   4. Mobile overlay
   ---------------------------------------------------------------------- */

/* The overlay is `position: fixed; inset: 0` - but it lives inside the header,
   and the scrolled header carries a backdrop-filter. A backdrop-filter makes an
   element the containing block for its fixed descendants, so once the page had
   scrolled "the whole screen" meant "the size of the bar": the menu opened as a
   179px strip with the page showing underneath. The filter comes off while the
   menu is open; the overlay covers the bar anyway. */

html.has-modal-open .gc-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open {
	/* Core centres the overlay because the desktop menu is centre-justified. A
	   list read top to bottom on a phone wants a left edge. */
	--navigation-layout-justification-setting: flex-start;
	padding: 0 var( --wp--style--root--padding-left ) 8rem;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	/* Core hands the block's 1.75rem blockGap down to the overlay, and the sticky strip is a flex
	   item - so the gap landed between the strip and the list. */
	row-gap: 0;
	/* `backwards`, not `both`. `both` keeps the finished animation in effect for ever, and an element
	   with a transform animation in effect is the containing block of its fixed descendants - so the
	   close button was fixed to the scrolling overlay, not the screen, and left with the list. The
	   same trap as the backdrop-filter above, one element further in. With no delay the two look
	   identical. */
	animation: gc-nav-overlay-in 260ms cubic-bezier( 0.16, 1, 0.3, 1 ) backwards;
}

@keyframes gc-nav-overlay-in {
	from {
		opacity: 0;
		transform: translateY( -10px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* A strip that stays put while the list scrolls under it, so nothing ever
   slides beneath the lockup or the close button. */

.gc-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: sticky;
	top: 0;
	z-index: 3;
	flex: 0 0 auto;
	display: block;
	/* The bar itself - its padding plus the 44px button - with the hairline outside the height, as
	   the bar's is. 4.25rem was the clearance token, a few pixels short, so the rule jumped as the
	   menu opened. */
	box-sizing: content-box;
	height: calc( 2 * 0.85rem + 2.75rem );
	margin-inline: calc( -1 * var( --wp--style--root--padding-left ) );
	background: var( --wp--preset--color--base );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	/* Core flexes only the OPEN button; as a block the centring set on both buttons is inert and
	   the glyph hugged the left of its 44px box, 10px off the hamburger it replaces. */
	display: flex;
	top: 0.85rem;
	right: calc( var( --wp--style--root--padding-right ) - 0.6rem );
	z-index: 3;
	color: var( --wp--preset--color--contrast );
}

/* The lockup shows through on the strip, always in its light-ground colours. */

html.has-modal-open .gc-header .wp-block-site-logo {
	position: relative;
	z-index: 100001;
}

html.has-modal-open .gc-header.is-over-dark .gc-logo--dark {
	display: inline;
}

html.has-modal-open .gc-header.is-over-dark .gc-logo--light {
	display: none;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0.5rem;
	gap: 0;
}

/* Core re-declares its justification variable on the inner list as well as on
   the block, so overriding it on the overlay alone leaves every item centred. */

.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	width: 100%;
	gap: 0;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	padding-block: 0.6rem;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid var( --wp--preset--color--line );
}

/* Links: one size, one colour, a full-width row tall enough to hit. The header
   inverts its links over a dark band, and the overlay is inside the header -
   so without the explicit colour the list was white on white when the menu was
   opened at the top of the homepage. */

html .gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.7rem 0;
	color: var( --wp--preset--color--contrast );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
}

html .gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* The four top-level groups point at "#": they are labels for the lists under
   them, not destinations. */

html .gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	padding: 0.5rem 0 0.15rem;
	color: var( --wp--preset--color--ink-faint );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Core's own overlay rule for a submenu is five classes deep - 2rem of side
   padding, width:auto, min-width:200px - which shrink-wrapped each list and
   left it floating in the middle. It has to be matched at the same depth. */

html .gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	z-index: auto; /* core's z-index:2 made the list paint over the sticky logo strip */
	margin: 0;
	padding: 0;
	gap: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

html .gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.7rem 0;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__description,
.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* Both buttons, pinned under the list. They sit outside the navigation block,
   so they cannot be moved into the overlay - they are lifted over it instead. */

@media ( max-width: 1099px ) {
	html.has-modal-open .gc-header > .wp-block-group > .wp-block-buttons {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 100001;
		display: flex;
		flex-wrap: nowrap;
		gap: 0.75rem;
		padding: 0.85rem var( --wp--style--root--padding-left ) calc( 0.85rem + env( safe-area-inset-bottom, 0px ) );
		background: var( --wp--preset--color--base );
		border-top: 1px solid var( --wp--preset--color--line );
	}

	html.has-modal-open .gc-header > .wp-block-group > .wp-block-buttons > .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	html.has-modal-open .gc-header > .wp-block-group > .wp-block-buttons .wp-block-button__link {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 0.9rem 1rem;
		font-size: var( --wp--preset--font-size--small );
	}

	/* Opened over a dark band the bar's buttons are inverted; on the white panel
	   they go back to their ordinary colours. */

	html.has-modal-open .gc-header.is-over-dark .wp-block-button:not(.is-style-gc-ghost) .wp-block-button__link {
		background-color: var( --wp--preset--color--primary );
		color: var( --wp--preset--color--base );
		box-shadow: none;
	}

	html.has-modal-open .gc-header .wp-block-button.is-style-gc-ghost .wp-block-button__link {
		color: var( --wp--preset--color--contrast );
		border-color: var( --wp--preset--color--line );
	}
}

/* Two columns of groups once there is width for them. */

@media ( min-width: 600px ) and ( max-width: 1099px ) {
	.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: var( --wp--preset--spacing--50 );
		align-items: start;
	}

	.gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
		border-top: 0;
	}
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: currentColor;
}

/* -------------------------------------------------------------------------
   5. Reduced motion
   ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.gc-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
	.gc-header .wp-block-navigation .wp-block-navigation__submenu-icon,
	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item,
	.gc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		transition: none;
		animation: none;
	}

	/* Needs the header prefix: at (0,2,0) it lost to the (0,3,0) rule that sets the animation. */
	.gc-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   6. Mega panel (inc/mega-menu.php) - Resources
   ---------------------------------------------------------------------- */

/* Desktop: three columns, each a small heading over icon + label links. The
   selectors repeat the dropdown's own prefix so they out-rank the generic
   panel rules above (including the one-column fallback for panels without
   descriptions). */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child > .wp-block-navigation__submenu-container.gc-mega {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0 2rem;
	padding: 1.5rem 1.75rem 1.25rem;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container.gc-mega,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child:not(.open-on-click):not(.content-only):focus-within > .wp-block-navigation__submenu-container.gc-mega,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container.gc-mega {
	min-width: 54rem;
	max-width: min( 58rem, calc( 100vw - 3rem ) );
}

.gc-mega__col {
	display: block;
	min-width: 0;
}

.gc-mega__heading {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0 0.85rem 0.7rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--contrast );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.2;
}

.gc-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container.gc-mega .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	font-weight: 500;
	white-space: nowrap;
}

.gc-mega__icon {
	display: inline-flex;
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	color: var( --wp--preset--color--primary );
}

.gc-mega__icon svg {
	width: 100%;
	height: 100%;
}

/* Phone / tablet overlay: the three groups stack under the Resources label,
   each with its own small heading; icons stay. */

html .gc-header .wp-block-navigation__responsive-container.is-menu-open .gc-mega {
	display: block;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .gc-mega__col {
	width: 100%;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .gc-mega__heading {
	display: block;
	padding: 0.85rem 0 0.25rem;
	color: var( --wp--preset--color--ink-faint );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gc-header .wp-block-navigation__responsive-container.is-menu-open .gc-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

html .gc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .gc-mega .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ---- assets/css/blocks/post-terms.css ---- */
/**
 * core/post-terms, pills.
 */

.wp-block-post-terms.is-style-gc-pills a {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	margin: 0 0.3rem 0.3rem 0;
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--primary-soft );
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	text-decoration: none;
	transition: background-color 160ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-post-terms.is-style-gc-pills a:hover {
	background: var( --wp--preset--color--primary );
	color: #fff;
	text-decoration: none;
}

.wp-block-post-terms.is-style-gc-pills .wp-block-post-terms__separator {
	display: none;
}

/* ---- assets/css/blocks/quote.css ---- */
/**
 * core/quote, the testimonial card.
 */

.wp-block-quote.is-style-gc-testimonial {
	border: 1px solid var( --wp--preset--color--line );
	border-left-width: 1px;
	border-radius: var( --wp--custom--radius--lg );
	background: var( --wp--preset--color--base );
	padding: var( --wp--preset--spacing--40 );
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.wp-block-quote.is-style-gc-testimonial p {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	font-style: normal;
	line-height: 1.6;
	color: var( --wp--preset--color--contrast );
}

.wp-block-quote.is-style-gc-testimonial p::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	margin-bottom: 0.75rem;
	background-color: var( --wp--preset--color--primary );
	opacity: 0.35;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9.5 5C6.5 6.6 4.6 9.4 4.6 12.8c0 3.4 2 5.7 4.6 5.7 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.3-3.5-.4 0-.8 0-1.1.2.4-1.7 1.8-3.3 3.6-4.3L9.5 5zm9 0c-3 1.6-4.9 4.4-4.9 7.8 0 3.4 2 5.7 4.6 5.7 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.3-3.5-.4 0-.8 0-1.1.2.4-1.7 1.8-3.3 3.6-4.3L18.5 5z'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9.5 5C6.5 6.6 4.6 9.4 4.6 12.8c0 3.4 2 5.7 4.6 5.7 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.3-3.5-.4 0-.8 0-1.1.2.4-1.7 1.8-3.3 3.6-4.3L9.5 5zm9 0c-3 1.6-4.9 4.4-4.9 7.8 0 3.4 2 5.7 4.6 5.7 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.3-3.5-.4 0-.8 0-1.1.2.4-1.7 1.8-3.3 3.6-4.3L18.5 5z'/%3E%3C/svg%3E" );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.wp-block-quote.is-style-gc-testimonial cite {
	margin-top: auto;
	padding-top: 0.5rem;
	font-style: normal;
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --wp--preset--color--ink-soft );
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 600px ) {
	.wp-block-quote.is-style-gc-testimonial {
		padding: var( --wp--preset--spacing--30 ); /* 32 -> 24: attribution lines stop wrapping */
	}
}

/* ---- assets/css/blocks/search.css ---- */
/**
 * core/search, the pill field used in the help centre and docs.
 */

.wp-block-search.is-style-gc-pill .wp-block-search__inside-wrapper {
	padding: 0.3rem;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md );
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-search.is-style-gc-pill .wp-block-search__inside-wrapper:focus-within {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 3, 69, 79, 0.14 );
}

.wp-block-search.is-style-gc-pill .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.6rem 1.1rem;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--contrast );
}

.wp-block-search.is-style-gc-pill .wp-block-search__input:focus {
	outline: none;
}

.wp-block-search.is-style-gc-pill .wp-block-search__button {
	margin: 0;
	border: 0;
	border-radius: var( --wp--custom--radius--md );
	background: var( --wp--preset--color--primary );
	color: #fff;
	padding: 0.6rem 1.4rem;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	cursor: pointer;
	transition: background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-search.is-style-gc-pill .wp-block-search__button:hover {
	background: var( --wp--preset--color--primary-hover );
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 600px ) {
	.wp-block-search.is-style-gc-pill .wp-block-search__input {
		min-width: 0;
		padding: 0.6rem 0.25rem 0.6rem 0.9rem;
		text-overflow: ellipsis;
	}
	.wp-block-search.is-style-gc-pill .wp-block-search__input::placeholder {
		font-size: 0.9375rem;
	}
	.wp-block-search.is-style-gc-pill .wp-block-search__button {
		padding: 0.6rem 1.1rem;
		min-height: 2.75rem;
	}
}

/* ---- assets/css/blocks/table.css ---- */
/**
 * core/table, the comparison table.
 */

.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.wp-block-table.is-style-gc-compare {
	overflow-x: auto;
}

.wp-block-table.is-style-gc-compare table {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
	overflow: hidden;
	background: var( --wp--preset--color--base );
}

.wp-block-table.is-style-gc-compare th,
.wp-block-table.is-style-gc-compare td {
	padding: 0.95rem 1.15rem;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--line );
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}

.wp-block-table.is-style-gc-compare thead th {
	background: var( --wp--preset--color--surface );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--contrast );
	white-space: nowrap;
}

.wp-block-table.is-style-gc-compare tbody tr:last-child th,
.wp-block-table.is-style-gc-compare tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-gc-compare tbody tr:hover td,
.wp-block-table.is-style-gc-compare tbody tr:hover th {
	background: var( --wp--preset--color--surface );
}

/* The first column is the row label. */

.wp-block-table.is-style-gc-compare tbody th:first-child,
.wp-block-table.is-style-gc-compare tbody td:first-child {
	font-weight: 500;
	color: var( --wp--preset--color--contrast );
}

/* A "yes" cell is just the word, style it as a tick without extra markup. */

.wp-block-table.is-style-gc-compare td:not(:first-child) {
	color: var( --wp--preset--color--ink-soft );
	font-size: var( --wp--preset--font-size--small );
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 600px ) {
	.wp-block-table.is-style-gc-compare th,
	.wp-block-table.is-style-gc-compare td {
		padding: 0.8rem 0.7rem;
		overflow-wrap: break-word;
	}
	.wp-block-table.is-style-gc-compare thead th {
		white-space: normal; /* 'The alternative' forced a 141px column */
		font-size: 0.875rem;
		line-height: 1.3;
		vertical-align: bottom;
	}
	/* Label column matches the 15px value columns so it stops wrapping to 3 lines. */
	.wp-block-table.is-style-gc-compare tbody th:first-child,
	.wp-block-table.is-style-gc-compare tbody td:first-child {
		font-size: var( --wp--preset--font-size--small );
	}
}
/* overflow-x: auto on the figure stays as the safety net for wider editor-made tables. */

/* ---- blocks/compare-table/style.css ---- */
/**
 * grantcookie/compare-table, the full plan comparison matrix.
 */

/* `clip` rather than `hidden`: both round off the corners, but `hidden` makes
   the card a scroll container, and a sticky table head then resolves its offset
   against the card instead of the page. */

.gc-compare {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--xl );
	background: var( --wp--preset--color--base );
	overflow: clip;
}

/* Four columns of prose do not fit a phone. The table keeps its shape and the
   card scrolls, which stays readable where a reflowed table does not. The
   region is focusable so it can also be scrolled from the keyboard.

   Above the width where the table fits, the scroller is switched off entirely.
   A horizontal scroller is a scrollport on BOTH axes, so a sticky head inside
   one is pushed down by its own `top` value and covers the first row, which is
   exactly what it did. */

.gc-compare__scroll {
	/* Positioned, so it is the containing block for the visually-hidden "Yes" and
	   "No" labels in the cells. Those are `position: absolute`, and an absolute
	   box is only clipped by a scroller that contains its containing block. Left
	   static, they escaped the scroller, sat at x=659 in the document, and a phone
	   zoomed the entire pricing page out to 660px to fit them. */
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media ( min-width: 60rem ) {
	.gc-compare__scroll {
		overflow: visible;
	}
}

.gc-compare__scroll:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: -2px;
}

.gc-compare__table {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var( --wp--preset--font-size--small );
}

/* The feature column carries the reading weight, so it takes the space the
   plan columns do not need. */

.gc-compare__table th:first-child {
	width: 34%;
}

.gc-compare__table thead th:not(:first-child),
.gc-compare__table td {
	width: calc( 66% / var( --gc-compare-columns, 3 ) );
	text-align: center;
}

/* ---- Head ---------------------------------------------------------------- */

.gc-compare__table thead th {
	padding: var( --wp--preset--spacing--40 ) 1rem 1.15rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
	background: var( --wp--preset--color--base );
	vertical-align: bottom;
}

/* Offset by the site header so the plan names park below it rather than
   underneath it once the page is scrolled. Only where the scroller is off, 
   see the note above. */

@media ( min-width: 60rem ) {
	.gc-compare.is-sticky thead th {
		position: sticky;
		/* The token is the clearance heroes reserve, which rounds a little under
		   the bar's real height, fine for a hero, six pixels of overlap here. */
		top: calc( var( --wp--custom--header--height ) + 0.75rem );
		z-index: 2;
		box-shadow: 0 1px 0 var( --wp--preset--color--line );
	}
}

.gc-compare__table thead th.is-highlight {
	color: var( --wp--preset--color--primary );
}

/* ---- Group rows ---------------------------------------------------------- */

.gc-compare__group th {
	padding: 0.85rem var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--surface-alt );
	text-align: left;
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
	border-block: 1px solid var( --wp--preset--color--line );
}

/* ---- Feature rows -------------------------------------------------------- */

.gc-compare__table tbody tr:not(.gc-compare__group) th,
.gc-compare__table tbody td {
	padding: 0.95rem 1rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
	vertical-align: middle;
}

.gc-compare__table tbody tr:not(.gc-compare__group) th {
	padding-inline: var( --wp--preset--spacing--40 );
	text-align: left;
	font-weight: 500;
	color: var( --wp--preset--color--contrast );
}

.gc-compare__table tbody td {
	color: var( --wp--preset--color--ink-soft );
}

.gc-compare__table tbody tr:not(.gc-compare__group):hover td,
.gc-compare__table tbody tr:not(.gc-compare__group):hover th {
	background: var( --wp--preset--color--surface );
}

.gc-compare__table tbody tr:last-child th,
.gc-compare__table tbody tr:last-child td {
	border-bottom: 0;
}

/* A faint tint down the recommended plan, so the eye can follow one column
   without a heavy border cutting the table into pieces. */

.gc-compare__table td.is-highlight {
	background: color-mix( in srgb, var( --wp--preset--color--primary-soft ) 55%, transparent );
}

.gc-compare__table tbody tr:not(.gc-compare__group):hover td.is-highlight {
	background: var( --wp--preset--color--primary-soft );
}

/* ---- Cell marks ---------------------------------------------------------- */

.gc-compare__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	color: var( --wp--preset--color--primary );
}

.gc-compare__tick svg {
	width: 1.25rem;
	height: 1.25rem;
}

.gc-compare__dash {
	display: inline-block;
	width: 0.85rem;
	height: 2px;
	border-radius: 1px;
	background: var( --wp--preset--color--line );
	vertical-align: middle;
}

/* ---- Info hint ----------------------------------------------------------- */

.gc-compare__info {
	display: inline-flex;
	margin-inline-start: 0.35rem;
	color: var( --wp--preset--color--ink-faint );
	vertical-align: -0.15em;
	cursor: help;
}

.gc-compare__info:hover,
.gc-compare__info:focus-visible {
	color: var( --wp--preset--color--primary );
}

.gc-compare__info svg {
	width: 0.9rem;
	height: 0.9rem;
}

@media ( max-width: 781px ) {
	.gc-compare__table {
		min-width: 30rem; /* was 44rem: 152px labels + 3 x ~109px */
	}
	.gc-compare__table th:first-child {
		width: 9.5rem; /* was 34% = 239px */
	}
	.gc-compare__table thead th:not(:first-child),
	.gc-compare__table td {
		width: auto; /* table-layout: fixed shares the remainder equally */
		padding-inline: 0.5rem;
	}
	.gc-compare__table thead th {
		font-size: var( --wp--preset--font-size--small );
		padding-top: 1.25rem;
		padding-bottom: 0.85rem;
	}
	/* A cell of a border-collapse table paints no outer box-shadow, and a collapsed border does not
		travel with a sticky cell - so the divider never painted, and the hairline redrawn as an inset
		shadow doubled the real one. Separate borders with no spacing look the same and do both. */
	.gc-compare__table {
		border-collapse: separate;
		border-spacing: 0;
	}
	.gc-compare__table thead th {
		border-bottom: 1px solid var( --wp--preset--color--line );
	}
	.gc-compare__group th {
		border-top: 0; /* the row above already draws this line; collapse used to merge the two */
	}
	/* Row labels stay in view while the plans scroll underneath. */
	.gc-compare__table thead th:first-child,
	.gc-compare__table tbody tr:not(.gc-compare__group) th,
	.gc-compare__table tbody tr:last-child th {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var( --wp--preset--color--base );
		border-right: 1px solid var( --wp--preset--color--line );
		box-shadow: 6px 0 10px -8px rgba( 4, 47, 54, 0.25 );
	}
	.gc-compare__table tbody tr:not(.gc-compare__group) th {
		padding-inline: 1rem 0.5rem;
		font-size: 0.875rem;
		line-height: 1.35;
	}
	.gc-compare__group th {
		padding-inline: 1rem;
	}
	/* A group heading spans every column, so it cannot be a sticky cell - the cell is as wide as
		the table. The label inside it can be: it holds the scroller's left edge while the plans
		move, instead of sliding off as "pliance" and "ing". */
	.gc-compare__group-label {
		position: sticky;
		left: 1rem;
		display: inline-block;
	}
}

/* A scroll container still refuses to shrink below its content unless its
   automatic minimum size is released. Without this the table's 44rem min-width
   pushed the whole page sideways on a phone, 284px of horizontal overflow on
   /pricing/ at 390px, instead of scrolling inside its own card. */

.gc-compare,
.gc-compare__scroll {
	min-width: 0;
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( hover: none ) {
	/* 14px icon -> 38px hit area; the icon does not move. */
	.gc-compare__info {
		padding: 0.75rem;
		margin: -0.75rem -0.75rem -0.75rem -0.4rem;
	}
	/* (0,3,3): at (0,2,2) this lost to the sticky rule's `z-index: 1`, so every later row's pinned
		label painted over the open tip. */
	.gc-compare__table tbody tr:not(.gc-compare__group) th:focus-within {
		z-index: 3;
	}
	/* The span is focusable: show its title on tap. Anchored to the label cell (sticky = positioned
		on phones), so it opens from the card's left edge and cannot run off-screen. */
	.gc-compare__info:focus::after {
		content: attr( title );
		position: absolute;
		left: 1rem;
		top: calc( 100% - 0.35rem );
		z-index: 3;
		width: min( 15rem, 72vw );
		padding: 0.6rem 0.75rem;
		border-radius: var( --wp--custom--radius--sm );
		background: var( --wp--preset--color--contrast );
		color: #fff;
		font-family: var( --wp--preset--font-family--body );
		font-size: var( --wp--preset--font-size--x-small );
		font-weight: 400;
		line-height: 1.45;
		letter-spacing: 0;
		text-align: left;
		white-space: normal;
		box-shadow: var( --wp--preset--shadow--raised );
	}
	/* Last rows open upwards so the tip does not add a vertical scrollbar to the scroller. */
	.gc-compare__table tbody tr:nth-last-child(-n + 2) .gc-compare__info:focus::after {
		top: auto;
		bottom: calc( 100% - 0.35rem );
	}
}
@media ( hover: none ) and ( min-width: 782px ) {
	/* Touch tablets: the label cell is not sticky there, so give the tip a containing block. */
	.gc-compare__table tbody tr:not(.gc-compare__group) th {
		position: relative;
	}
}

/* Phones: the table is wider than the screen, so say so and fade the cut edge. */

@media ( max-width: 781px ) {
	.gc-compare__scroll::before {
		content: "Swipe sideways to see every plan \2192";
		display: block;
		margin-bottom: 0.5rem;
		color: var( --wp--preset--color--ink-soft );
		font-size: var( --wp--preset--font-size--x-small );
	}
	.gc-compare__scroll::after {
		content: "";
		position: sticky;
		left: calc( 100% - 2.5rem );
		display: block;
		width: 2.5rem;
		height: 100%;
		margin-top: -100%;
		pointer-events: none;
		background: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ), #fff );
	}
}

/* ---- blocks/icon/style.css ---- */
/**
 * grantcookie/icon, shared editor + front-end styles.
 */

.gc-icon-block {
	--gc-icon-size: 22px;
	--gc-icon-tile: calc( var( --gc-icon-size ) * 2.05 );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	line-height: 0;
	color: var( --wp--preset--color--primary );
	transition: transform 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-icon-block .gc-icon {
	width: var( --gc-icon-size );
	height: var( --gc-icon-size );
	display: block;
}



/* Tiles are retired: a tile-shaped icon now renders bare, slightly larger. */

.gc-icon-block.is-shape-tile {
	--gc-icon-size: 26px;
	background: none;
	padding: 0;
}

.gc-icon-block.is-shape-circle,
.gc-icon-block.is-shape-squircle {
	--gc-icon-size: 26px;
	background: none;
	padding: 0;
}

.gc-icon-block.is-shape-bare {
	background: none;
	padding: 0;
}

/* Alignment --------------------------------------------------------------- */

.gc-icon-block.aligncenter {
	display: flex;
	margin-inline: auto;
}

.gc-icon-block.alignright {
	display: flex;
	margin-inline-start: auto;
}

/* On dark sections the tile switches to a translucent wash so it reads as
   part of the surface rather than a pasted-on white square. */

.gc-on-dark .gc-icon-block:where(.is-shape-tile, .is-shape-circle, .is-shape-squircle):not([class*="-background-color"]) {
	background-color: rgba( 255, 255, 255, 0.14 );
	color: #fff;
}

/* A card that lifts on hover carries its icon with it. */

.is-style-gc-card-hover:hover .gc-icon-block:where(.is-shape-tile, .is-shape-circle, .is-shape-squircle) {
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.gc-icon-block {
		transition: none;
	}
}

/* Editor picker ----------------------------------------------------------- */

.gc-icon-picker {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 4px;
	margin-top: 8px;
	max-height: 320px;
	overflow-y: auto;
	padding: 4px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.gc-icon-picker__item.components-button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	width: 100%;
	min-width: 0;
	padding: 0;
	border-radius: 4px;
	color: #1e1e1e;
}

.gc-icon-picker__item.components-button:hover {
	background: #f0f0f0;
}

.gc-icon-picker__item.is-selected.components-button {
	background: var( --wp--preset--color--primary, #03454f );
	color: #fff;
}

.gc-icon-picker__empty {
	grid-column: 1 / -1;
	margin: 8px;
	color: #757575;
	font-size: 12px;
}

/* ---- blocks/logo-strip/style.css ---- */
/**
 * grantcookie/logo-strip, shared editor + front-end styles.
 */

.gc-logos {
	--gc-logo-duration: 36s;
	--gc-logo-height: 28px;
	--gc-logo-gap: clamp( 2rem, 5vw, 4rem );
}

.gc-logos__viewport {
	display: flex;
	gap: var( --gc-logo-gap );
	overflow: hidden;
	/* Fade the logos out at both edges so the loop has no hard seam. */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
}

.gc-logos__track {
	display: flex;
	align-items: center;
	gap: var( --gc-logo-gap );
	flex: none;
}

.gc-logos__track > * {
	margin: 0;
	flex: none;
}

.gc-logos__track img {
	display: block;
	height: var( --gc-logo-height );
	width: auto;
	max-width: none;
	object-fit: contain;
}

.gc-logos__track p {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	opacity: 0.65;
}

/* Logos ------------------------------------------------------------------ */

/* Each logo carries its own multiplier (--gc-logo-k, set by render.php) so that a
   wide wordmark and a compact one read at the same visual size. The block's own
   height is the base, and phones take it down a step. */

.gc-logos {
	--gc-logo-scale: 1;
}

.gc-logos__track .gc-logos__logo {
	height: calc( var( --gc-logo-height ) * var( --gc-logo-k, 1 ) * var( --gc-logo-scale ) );
	width: auto;
}

@media ( max-width: 781px ) {
	.gc-logos {
		--gc-logo-scale: 0.84;
		--gc-logo-gap: 2.25rem;
	}
}

/* Muted treatment --------------------------------------------------------- */

.gc-logos.is-grayscale .gc-logos__track img {
	filter: grayscale( 1 );
	opacity: 0.6;
	transition: filter 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-logos.is-grayscale .gc-logos__track img:hover {
	filter: grayscale( 0 );
	opacity: 1;
}

/* Motion ------------------------------------------------------------------ */

.gc-logos.is-animated .gc-logos__track {
	animation: gc-logo-scroll var( --gc-logo-duration ) linear infinite;
}

.gc-logos.is-animated:hover .gc-logos__track {
	animation-play-state: paused;
}

@keyframes gc-logo-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		/* The gap between the two tracks is part of the distance travelled. */
		transform: translateX( calc( -100% - var( --gc-logo-gap ) ) );
	}
}

/* Static fallback: wrap instead of scroll. */

.gc-logos:not(.is-animated) .gc-logos__viewport {
	-webkit-mask-image: none;
	mask-image: none;
}

.gc-logos:not(.is-animated) .gc-logos__track {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 1.5rem;
	width: 100%;
}

@media ( prefers-reduced-motion: reduce ) {
	.gc-logos.is-animated .gc-logos__track {
		animation: none;
	}

	.gc-logos.is-animated .gc-logos__viewport {
		flex-wrap: wrap;
		justify-content: center;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* The duplicate row exists only to make the loop seamless. */
	.gc-logos.is-animated .gc-logos__track[aria-hidden="true"] {
		display: none;
	}
}

/* Editor: the track must wrap, or the canvas scrolls sideways forever. */

.gc-logos__viewport.is-editing {
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.gc-logos__viewport.is-editing .gc-logos__track {
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( prefers-reduced-motion: reduce ) and ( max-width: 781px ) {
	.gc-logos.is-animated .gc-logos__track {
		flex: 1 1 100%;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.75rem;
	}
}

/* ---- blocks/pricing-plan/style.css ---- */
/**
 * grantcookie/pricing-plan, shared editor + front-end styles.
 */

.gc-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--xl );
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-plan:hover {
	border-color: rgba( 3, 69, 79, 0.35 );
}

.gc-plan.is-featured {
	border-color: var( --wp--preset--color--primary );
}

.gc-plan.is-featured::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	border: 1px solid var( --wp--preset--color--primary );
	pointer-events: none;
}

.gc-plan__badge {
	position: absolute;
	top: 0;
	inset-inline-end: var( --wp--preset--spacing--40 );
	transform: translateY( -50% );
	padding: 0.3rem 0.85rem;
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--primary );
	color: #fff;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

.gc-plan__name {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--contrast );
}

.gc-plan__description {
	margin: 0;
	color: var( --wp--preset--color--ink-soft );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
	min-height: 2.9em;
}

.gc-plan__pricing {
	margin: 0.75rem 0 1.1rem;
}

.gc-plan__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.2rem;
	margin: 0;
	color: var( --wp--preset--color--contrast );
}

.gc-plan__currency {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 500;
	align-self: flex-start;
	padding-top: 0.35em;
}

.gc-plan__amount {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.5rem, 4vw, 3.15rem );
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.035em;
}

.gc-plan__period {
	flex: 1 0 100%;
	color: var( --wp--preset--color--ink-soft );
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.4;
}

/* Call to action ---------------------------------------------------------- */

.gc-plan__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.8125rem 1.5rem;
	border-radius: var( --wp--custom--radius--md );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-plan__cta.is-style-primary {
	background: var( --wp--preset--color--primary );
	border: 1px solid var( --wp--preset--color--primary );
	color: #fff;
}

.gc-plan__cta.is-style-primary:hover,
.gc-plan__cta.is-style-primary:focus {
	background: var( --wp--preset--color--primary-hover );
	border-color: var( --wp--preset--color--primary-hover );
	color: #fff;
	text-decoration: none;
}

.gc-plan__cta.is-style-ghost {
	background: transparent;
	border: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--contrast );
}

.gc-plan__cta.is-style-ghost:hover,
.gc-plan__cta.is-style-ghost:focus {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.gc-plan__cta:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/* Features ---------------------------------------------------------------- */

.gc-plan__features {
	margin-top: 1.35rem;
	padding-top: 1.35rem;
	border-top: 1px solid var( --wp--preset--color--line );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink-soft );
}

.gc-plan__features > :last-child {
	margin-bottom: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.gc-plan,
	.gc-plan__cta {
		transition: none;
	}

	.gc-plan:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 781px ) {
	.gc-plan__features > :first-child {
		margin-top: 0; /* rule -> first feature matched button -> rule */
	}
}
@media ( max-width: 600px ) {
	.gc-plan {
		padding: 1.75rem 1.25rem; /* live-tested: no feature line wraps at 375 */
	}
	.gc-plan__badge {
		inset-inline-end: 1.25rem;
	}
}

/* ---- blocks/pricing-table/style.css ---- */
/**
 * grantcookie/pricing-table, shared editor + front-end styles.
 */

.gc-pricing {
	--gc-pricing-columns: 3;
}

/* Billing switch ---------------------------------------------------------- */

.gc-pricing__switch {
	display: inline-flex;
	align-items: stretch;
	gap: 0.25rem;
	margin: 0 auto var( --wp--preset--spacing--40 );
	padding: 0.3rem;
	background: var( --wp--preset--color--surface-alt );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md );
	width: fit-content;
}

.gc-pricing .gc-pricing__switch {
	display: flex;
}

.gc-pricing__switch-option {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1.15rem;
	border: 0;
	border-radius: var( --wp--custom--radius--sm );
	background: transparent;
	color: var( --wp--preset--color--ink-soft );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-pricing__switch-option:hover {
	color: var( --wp--preset--color--contrast );
}

.gc-pricing__switch-option[aria-pressed="true"],
.gc-pricing__switch-option.is-active {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	box-shadow: var( --wp--preset--shadow--subtle );
}

.gc-pricing__switch-option:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

.gc-pricing__switch-note {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--primary-soft );
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

/* Grid -------------------------------------------------------------------- */

.gc-pricing__grid {
	display: grid;
	grid-template-columns: repeat( var( --gc-pricing-columns ), minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
	align-items: stretch;
}

@media ( max-width: 1080px ) {
	.gc-pricing__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 720px ) {
	.gc-pricing__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.gc-pricing__switch {
		width: 100%;
	}

	.gc-pricing__switch-option {
		flex: 1;
		justify-content: center;
	}
}

/* Which price shows.

   The rule only bites once a cycle is set on the container, which the server
   always does, but if the markup is ever rendered without it, both prices
   stay visible rather than the card showing no price at all. */

.gc-pricing[data-cycle="monthly"] .gc-plan__price[data-gc-price="annual"],
.gc-pricing[data-cycle="annual"] .gc-plan__price[data-gc-price="monthly"] {
	display: none;
}

/* Editor: centre the fake switch the same way the real one sits. */

.editor-styles-wrapper .gc-pricing__switch {
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 720px ) {
	.gc-pricing__grid {
		row-gap: var( --wp--preset--spacing--40 ); /* 32px: 17px of air above the 'Most popular' badge */
	}

	.gc-pricing__switch-option {
		min-height: 2.75rem; /* 38 -> 44 */
	}
}

/* ---- blocks/scanner/style.css ---- */
/**
 * grantcookie/scanner, shared editor + front-end styles.
 */

.gc-scanner {
	--gc-scanner-fg: var( --wp--preset--color--contrast );
	--gc-scanner-muted: var( --wp--preset--color--ink-soft );
	--gc-scanner-field-bg: var( --wp--preset--color--base );
	--gc-scanner-field-border: var( --wp--preset--color--line );

	max-width: 34rem;
	color: var( --gc-scanner-fg );
	/* The block sits in columns of very different widths, so it adapts to its
	   own container rather than to the viewport. */
	container-type: inline-size;
	container-name: gc-scanner;
}

.gc-scanner.is-tone-dark {
	--gc-scanner-fg: #fff;
	--gc-scanner-muted: rgba( 255, 255, 255, 0.75 );
	--gc-scanner-field-bg: rgba( 255, 255, 255, 0.12 );
	--gc-scanner-field-border: rgba( 255, 255, 255, 0.28 );
}

.gc-scanner__heading {
	margin: 0 0 0.35rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.gc-scanner__description {
	margin: 0 0 1.1rem;
	color: var( --gc-scanner-muted );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
}

/* Field ------------------------------------------------------------------- */

.gc-scanner__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
	padding: 0.35rem;
	/* Fallbacks: the newsletter band and the contact page use this form as plain
	   HTML, outside `.gc-scanner`, where these properties are never defined. An
	   undefined custom property makes the whole declaration invalid, so the field
	   had no border and no fill at all. */
	background: var( --gc-scanner-field-bg, var( --wp--preset--color--base ) );
	border: 1px solid var( --gc-scanner-field-border, var( --wp--preset--color--line ) );
	border-radius: var( --wp--custom--radius--md );
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-scanner__form:focus-within {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 3, 69, 79, 0.15 );
}

.gc-scanner.is-tone-dark .gc-scanner__form:focus-within {
	border-color: #fff;
	box-shadow: 0 0 0 4px rgba( 255, 255, 255, 0.18 );
}

.gc-scanner__input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.7rem 1.15rem;
	border: 0;
	border-radius: var( --wp--custom--radius--md );
	background: transparent;
	color: var( --gc-scanner-fg, var( --wp--preset--color--contrast ) );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4;
}

.gc-scanner__input::placeholder {
	color: var( --gc-scanner-muted, var( --wp--preset--color--ink-soft ) );
	opacity: 1;
}

.gc-scanner__input:focus {
	outline: none;
}

.gc-scanner__input.is-placeholder {
	color: var( --gc-scanner-muted );
	display: flex;
	align-items: center;
}

.gc-scanner__submit {
	flex: none;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: var( --wp--custom--radius--md );
	background: var( --wp--preset--color--primary );
	color: #fff;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-scanner__submit:hover {
	background: var( --wp--preset--color--primary-hover );
}

.gc-scanner.is-tone-dark .gc-scanner__submit {
	background: #fff;
	color: var( --wp--preset--color--primary );
}

.gc-scanner.is-tone-dark .gc-scanner__submit:hover {
	background: rgba( 255, 255, 255, 0.9 );
}

.gc-scanner__submit:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Messages ---------------------------------------------------------------- */

.gc-scanner__error {
	flex: 1 0 100%;
	margin: 0.15rem 0.5rem 0.35rem;
	color: var( --wp--preset--color--danger );
	font-size: var( --wp--preset--font-size--x-small );
}

.gc-scanner.is-tone-dark .gc-scanner__error {
	color: #fecaca;
}

.gc-scanner__error[hidden] {
	display: none;
}

.gc-scanner__note {
	margin: 0.75rem 0 0;
	color: var( --gc-scanner-muted );
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.5;
}

/* Narrow container: stack the button under the field and drop the pill shape,
   which only reads correctly on a single row. */

@container gc-scanner ( max-width: 27rem ) {
	.gc-scanner__form {
		flex-direction: column;
		border-radius: var( --wp--custom--radius--lg );
		padding: 0.5rem;
		gap: 0.45rem;
	}

	.gc-scanner__input {
		flex: 1 1 auto;
		width: 100%;
	}

	.gc-scanner__submit {
		width: 100%;
		justify-content: center;
	}
}

/* Fallback for browsers without container queries. */

@supports not ( container-type: inline-size ) {
	@media ( max-width: 560px ) {
		.gc-scanner__form {
			flex-direction: column;
			border-radius: var( --wp--custom--radius--lg );
		}

		.gc-scanner__submit {
			width: 100%;
		}
	}
}

/* ---- assets/css/theme.css ---- */
/**
 * GrantCookie, global styles.
 *
 * Everything block-specific lives in assets/css/blocks/ and is loaded only when
 * that block is on the page. This file holds what is genuinely global: the
 * header behaviour, the footer, typography variations that appear on nearly
 * every page, and the reveal animation.
 */

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

/* WordPress does not set this globally, and without it any element that
   combines width:100% with horizontal padding, pricing buttons, form fields,
   cards in a grid, renders wider than its container and overlaps its
   neighbours. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Keep anchored headings clear of the sticky header. */
	scroll-padding-top: calc( var( --wp--custom--header--height ) + 1rem );
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* WordPress inserts the global block gap between every root-level block. The
   root blocks here are full-width painted bands (header wrapper, main, CTA,
   footer) that carry their own spacing, the injected gap shows up as stray
   white lines between bands, and as a white strip above the hero, because the
   fixed header's wrapper is zero-height but the gap after it is not. */

body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* The same applies inside the page: a full-bleed section band paints its own
   padding, so the layout gap between two bands is a 20px white line across
   the page. Scoped to alignfull children only, paragraphs, headings and
   ordinary article blocks keep their normal spacing. */

main.wp-block-group > .alignfull,
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
	border-radius: 2px;
}

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

.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 999;
	background: var( --wp--preset--color--base );
	border-radius: var( --wp--custom--radius--sm );
	box-shadow: var( --wp--preset--shadow--raised );
	padding: 0.75rem 1.25rem;
}

/* -------------------------------------------------------------------------
   2. Header
   ---------------------------------------------------------------------- */

/* ONE header, two scroll states.
 *
 * At the top of any page it is transparent and the band beneath shows through.
 * As soon as the page scrolls it becomes the solid white bar. It is fixed
 * rather than sticky so the first band can run underneath it, every band
 * therefore carries header-height clearance in its own top padding.
 *
 * The only per-page variation is legibility: over a dark band the logo and
 * links invert. site.js sets .is-over-dark by looking at the first band, so no
 * template or page needs to know anything about it.
 */

.gc-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	/* Height comes from the bar's own padding and content. A min-height taller
	   than the content left dead white space under the logo row once the bar
	   turned solid, because the content sat at the top of the taller box. */
	display: flex;
	align-items: center;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition:
		background-color 220ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		border-color 220ms cubic-bezier( 0.4, 0, 0.2, 1 ),
		box-shadow 220ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-header.is-scrolled {
	background-color: rgba( 255, 255, 255, 0.92 );
	backdrop-filter: saturate( 180% ) blur( 14px );
	-webkit-backdrop-filter: saturate( 180% ) blur( 14px );
	border-bottom-color: var( --wp--preset--color--line );
	box-shadow: 0 1px 3px rgba( 4, 47, 54, 0.07 ), 0 8px 24px -16px rgba( 4, 47, 54, 0.18 );
}

/* Transparent over a dark band, invert so the bar stays readable. Scoped away
   from the dropdown panels, which are white cards whatever the header is doing. */

.gc-header.is-over-dark:not(.is-scrolled) :where( a, .wp-block-navigation-item__content, .wp-block-navigation__submenu-icon, .wp-block-navigation__responsive-container-open ):not( .wp-block-navigation__submenu-container * ) {
	color: rgba( 255, 255, 255, 0.92 );
}

.gc-header.is-over-dark:not(.is-scrolled) :where( a:hover, .wp-block-navigation-item__content:hover ):not( .wp-block-navigation__submenu-container * ) {
	color: #fff;
}

/* Two real lockups sit in the markup (inc/logo.php). Over a dark band the
   header shows the white one; nothing is recoloured or swapped in CSS. */

.gc-logo--light,
.gc-header.is-over-dark:not(.is-scrolled) .gc-logo--dark {
	display: none;
}

.gc-header.is-over-dark:not(.is-scrolled) .gc-logo--light {
	display: inline;
}

.gc-header.is-over-dark:not(.is-scrolled) .wp-block-button:not(.is-style-gc-ghost) .wp-block-button__link {
	background-color: #fff;
	color: var( --wp--preset--color--primary );
	box-shadow: 0 8px 24px -12px rgba( 0, 0, 0, 0.5 );
}

.gc-header.is-over-dark:not(.is-scrolled) .wp-block-button:not(.is-style-gc-ghost) .wp-block-button__link:hover {
	background-color: rgba( 255, 255, 255, 0.9 );
	color: var( --wp--preset--color--primary-hover );
}

@media ( prefers-reduced-motion: reduce ) {
	.gc-header {
		transition: none;
	}
}

.gc-header .wp-block-site-logo img {
	height: 28px;
	width: auto;
	/* `width: auto` is only proportional while nothing else squeezes the box.
	   Under core's `max-width: 100%` the width gave way when the row ran out of
	   room and the fixed height did not, so the lockup rendered up to 64%
	   narrower than it is drawn. */
	max-width: none;
}

.gc-header .wp-block-site-logo {
	flex: 0 0 auto;
}

/* A label in the bar never wraps. When the row was too narrow the buttons broke
   their text one letter per line and grew into 150px towers - that, not the
   padding, is what made the header 180px tall on a phone. */

.gc-header .wp-block-button__link {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Header - compact bar
   ---------------------------------------------------------------------- */

/* Core swaps the navigation for its hamburger at 600px. Five top-level items,
   two buttons and the lockup need about 1100px, so between the two the full
   menu was crammed into a bar it did not fit: 136-234px tall on every tablet
   and small laptop. The swap is moved up to where the menu actually fits. */

@media ( max-width: 1099px ) {
	.gc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.gc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Lockup on the left; call to action, then the menu button, on the right. */

	.gc-header > .wp-block-group {
		gap: 0.5rem;
	}

	.gc-header .wp-block-site-logo {
		margin-inline-end: auto;
	}

	.gc-header > .wp-block-group > .wp-block-buttons {
		order: 2;
	}

	.gc-header > .wp-block-group > .wp-block-navigation {
		order: 3;
		flex: 0 0 auto;
	}

	/* A 24px icon is not a 24px target. */

	.gc-header .wp-block-navigation__responsive-container-open,
	.gc-header .wp-block-navigation__responsive-container-close {
		width: 2.75rem;
		height: 2.75rem;
		align-items: center;
		justify-content: center;
		border-radius: var( --wp--custom--radius--md );
	}

	.gc-header .wp-block-navigation__responsive-container-open {
		margin-inline-end: -0.6rem;
	}

	/* The lockup is a link, and at 26px tall it was the one undersized target left in
	   the bar. The bar is 72px, so the taller hit area costs no height. */

	.gc-header .custom-logo-link {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

@media ( max-width: 599px ) {
	/* On a phone the bar is the lockup and the menu button, nothing else. Sign in
	   and Try for free wait in the open menu, where the pair is pinned to the
	   bottom of the screen - which also leaves the lockup room to stay a
	   comfortable size instead of shrinking to fit beside a button. */

	html:not(.has-modal-open) .gc-header > .wp-block-group > .wp-block-buttons {
		display: none;
	}

	.gc-header .wp-block-site-logo img {
		height: 26px;
	}
}

/* -------------------------------------------------------------------------
   3. Hero decoration
   ---------------------------------------------------------------------- */

.gc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The decoration is painted on top of the element's own background, and the
   content is lifted above it, a negative z-index would put these behind the
   gradient the element paints itself, i.e. invisible. */

.gc-hero > * {
	position: relative;
	z-index: 2;
}

/* A soft dot field over the gradient, the same texture the product UI uses. */

.gc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient( circle, rgba( 255, 255, 255, 0.14 ) 1px, transparent 1px );
	background-size: 26px 26px;
	pointer-events: none;
}

/* Two wide, low-opacity glows so the gradient never reads as a flat
   rectangle: a cool one bottom-left, a brighter one behind the headline. */

.gc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient( 46rem 34rem at 8% 108%, rgba( 255, 255, 255, 0.16 ) 0%, transparent 60% ),
		radial-gradient( 40rem 28rem at 78% -12%, rgba( 121, 202, 219, 0.30 ) 0%, transparent 62% );
	pointer-events: none;
}

.gc-hero.is-light::before,
.gc-hero.is-light::after {
	content: none;
}

/* -------------------------------------------------------------------------
   4. Typography variations
   ---------------------------------------------------------------------- */

.is-style-gc-eyebrow {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary );
	margin-bottom: 0.75rem;
}

/* Only ever inverted inside an explicitly dark section, keying off "has a
   background" would also catch the light surface sections, where white text
   disappears. */

.gc-on-dark .is-style-gc-eyebrow:not([class*="has-text-color"]) {
	color: rgba( 255, 255, 255, 0.85 );
}

.is-style-gc-lead {
	font-size: var( --wp--preset--font-size--large );
	/* Looser than a heading, tighter than body, a lead only reads as a lead if
	   its leading differs from the paragraphs around it, not just its size. */
	line-height: 1.45;
	font-weight: 450;
	color: var( --wp--preset--color--ink-soft );
}

/* Tracking is scale-dependent: it tightens as type grows and OPENS UP below
   15px. Fine print inheriting the negative display tracking is the detail that
   makes a page feel machine-set, and on a compliance product the fine print is
   the copy buyers read hardest. */

.is-style-gc-note,
.has-x-small-font-size,
.wp-block-post-terms,
figcaption {
	letter-spacing: 0.008em;
}

/* Numbers that sit in columns must not dance as they change. */

.gc-dash__stat b,
.gc-plan__amount,
.gc-log__table td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.is-style-gc-note {
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.6;
	color: var( --wp--preset--color--ink-faint );
}

.is-style-gc-gradient {
	background: linear-gradient( 100deg, var( --wp--preset--color--primary ) 0%, #30a5b6 55%, var( --wp--preset--color--primary-deep ) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.is-style-gc-underline {
	position: relative;
	display: inline-block;
}

.is-style-gc-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.08em;
	height: 0.32em;
	z-index: -1;
	background: var( --wp--preset--color--accent );
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   5. Sections and grids
   ---------------------------------------------------------------------- */

/* Two section rhythms, and only two. Every band on a page uses one of them,
   so the vertical spacing is consistent as you scroll. Patterns must not set
   their own inline padding, an inline style outranks these classes and is
   how the rhythm drifted in the first place. */

.gc-section {
	padding-block: var( --wp--preset--spacing--60 );
}

.gc-section--tight {
	padding-block: var( --wp--preset--spacing--60 );
}

/* The header is fixed, so whatever opens a page has to clear it. The bands that
   carry a page title do this in their own markup; a page that opens straight
   into a section (the Landing template) is handled here, which works because
   .gc-section sets its padding in CSS rather than inline. */

main > .gc-section:first-child,
main > .gc-section--tight:first-child,
.wp-block-post-content > .gc-section:first-child,
.wp-block-post-content > .gc-section--tight:first-child {
	padding-block-start: calc( var( --wp--custom--header--height ) + var( --wp--preset--spacing--60 ) );
}

/* The page-title bands are full-wide so the title starts on the same grid line
   as the logo. Text still needs a readable measure, so it is capped here rather
   than by centring the container. */

.gc-hero.is-light :where( h1, h2, .wp-block-post-title, .is-style-gc-lead ) {
	max-width: 52rem;
}

/* On the Landing template there is no title band, the opening section's own
   intro IS the page title. It therefore aligns to the logo like every other
   page title, while sections further down stay centred. The selector is long
   enough to beat .has-text-align-center without !important. */

.wp-block-post-content > .gc-section:first-child > .wp-block-group:first-child,
.wp-block-post-content > .gc-section--tight:first-child > .wp-block-group:first-child {
	max-width: var( --wp--style--global--wide-size );
}

.wp-block-post-content > .gc-section:first-child > .wp-block-group:first-child :where( h1, h2, p ),
.wp-block-post-content > .gc-section--tight:first-child > .wp-block-group:first-child :where( h1, h2, p ) {
	text-align: left;
	max-width: 52rem;
	/* !important only because core's constrained layout centres children with
	   `margin-left/right: auto !important`, there is no winning without it. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* page.html deliberately gives the post-content wrapper no top padding, because
   a page that opens with a full-bleed section band gets its spacing from that
   band. Stacking the two produced a ~270px dead gap under the page header.

   Pages that open with ordinary prose instead have nothing to inherit spacing
   from, so they get it here. Additive rather than subtractive on purpose: the
   template carries no inline top padding to fight, and an inline style would
   beat this rule if it did. */

.wp-block-post-content > :first-child:not(.alignfull) {
	margin-block-start: var( --wp--preset--spacing--60 );
}

.gc-card-grid .wp-block-post {
	height: 100%;
}

/* Query loops styled as cards get the card chrome without every post template
   having to opt in block by block. */

.is-style-gc-cards .wp-block-post-template > li {
	display: flex;
}

.is-style-gc-cards .wp-block-post-template > li > .wp-block-group {
	flex: 1;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.is-style-gc-cards .wp-block-post-template > li > .wp-block-group:hover {
	border-color: rgba( 3, 69, 79, 0.35 );
}

.is-style-gc-cards .wp-block-post-title a {
	text-decoration: none;
	color: var( --wp--preset--color--contrast );
}

.is-style-gc-cards .wp-block-post-title a:hover {
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.is-style-gc-cards .wp-block-post-excerpt__excerpt {
	color: var( --wp--preset--color--ink-soft );
}

/* -------------------------------------------------------------------------
   6. Footer
   ---------------------------------------------------------------------- */

/* One continuous black band. The footer used to paint two separate fills, and
   the layout gap between them showed through as a white line across the page. */

.gc-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Neutral white at reduced opacity, not the teal-tinted ink: on black the tint
	   read as dull grey-green. Headings are full white, everything else a step down. */
	color: rgba( 255, 255, 255, 0.72 );
}

/* Plain black. The dot field and the two brand glows that used to sit here were
   removed at the owner's request: this is an enterprise product and the footer
   should read as a quiet, solid band. */

.gc-footer > * {
	position: relative;
	z-index: 1;
}

/* The bottom bar is separated by a hairline instead of a second fill, that is
   what keeps the band continuous with no seam. */

.gc-footer__bottom {
	border-top: 1px solid rgba( 255, 255, 255, 0.09 );
}

.gc-footer h2,
.gc-footer h3,
.gc-footer h4 {
	color: #fff;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 0.9rem;
}

.gc-footer a {
	color: rgba( 255, 255, 255, 0.72 );
	text-decoration: none;
	transition: color 160ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-footer a:hover,
.gc-footer a:focus {
	color: #fff;
	text-decoration: none;
}

.gc-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: var( --wp--preset--font-size--small );
}

/* The social icons are set to the faint ink in the block itself (a preset class
   plus an inline value). Same neutral white as the links. */

.gc-footer .wp-block-social-links .wp-social-link a,
.gc-footer .wp-block-social-links.has-icon-color .wp-social-link a,
.gc-footer .wp-social-link.has-ink-faint-color a {
	color: rgba( 255, 255, 255, 0.72 ) !important;
}

.gc-footer .wp-block-social-links .wp-social-link a:hover,
.gc-footer .wp-block-social-links .wp-social-link a:focus {
	color: #fff !important;
}

.gc-footer .wp-block-site-logo img {
	height: 24px;
	width: auto;
}

.gc-footer .gc-logo--dark {
	display: none;
}

.gc-footer .gc-logo--light {
	display: inline;
}

.gc-footer__badge {
	display: inline-block;
	margin-inline-start: 0.5rem;
	padding: 0.1rem 0.5rem;
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--primary );
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: 2px;
}

/* -------------------------------------------------------------------------
   7. Reveal on scroll
   ---------------------------------------------------------------------- */

/* The hidden state is applied only once site.js has confirmed it is running,
   so a script failure can never leave a section invisible. */

.gc-js .gc-reveal {
	opacity: 0;
	transform: translateY( 18px );
	transition: opacity 620ms cubic-bezier( 0.16, 1, 0.3, 1 ), transform 620ms cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: opacity, transform;
}

.gc-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	.gc-js .gc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   8. Compliance badge row
   ---------------------------------------------------------------------- */

.gc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gc-badges .wp-block-button__link,
.gc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--ink-soft );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	box-shadow: none;
}

.gc-on-dark .gc-badge {
	background: rgba( 255, 255, 255, 0.12 );
	border-color: rgba( 255, 255, 255, 0.28 );
	color: #fff;
}

/* -------------------------------------------------------------------------
   9. Plain forms
   ---------------------------------------------------------------------- */

/* Styling for hand-written forms in Custom HTML blocks, so a contact or
   newsletter form looks native before a form plugin is installed. */

.gc-contact-form p {
	margin: 0 0 1rem;
}

.gc-contact-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	color: var( --wp--preset--color--contrast );
}

.gc-contact-form input,
.gc-contact-form textarea,
.gc-contact-form select {
	width: 100%;
	padding: 0.7rem 0.95rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-contact-form input:focus,
.gc-contact-form textarea:focus,
.gc-contact-form select:focus {
	outline: none;
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 3, 69, 79, 0.14 );
}

.gc-contact-form textarea {
	resize: vertical;
	min-height: 8rem;
}

/* -------------------------------------------------------------------------
   10. Separator
   ---------------------------------------------------------------------- */

/* The "gradient rule" style is retired: it draws a plain hairline now. */

.wp-block-separator.is-style-gc-gradient {
	height: 1px;
	border: 0;
	background: var( --wp--preset--color--line );
	opacity: 1;
}

.gc-on-dark .wp-block-separator.is-style-gc-gradient {
	background: rgba( 255, 255, 255, 0.28 );
}

/* -------------------------------------------------------------------------
   11. Utilities
   ---------------------------------------------------------------------- */

.gc-on-dark,
.gc-on-dark :where( h1, h2, h3, h4, h5, h6, p, li ) {
	color: #fff;
}

.gc-on-dark :where( p, li ):not(.is-style-gc-eyebrow):not([class*="has-text-color"]) {
	color: rgba( 255, 255, 255, 0.82 );
}

.gc-on-dark a:not(.wp-block-button__link) {
	color: #fff;
	text-decoration-color: rgba( 255, 255, 255, 0.5 );
}

.gc-stack-tight > * + * {
	margin-block-start: 0.5rem;
}

.gc-text-balance {
	text-wrap: balance;
}

/* Anything that should never be clipped by the overflow guard on body. */

.gc-allow-overflow {
	overflow: visible;
}

.gc-header > * {
	width: 100%;
}

/* -------------------------------------------------------------------------
   Inner-page body alignment
   ---------------------------------------------------------------------- */

/* Inner pages put the title in the 78rem column, so it starts on the same grid
   line as the logo. The body underneath sat in a NARROWER constrained column
   that core centres, so it started further in again, 275px for the title and
   510px for the prose at a desktop width.
   *
   * The fix is only to stop the centring of the narrow column, never to widen
   * it: anything carrying a wide or full alignment must keep its auto margins,
   * or the body runs to the page edge while the title stays in the column. */

.gc-page-body:not(.alignwide):not(.alignfull),
.gc-page-body > :not(.alignwide):not(.alignfull),
.gc-page-body .is-layout-constrained > :not(.alignwide):not(.alignfull) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* A wide group inside the body column repeats the inset the column already
   applies, which put hub headings 40px right of the title. Scoped to wide
   groups only: full-bleed section bands need their inset to pull their own
   content back off the page edge. */

.gc-page-body > .alignwide.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Centred text is an explicit choice, a section intro, a panel, a call to
   action, so its box stays centred too. Last, so it wins the tie. */

.gc-page-body :where( .has-text-align-center ) {
	margin-inline: auto !important;
}

/* Inner-page bodies: prose keeps the readable measure, structure uses the
   column. Left-aligning the body fixed the grid line but left every block at
   46rem inside a 78rem column, 512px of dead space down the right, and card
   grids stuck at two cramped columns. Running text still wraps at 46rem;
   panels, grids, tables and media now use the width that is there. */

.gc-page-body .alignwide > .is-layout-grid,
.gc-page-body .alignwide > .wp-block-columns,
.gc-page-body .alignwide > .wp-block-table,
.gc-page-body .alignwide > .wp-block-image,
.gc-page-body .alignwide > figure,
.gc-page-body .alignwide > .is-style-gc-panel,
.gc-page-body .alignwide > .is-style-gc-card,
.gc-page-body .alignwide > .is-style-gc-outline,
.gc-page-body .alignwide > .wp-block-query {
	max-width: none !important;
}

/* A fixed column count was chosen for a 46rem box. Across the full column that
   leaves cards oversized, so they reflow on their own minimum instead, three
   up on a desktop, matching the card grids on the archives. */

.gc-page-body .alignwide > .is-layout-grid {
	/* min(): a hard 17rem track overflows a viewport narrower than 312px. */
	grid-template-columns: repeat( auto-fit, minmax( min( 19rem, 100% ), 1fr ) );
}

/* WordPress puts a block gap above the first child of the body column, on top
   of the band's own top padding, 160px of empty white between a page's lead
   paragraph and its first block, on every hub page. The band supplies the
   rhythm; the first child should not add to it. */

.gc-page-body > :first-child {
	margin-block-start: 0 !important;
}

/* -------------------------------------------------------------------------
   Surface sections print white
   ---------------------------------------------------------------------- */

/* Blocks given the "surface" background in the editor print plain white. Only the
   class is overridden, not the surface colour itself: cards, panels and FAQ rows
   use that token as their fill, and made white they would disappear into the page.
   `body` lifts this above WordPress's own !important preset rule regardless of the
   order the two stylesheets print in. */

body .has-surface-background-color {
	background-color: var( --wp--preset--color--base ) !important;
}

/* -------------------------------------------------------------------------
   Plain pill form - newsletter band, contact page
   ---------------------------------------------------------------------- */

/* The newsletter band and the contact form are plain HTML that borrows the
   scanner block's class names. The block's stylesheet is only printed on pages
   that contain the block, and its field colours are custom properties defined
   on `.gc-scanner`, which a bare form is not inside - so on most pages these
   forms were raw browser controls (a 21px grey text box, a system button), and
   where the sheet did load the field had no border or fill.
   *
   * Every rule is guarded with `:not(.gc-scanner .gc-scanner__form)`. This file
   * loads after the block's stylesheet, so an unguarded copy out-ranks the
   * block's own container query: `flex: 1 1 14rem` is a width in a row and a
   * HEIGHT once the block stacks its form into a column, which made the real
   * scanner's URL field 224px tall. */

.gc-scanner__form:not(.gc-scanner .gc-scanner__form) {
	--gc-scanner-fg: var( --wp--preset--color--contrast );
	--gc-scanner-muted: var( --wp--preset--color--ink-soft );
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
	padding: 0.35rem;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md );
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-scanner__form:not(.gc-scanner .gc-scanner__form):focus-within {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 3, 69, 79, 0.15 );
}

.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.7rem 1.15rem;
	border: 0;
	border-radius: var( --wp--custom--radius--md );
	background: transparent;
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--body );
	/* 16px, not the 15px preset: iOS Safari zooms the page when a focused field is
	   smaller, and never zooms back out. */
	font-size: 1rem;
	line-height: 1.4;
}

.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__input::placeholder {
	color: var( --wp--preset--color--ink-soft );
	opacity: 1;
}

.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__input:focus {
	outline: none;
}

.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__submit,
.gc-contact-form .gc-scanner__submit {
	flex: none;
	min-height: 2.75rem;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: var( --wp--custom--radius--md );
	background: var( --wp--preset--color--primary );
	color: #fff;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__submit:hover,
.gc-contact-form .gc-scanner__submit:hover {
	background: var( --wp--preset--color--primary-hover );
}

.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__submit:focus-visible,
.gc-contact-form .gc-scanner__submit:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 781px ) {
	/* Presets live on :root; re-declaring on body wins by inheritance and every inline
		style that references the tokens (CTA, footer, hub bands, heroes) follows. */
	body {
		--wp--preset--spacing--70: 3.5rem; /* section band 80 -> 56 */
		--wp--preset--spacing--60: 2.5rem; /* tight band, hub body band, header-clearance add-on 56 -> 40 */
	}
	/* Light title bands set padding-bottom: spacing-50 inline. 48 -> 32, so title -> body = 32 + 40 = 72px. */
	.gc-hero.is-light {
		--wp--preset--spacing--50: 2rem;
	}
}

/* Any width: an unbound eyebrow (blank gc_eyebrow meta) must not reserve 12px above the H1. */
.is-style-gc-eyebrow:empty {
	display: none;
}

@media ( max-width: 600px ) {
	/* Preset size classes are !important: move the token on the element, not the property. */
	h2 { /* every section + CTA H2: 33 -> 28 */
		--wp--preset--font-size--heading: 1.75rem;
	}
	h2.wp-block-heading {
		line-height: 1.12;
	}
	h3.has-heading-font-size {                                  /* why-choose row titles: 33 -> 24 */
		--wp--preset--font-size--heading: 1.5rem;
		line-height: 1.2;
	}

	/* Inner-page titles: one size whatever preset the template picked (28 / 33 / 41 today).
		The home hero H1 uses display-xl and keeps its own clamp in hero.css. */
	h1.has-heading-font-size,
	h1.has-display-font-size,
	.wp-block-post-content > .gc-section:first-child h1.has-xx-large-font-size {
		--gc-phone-h1: clamp( 1.75rem, 8.4vw, 2rem );
		--wp--preset--font-size--heading: var( --gc-phone-h1 );
		--wp--preset--font-size--display: var( --gc-phone-h1 );
		--wp--preset--font-size--xx-large: var( --gc-phone-h1 );
		line-height: 1.1;
		letter-spacing: -0.028em;
	}

	/* Un-sized H3 ('Key requirements') defaulted to the same xx-large token as the H2 above it. */
	.gc-page-body h3:where(.wp-block-heading:not([class*="-font-size"])) {
		font-size: var( --wp--preset--font-size--x-large ); /* 22px */
		line-height: 1.25;
	}

	/* Long-form documents: headings step down so the page title stays the title. */
	:is(.page-template-page-legal, .single-post) .gc-page-body h2 {
		font-size: 1.5rem;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}
	:is(.page-template-page-legal, .single-post) .gc-page-body h3 {
		font-size: 1.25rem;
		line-height: 1.25;
		letter-spacing: -0.015em;
	}
	:is(.page-template-page-legal, .single-post) .gc-page-body h4 {
		font-size: 1.0625rem;
		line-height: 1.35;
	}

	/* Hub taglines are 40-50 word paragraphs, not one-liners. */
	.gc-hero.is-light .is-style-gc-lead {
		font-size: 1.125rem;
		line-height: 1.5;
	}
	/* A lead inside a panel sits one step under the hero lead directly above it. */
	.wp-block-group.is-style-gc-panel .is-style-gc-lead {
		font-size: var( --wp--preset--font-size--medium );
		line-height: 1.5;
	}
}

@media ( max-width: 781px ) {
	:where(h1, h2, h3, h4),
	.wp-block-post-title,
	.is-style-gc-eyebrow,
	p.has-text-align-center,
	.wp-block-details summary,
	.gc-scanner__note,
	.gc-trustrow__note,
	.gc-page-body .is-style-gc-note {
		text-wrap: balance;
	}
	/* Running sentences keep greedy first lines (a dash stays on the line it closes) and only lose
		the orphan. The (0,2,1) selector takes centred leads back from `p.has-text-align-center`. */
	.wp-block-list.is-style-gc-check > li,
	.wp-block-list.is-style-gc-cross > li,
	[class*="is-style-gc-card"] p,
	.wp-block-group.is-style-gc-panel p,
	.is-style-gc-lead,
	p.has-text-align-center.is-style-gc-lead {
		text-wrap: pretty;
	}
	/* 'DROPS INTO THE STACK YOU ALREADY HAVE' fits 360px again. */
	.is-style-gc-eyebrow {
		letter-spacing: 0.07em;
	}
}

/* The plain newsletter form stacks the way the real scanner block does through
   its container query: field on top, full-width button under it. */

.gc-contact-form p:last-child {
	margin-bottom: 0;
}

@media ( max-width: 600px ) {
	.gc-scanner__form:not(.gc-scanner .gc-scanner__form) {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0.45rem;
		padding: 0.5rem;
		border-radius: var( --wp--custom--radius--lg );
	}

	.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__input {
		flex: 0 0 auto;
		width: 100%;
	}

	.gc-scanner__form:not(.gc-scanner .gc-scanner__form) .gc-scanner__submit,
	.gc-contact-form .gc-scanner__submit {
		width: 100%;
		min-height: 3rem;
		font-size: 1rem;
	}
}

@media ( max-width: 781px ) {
	/* iOS Safari zooms the page when a focused field is under 16px and never zooms back. */
	body .gc-scanner__input,
	body .gc-scanner__submit,
	.gc-contact-form input,
	.gc-contact-form textarea,
	.gc-contact-form select,
	body .wp-block-search.is-style-gc-pill .wp-block-search__input {
		font-size: 1rem;
	}
	body .gc-scanner__input,
	body .gc-scanner__submit {
		min-height: 3rem;
	}
}

@media ( max-width: 600px ) {
	/* Code scrolls sideways instead of breaking tokens ('cdn.gran / tcookie.com', 'data- / site='). */
	.gc-page-body pre.wp-block-code,
	.is-style-gc-panel pre.wp-block-code {
		padding: 1rem;
		font-size: var( --wp--preset--font-size--x-small );
		line-height: 1.65;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gc-page-body pre.wp-block-code > code,
	.is-style-gc-panel pre.wp-block-code > code {
		white-space: pre;      /* removes the phantom blank line left by the indent */
		overflow-wrap: normal;
		word-break: normal;    /* undoes break-word inherited from .wp-block-column */
	}
}

/* Not phone-only: the title sits under the fixed bar at every width below ~1130px. */
/* home.html, index.html and search.html give <main> spacing-60 only - no header clearance.
	Docs templates start with padding-top:calc( and are not matched. */
main.wp-block-group[style^="padding-top:var(--wp--preset--spacing--60)"] {
	padding-top: calc( var( --wp--custom--header--height ) + var( --wp--preset--spacing--60 ) ) !important; /* 68 + 40 = 108, same as every other first band */
}

@media ( max-width: 781px ) {
	/* The title band already cleared the header; the first section must not do it again. (0,5,0) beats the (0,3,0) clearance rule. */
	.gc-hero ~ .wp-block-group > .wp-block-post-content > .gc-section:first-child,
	.gc-hero ~ .wp-block-group > .wp-block-post-content > .gc-section--tight:first-child {
		padding-block-start: var( --wp--preset--spacing--40 );
	}
	/* When the content ends with a band, the wrapper's own inline bottom padding is a second band. */
	main > .wp-block-group.alignfull:has(> .wp-block-post-content > :is(.gc-section, .gc-section--tight):last-child) {
		padding-bottom: 0 !important;
	}
}

@media ( max-width: 781px ) {
	/* Desktop zig-zag (text|image, image|text) stacks as text, image, image, text. Once stacked, copy always leads. */
	.gc-section > .wp-block-columns > .wp-block-column:first-child:has(> .wp-block-image:only-child) {
		order: 2;
	}
}

@media ( max-width: 781px ) {
	/* (0,2,0) beats the generated .wp-container-core-columns-* gap (0,1,0). */
	.gc-section > .wp-block-columns,
	.gc-section--tight > .wp-block-columns,
	.gc-page-body .wp-block-columns {
		row-gap: var( --wp--preset--spacing--40 ); /* 20 -> 32 */
	}
	/* Centred intro directly above un-carded, left-aligned columns (why-choose, how-it-works).
		:has() cannot be nested - written that way the selector was invalid and the rule was dropped
		whole - so this is two flat rules: left above any columns, centred again (0,5,0 beats 0,4,0)
		when those columns hold cards. Card grids, the bento, pricing, testimonials and the CTA are
		grid groups, not .wp-block-columns, and never match. */
	.gc-section > .wp-block-group:has(+ .wp-block-columns) > .has-text-align-center {
		text-align: left;
	}
	.gc-section > .wp-block-group:has(+ .wp-block-columns [class*="is-style-gc-card"]) > .has-text-align-center {
		text-align: center;
	}
}

@media ( max-width: 600px ) {
	.gc-stats > .is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 1.75rem 1.25rem;
	}
	/* Size is an inline (fluid-converted) style, so the flag is required. */
	.gc-stats > .is-layout-grid > .wp-block-group > p.has-display-font-family {
		font-size: 2rem !important;
	}
}

@media ( max-width: 781px ) {
	.is-style-gc-cards .wp-block-post-template > li > .wp-block-group {
		position: relative;
	}
	.is-style-gc-cards .wp-block-post-title a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var( --wp--custom--radius--lg );
	}
	/* Any other link inside a card stays reachable. */
	.is-style-gc-cards .wp-block-post-template > li > .wp-block-group a:not(.wp-block-post-title a) {
		position: relative;
		z-index: 1;
	}
}

@media ( max-width: 781px ) {
	/* Ten sibling paragraphs with one uniform 0.9rem gap: value hugs its label, pairs are separated. */
	.single-gc_regulation .gc-page-body .wp-block-column > .is-style-gc-card > p.has-small-font-size:not(.has-text-color) + p.has-text-color {
		margin-block-start: 0.2rem;
	}
	.single-gc_regulation .gc-page-body .wp-block-column > .is-style-gc-card > p.has-text-color + p.has-small-font-size:not(.has-text-color) {
		margin-block-start: 1rem;
		padding-block-start: 1rem;
		border-top: 1px solid var( --wp--preset--color--line );
	}
	/* The body's opening paragraph is the hero tagline verbatim. Until the content is changed,
		set it as body text so the hero owns the intro. Nothing is hidden. */
	.single-gc_regulation .gc-page-body .wp-block-column > h2 + .is-style-gc-lead {
		font-size: var( --wp--preset--font-size--medium );
		line-height: 1.6;
		font-weight: 400;
	}
}

@media ( max-width: 781px ) {
	/* A heading belongs to the text it introduces: 36 above, 12 below (was a flat 20 / 19). */
	:is(.page-template-page-legal, .single-post) .gc-page-body > :is(h2, h3, h4) {
		margin-block-start: 2.25rem;
	}
	/* Class doubled on purpose, for (0,3,1): the hub rule `.gc-page-body h2.wp-block-heading + p` is
		(0,2,2) and later in source, so it was winning with 16px after an H2 while H3/H4 got 12px. */
	:is(.page-template-page-legal, .single-post) .gc-page-body.gc-page-body > :is(h2, h3, h4) + * {
		margin-block-start: 0.75rem;
	}
	/* Links in running text were colour-only at ~1.9:1 against the ink; hover underline never fires on touch. */
	:is(.page-template-page-legal, .single-post) .gc-page-body :is(p, li, td) a:not(.wp-block-button__link) {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
		text-decoration-color: rgba( 3, 69, 79, 0.45 );
	}
	/* Hub bodies: H2 -> its paragraph was 32px+, the same as H2 -> previous block. */
	.gc-page-body h2.wp-block-heading + p {
		margin-block-start: var( --wp--preset--spacing--20 );
	}
	/* Related-cards group: band bottom 40 + 8 = 48px, the same air every in-body H2 gets (was 76). */
	main > .wp-block-group.alignfull + .wp-block-group.alignwide {
		margin-block-start: 0.5rem;
	}
	/* Legal: the body group directly follows the title band; theme.css only zeroes the gap for .alignfull. Keep after the rule above. */
	main > .wp-block-group.gc-hero + .wp-block-group.alignwide {
		margin-block-start: 0;
	}
	/* Single post: inline separator margins 48/32 float the hairline in ~170px of nothing. */
	.single-post main > .wp-block-group.alignfull > .wp-block-separator {
		margin-top: var( --wp--preset--spacing--40 ) !important;
		margin-bottom: var( --wp--preset--spacing--20 ) !important;
	}
	.single-post main > .wp-block-group.alignfull > .wp-block-separator:last-child {
		margin-bottom: 0 !important; /* no tags rendered */
	}
	/* Safety net: a long byline can never push the meta row wide. */
	.gc-hero .wp-block-post-author-name {
		overflow-wrap: anywhere;
		min-width: 0;
	}
}

@media ( max-width: 781px ) {
	/* 18 + 26 = 44px; the negative margin keeps the card layout unchanged. */
	.is-style-gc-outline p > a[href^="mailto:"] {
		display: inline-block;
		padding-block: 0.8125rem;
		margin-block: -0.8125rem;
	}
}
@media ( max-width: 600px ) {
	/* Only a LONE primary button. Pairs (hero, CTA) stay side by side. */
	.gc-page-body .wp-block-buttons > .wp-block-button:only-child:not(.is-style-gc-arrow) {
		flex: 1 1 100%;
		width: 100%;
	}
	.gc-page-body .wp-block-buttons > .wp-block-button:only-child:not(.is-style-gc-arrow) .wp-block-button__link {
		width: 100%;
		justify-content: center;
		min-height: 3rem;
	}
}

/* Fine print and dates, at every width. In the faint ink they measured 2.4-2.6:1
   against white - below the 4.5:1 WCAG AA asks of body-size text, on a compliance
   product's own disclaimers. The soft ink is 6.8:1. First fixed for phones only;
   desktop had the same problem. */

.is-style-gc-note {
	color: var( --wp--preset--color--ink-soft );
}

.gc-footer .is-style-gc-note {
	color: rgba( 255, 255, 255, 0.55 ); /* 8.9:1 on black */
}

/* The preset colour class is !important. */
.gc-hero.is-light .wp-block-post-date.has-ink-faint-color,
.is-style-gc-cards .wp-block-post-date.has-ink-faint-color {
	color: var( --wp--preset--color--ink-soft ) !important;
}

@media ( max-width: 781px ) {
	.gc-page-body .is-style-gc-note {
		font-size: 0.875rem; /* legal disclaimers 13 -> 14 */
	}
}

@media ( max-width: 781px ) {
	.gc-footer .wp-block-columns {
		display: grid; /* a grid ignores core's stacked flex-basis:100% !important */
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --wp--preset--spacing--40 ) 1.25rem; /* 32px rows = the in-column h4 margin, so every group is evenly spaced */
	}
	.gc-footer .wp-block-columns > .wp-block-column {
		min-width: 0;
	}
	/* Legal is the odd fifth column: span it and run its links two-up. */
	.gc-footer .wp-block-columns > .wp-block-column:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.gc-footer .wp-block-columns > .wp-block-column:last-child:nth-child(odd) .wp-block-list {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: 1.25rem;
	}
	.gc-footer .wp-block-list {
		gap: 0;
	}
	.gc-footer .wp-block-list a {
		display: block;
		padding-block: 0.75rem; /* 20px line + 24 = 44px */
		line-height: 1.35;      /* wrapped two-line labels stay compact */
	}
	.gc-footer h4 {
		margin-bottom: 0.25rem;
	}
	.gc-footer .wp-block-social-links {
		gap: 0 0.25rem;
		margin-inline-start: -10px; /* ( 44px box - 24px svg ) / 2: the icon sits on the 20px gutter, where it was before the boxes grew */
	}
	.gc-footer .wp-block-social-links .wp-social-link a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
	}
	.gc-footer__badge {
		font-size: 0.75rem;
		padding: 0.15rem 0.55rem;
		/* As an inline-block on the h4's 1.28 leading the badge made the Partners line box 21.6px
			beside Resources' 19.2px, so every link under it sat 2-3px low once the columns shared a row. */
		line-height: 1;
		vertical-align: 1px;
	}
}

@media ( hover: none ) {
	body .wp-block-button__link:hover,
	.wp-block-group.is-style-gc-card-hover:hover,
	.wp-block-column.is-style-gc-card-hover:hover,
	.is-style-gc-cards .wp-block-post-template > li > .wp-block-group:hover,
	body .gc-plan:hover,
	.is-style-gc-card-hover:hover .gc-icon-block {
		transform: none;
	}
	.wp-block-group.is-style-gc-card-hover:hover,
	.wp-block-column.is-style-gc-card-hover:hover,
	.is-style-gc-cards .wp-block-post-template > li > .wp-block-group:hover {
		border-color: var( --wp--preset--color--line );
		box-shadow: var( --wp--preset--shadow--card );
	}
	body .gc-plan:hover {
		box-shadow: var( --wp--preset--shadow--card );
	}
	body .gc-plan.is-featured:hover {
		box-shadow: var( --wp--preset--shadow--raised );
	}
	.gc-bento > .gc-bento__card:hover { /* (0,3,0): hero.css prints after theme.css */
		border-color: var( --wp--preset--color--line );
		box-shadow: none;
	}
}

@media ( max-width: 781px ) {
	/* The compare-page table is excluded: H4 makes it FIT; this rule makes plain tables SCROLL. */
	.gc-page-body .wp-block-table:not(.is-style-gc-compare) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gc-page-body .wp-block-table:not(.is-style-gc-compare) table {
		min-width: 32rem;
	}
	.gc-page-body .wp-block-table:not(.is-style-gc-compare) :is(th, td) {
		padding: 0.6rem 0.75rem;
		vertical-align: top;
		text-align: left;
	}
	.gc-page-body :is(ul, ol):not([class*="is-style-gc-"]) > li + li {
		margin-block-start: 0.5rem;
	}
	.gc-page-body :is(p, li) {
		overflow-wrap: break-word;
	}
	.wp-block-query-pagination {
		gap: 0.5rem;
	}
	.wp-block-query-pagination .page-numbers,
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding-inline: 0.75rem;
		border: 1px solid var( --wp--preset--color--line );
		border-radius: var( --wp--custom--radius--md );
		font-size: var( --wp--preset--font-size--small );
		text-decoration: none;
	}
	.wp-block-query-pagination .page-numbers.current {
		background: var( --wp--preset--color--primary );
		border-color: var( --wp--preset--color--primary );
		color: #fff;
	}
	body .wp-block-post-terms.is-style-gc-pills a {
		position: relative;
		padding: 0.45rem 0.85rem;
		margin: 0 0.5rem 0.5rem 0;
	}
	.wp-block-post-terms.is-style-gc-pills a::after {
		content: "";
		position: absolute;
		inset: -4px 0; /* 44px hit area */
	}
}

@media ( max-width: 781px ) {
	/* Query cards were 20px apart, feature cards 24px, one scroll apart. */
	.is-style-gc-cards .wp-block-post-template.is-layout-grid {
		gap: var( --wp--preset--spacing--30 );
	}
}

/* -------------------------------------------------------------------------
   Hub title band (parts/hub-hero*.html): flat, two columns, a real slot
   ---------------------------------------------------------------------- */

.gc-hub-hero {
	background-color: var( --wp--preset--color--surface );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.gc-hub-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--lg );
}

/* A bound button with nothing bound to it renders empty: hide it. */

.gc-hub-hero__actions .wp-block-button__link:empty,
.gc-hub-hero__actions .wp-block-button:has( > .wp-block-button__link:empty ) {
	display: none;
}

/* A comparison is a document: no right-column slot. */

.single-gc_compare .gc-hub-hero__aside {
	display: none;
}

/* Keyed facts (regulation, partner), a definition list drawn from post meta. */

.gc-spec {
	display: grid;
	grid-template-columns: minmax( 7rem, 9rem ) 1fr;
	gap: 0.7rem 1.25rem;
	padding: 1.25rem 1.5rem;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
}

.gc-spec > p {
	margin-block: 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.45;
}

.gc-spec__label {
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
}

.gc-spec__value {
	color: var( --wp--preset--color--ink-soft );
}

.gc-spec__value:empty,
.gc-spec__label:has( + .gc-spec__value:empty ) {
	display: none;
}

/* Two flat bands that used to be gradients. */

.gc-stats {
	border-block: 1px solid var( --wp--preset--color--line );
}

.gc-cta {
	border-top: 1px solid var( --wp--preset--color--line );
}

@media ( max-width: 781px ) {
	.gc-cta .wp-block-buttons {
		justify-content: flex-start;
	}
	.gc-hub-hero .wp-block-columns {
		row-gap: var( --wp--preset--spacing--40 );
	}
}

/* Long-form documents keep a stepped heading scale at every width (was phone-only). */

:is(.page-template-page-legal, .single-post) .gc-page-body h2 {
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

:is(.page-template-page-legal, .single-post) .gc-page-body h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

:is(.page-template-page-legal, .single-post) .gc-page-body h4 {
	font-size: 1.0625rem;
	line-height: 1.4;
}

:is(.page-template-page-legal, .single-post) .gc-page-body > :is(h2, h3, h4) {
	margin-block-start: 2.25rem;
}

:is(.page-template-page-legal, .single-post) .gc-page-body.gc-page-body > :is(h2, h3, h4) + * {
	margin-block-start: 0.75rem;
}

:is(.page-template-page-legal, .single-post) .gc-page-body :is(p, li, td) a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: rgba( 3, 69, 79, 0.45 );
}

/* Phone stop-gaps: a screenshot never fills more than 60% of the screen, and an
   install snippet wraps instead of clipping. */

@media ( max-width: 600px ) {
	.gc-slot img {
		width: auto;
		max-width: 100%;
		max-height: 60vh;
	}
	.is-style-gc-panel pre.wp-block-code > code {
		white-space: pre-wrap;
		word-break: break-all;
	}
}

/* A related-posts row with nothing in it renders nothing (single-level :has). */

.gc-related:not( :has( .wp-block-post ) ) {
	display: none;
}

/* Support: the knowledge-base search sits on the same grid line as the H1 and the cards. */

.wp-block-post-content > .gc-section:first-child > .wp-block-search {
	max-width: var( --wp--style--global--wide-size );
}

.wp-block-post-content > .gc-section:first-child > .wp-block-search .wp-block-search__inside-wrapper {
	max-width: 46rem;
}

/* The title band already cleared the header; the first section must not do it again (any width). */

.gc-hero ~ .wp-block-group > .wp-block-post-content > .gc-section:first-child,
.gc-hero ~ .wp-block-group > .wp-block-post-content > .gc-section--tight:first-child {
	padding-block-start: var( --wp--preset--spacing--60 );
}

/* A grid of exactly four cards is two by two, never three plus one. */

.gc-page-body .alignwide > .is-layout-grid:has( > :nth-child( 4 ):last-child ) {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

/* Query cards are whole-card links at every width (was phone-only). */

.is-style-gc-cards .wp-block-post-template > li > .wp-block-group {
	position: relative;
}

.is-style-gc-cards .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var( --wp--custom--radius--lg );
}

.is-style-gc-cards .wp-block-post-template > li > .wp-block-group a:not( .wp-block-post-title a ) {
	position: relative;
	z-index: 1;
}

/* ---- assets/css/hero.css ---- */
/**
 * The centred homepage hero.
 *
 * Everything here is drawn in CSS, the perspective grid, the star field, the
 * floating regulation cursors and the dashboard preview. No image assets, so
 * the hero costs one HTTP request and stays sharp on any display.
 */

/* -------------------------------------------------------------------------
   Backdrop
   ---------------------------------------------------------------------- */

.gc-hero--center {
	--gc-hero-line: rgba( 255, 255, 255, 0.13 );

	text-align: center;
	overflow: hidden;
}

/* A perspective grid that fades out before it reaches the headline. */

.gc-hero--center::before {
	content: "";
	position: absolute;
	inset-inline: -20%;
	top: 0;
	height: 46%;
	z-index: 1;
	background-image:
		linear-gradient( var( --gc-hero-line ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --gc-hero-line ) 1px, transparent 1px );
	background-size: 64px 44px;
	transform: perspective( 40rem ) rotateX( 62deg );
	transform-origin: top center;
	-webkit-mask-image: linear-gradient( 180deg, rgba( 0, 0, 0, 0.9 ) 0%, transparent 78% );
	mask-image: linear-gradient( 180deg, rgba( 0, 0, 0, 0.9 ) 0%, transparent 78% );
	pointer-events: none;
}

/* Glows plus a sparse star field, so the gradient is never a flat rectangle. */

.gc-hero--center::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient( 40rem 22rem at 50% -4%, rgba( 255, 255, 255, 0.22 ) 0%, transparent 64% ),
		radial-gradient( 52rem 34rem at 50% 92%, rgba( 4, 47, 54, 0.55 ) 0%, transparent 66% ),
		radial-gradient( 1.5px 1.5px at 12% 26%, rgba( 255, 255, 255, 0.65 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 84% 18%, rgba( 255, 255, 255, 0.55 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 68% 42%, rgba( 255, 255, 255, 0.45 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 26% 58%, rgba( 255, 255, 255, 0.40 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 92% 62%, rgba( 255, 255, 255, 0.35 ), transparent 100% ),
		radial-gradient( 1.5px 1.5px at 40% 12%, rgba( 255, 255, 255, 0.45 ), transparent 100% );
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Mark and eyebrow chip
   ---------------------------------------------------------------------- */

.gc-hero__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto var( --wp--preset--spacing--50 );
	border-radius: 999px;
	background: #fff;
	color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 8px rgba( 255, 255, 255, 0.10 ), 0 18px 40px -18px rgba( 3, 28, 34, 0.8 );
}

.gc-hero__mark svg {
	width: 1.75rem;
	height: 1.75rem;
}

.gc-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.15rem;
	color: rgba( 255, 255, 255, 0.92 );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	line-height: 1.2;
	/* Hairlines either side, as on the reference, drawn as borders so they
	   scale with the chip rather than needing extra elements. */
	border-left: 1px solid rgba( 255, 255, 255, 0.28 );
	border-right: 1px solid rgba( 255, 255, 255, 0.28 );
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.12 ), rgba( 255, 255, 255, 0.04 ) );
}

.gc-hero__chip svg {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: #fff;
}

/* -------------------------------------------------------------------------
   Certification badges
   ---------------------------------------------------------------------- */

/* Supplied as one artwork, so it is sized by height and left to keep its own
   proportions, nothing here should ever restyle the marks themselves. */

.gc-hero__badges {
	display: flex;
	justify-content: center;
}

.gc-hero__badges img {
	height: 5.5rem;
	width: auto;
	max-width: 100%;
}

@media ( max-width: 600px ) {
	.gc-hero__badges img {
		height: 3.5rem;
	}
}

/* -------------------------------------------------------------------------
   Hero buttons
   ---------------------------------------------------------------------- */

.wp-block-button.is-style-gc-glass-btn .wp-block-button__link {
	background: rgba( 255, 255, 255, 0.16 );
	border: 1px solid rgba( 255, 255, 255, 0.30 );
	color: #fff;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	box-shadow: 0 14px 32px -16px rgba( 3, 28, 34, 0.9 );
}

.wp-block-button.is-style-gc-glass-btn .wp-block-button__link:hover {
	background: rgba( 255, 255, 255, 0.26 );
	color: #fff;
}

/* -------------------------------------------------------------------------
   Hero proof rows
   ---------------------------------------------------------------------- */

.gc-hero__proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: var( --wp--preset--spacing--30 ) 0 0;
	padding: 0;
}

.gc-hero__proof li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.3;
	color: rgba( 255, 255, 255, 0.88 );
}

.gc-hero__proof svg {
	width: 0.9rem;
	height: 0.9rem;
	flex: none;
	color: var( --wp--preset--color--accent );
}

/* -------------------------------------------------------------------------
   Legacy dashboard mock (kept for the Site Editor's existing content)
   ---------------------------------------------------------------------- */

.gc-dash {
	position: relative;
	z-index: 2;
	max-width: 76rem;
	margin: var( --wp--preset--spacing--60 ) auto 0;
	padding-inline: clamp( 0.5rem, 3vw, 2rem );
}

.gc-dash__frame {
	/* Clipped at the hero's bottom edge, exactly as a real screenshot would
	   be if it continued past the fold. */
	height: clamp( 15rem, 34vw, 24rem );
	overflow: hidden;
	border-radius: var( --wp--custom--radius--lg ) var( --wp--custom--radius--lg ) 0 0;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-bottom: 0;
	background: #fff;
	box-shadow: 0 -2px 0 rgba( 255, 255, 255, 0.25 ), 0 40px 80px -30px rgba( 3, 28, 34, 0.7 );
	text-align: left;
	color: var( --wp--preset--color--contrast );
	font-size: 0.75rem;
	line-height: 1.35;
}

.gc-dash__topbar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.gc-dash__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--contrast );
	white-space: nowrap;
}

.gc-dash__brand svg {
	width: 1.15rem;
	height: 1.15rem;
	color: var( --wp--preset--color--primary );
}

.gc-dash__brand b {
	color: var( --wp--preset--color--ink-faint );
	font-weight: 600;
}

.gc-dash__crumbs {
	color: var( --wp--preset--color--ink-soft );
	white-space: nowrap;
}

.gc-dash__crumbs i {
	font-style: normal;
	color: var( --wp--preset--color--ink-faint );
	padding-inline: 0.2rem;
}

.gc-dash__crumbs b {
	color: var( --wp--preset--color--primary );
	font-weight: 500;
}

.gc-dash__search {
	margin-inline-start: auto;
	padding: 0.4rem 0.9rem;
	min-width: 11rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--sm );
	color: var( --wp--preset--color--ink-faint );
}

.gc-dash__avatar {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	border-radius: 999px;
	background: linear-gradient( 140deg, #0d8394, #03454f );
}

.gc-dash__body {
	display: flex;
	height: 100%;
}

.gc-dash__side {
	flex: none;
	width: 11rem;
	padding: 0.9rem 0.75rem;
	border-right: 1px solid var( --wp--preset--color--line );
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background: var( --wp--preset--color--surface );
}

.gc-dash__user {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem 0.85rem;
}

.gc-dash__user-dot {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	background: linear-gradient( 140deg, #cee7eb, #8ebdc6 );
	flex: none;
}

.gc-dash__user b {
	display: block;
	font-weight: 600;
}

.gc-dash__user small {
	color: var( --wp--preset--color--ink-faint );
	font-size: 0.6875rem;
}

.gc-dash__nav {
	padding: 0.45rem 0.6rem;
	border-radius: var( --wp--custom--radius--sm );
	color: var( --wp--preset--color--ink-soft );
}

.gc-dash__nav.is-active {
	background: var( --wp--preset--color--primary-soft );
	color: var( --wp--preset--color--primary );
	font-weight: 600;
}

.gc-dash__main {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.1rem;
}

.gc-dash__stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 0.7rem;
}

.gc-dash__stat {
	display: block;
	padding: 0.7rem 0.8rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md );
	background: #fff;
}

.gc-dash__stat small {
	display: block;
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.6875rem;
}

.gc-dash__stat b {
	display: block;
	margin: 0.15rem 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.gc-dash__stat i {
	font-style: normal;
	color: var( --wp--preset--color--ink-faint );
	font-size: 0.6875rem;
}

.gc-dash__tabs {
	display: flex;
	gap: 1.1rem;
	margin-top: 1.1rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--ink-soft );
	overflow: hidden;
	white-space: nowrap;
}

.gc-dash__tabs .is-active {
	color: var( --wp--preset--color--primary );
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var( --wp--preset--color--primary );
	padding-bottom: 0.55rem;
	margin-bottom: -0.55rem;
}

.gc-dash__panel {
	margin-top: 0.9rem;
	height: 8rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md );
	background:
		linear-gradient( 90deg, var( --wp--preset--color--surface ) 0 38%, transparent 38% ) 0 1.4rem / 100% 0.5rem no-repeat,
		linear-gradient( 90deg, var( --wp--preset--color--surface ) 0 62%, transparent 62% ) 0 3rem / 100% 0.5rem no-repeat,
		linear-gradient( 90deg, var( --wp--preset--color--surface ) 0 48%, transparent 48% ) 0 4.6rem / 100% 0.5rem no-repeat,
		#fff;
	background-origin: content-box;
	padding: 0.9rem;
}

@media ( max-width: 900px ) {
	.gc-dash__side {
		display: none;
	}

	.gc-dash__stats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* -------------------------------------------------------------------------
   Bento feature grid
   ---------------------------------------------------------------------- */

.gc-bento {
	/* The grid is ours rather than WordPress's block layout: layout classes are
	   only emitted for blocks saved in the editor, so a static pattern would
	   render as a plain stack. */
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
	align-items: stretch;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

/* WordPress prints the group's block gap as a top margin on every child after
   the first. On a grid item that margin is not a gap: it shortens the stretched
   item and shifts it down, which is why the second card started 24px below the
   first and still finished level with it. The grid has its own `gap`, so the
   margins are only in the way. */

.gc-bento > .gc-bento__card {
	margin-block: 0;
}

.gc-bento__card--wide {
	grid-column: span 2;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.gc-bento__card {
	position: relative;
	overflow: hidden;
	padding: var( --wp--preset--spacing--40 );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--xl );
	background: var( --wp--preset--color--surface );
	transition: border-color 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 200ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-bento__card:hover {
	border-color: rgba( 3, 69, 79, 0.35 );
}

/* Wide cards put the copy beside the art; narrow cards stack it. */

.gc-bento__card--wide {
	gap: var( --wp--preset--spacing--40 );
}

.gc-bento__card--wide.gc-bento__card--flip {
	flex-direction: row-reverse;
}

.gc-bento__copy {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.gc-bento__copy h3 {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--contrast );
}

.gc-bento__copy p {
	margin: 0.6rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
	color: var( --wp--preset--color--ink-soft );
}

.gc-bento__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.gc-bento__link span {
	transition: transform 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-bento__link:hover span {
	transform: translateX( 3px );
}

.gc-bento__art {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	margin-block-start: auto;
}

/* No frame, fill or shadow here, the card already provides the surface, and
   stacking a second one made the art look pasted on. The image sits flat. */

.gc-bento__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--md );
}

/* On a wide card the art sits beside the copy, so it must not also push
   itself to the bottom. */
.gc-bento__card--wide .gc-bento__art {
	margin-block-start: 0;
}

/* A narrow card stacks its copy over its art and stretches to the height of
   the wide card beside it. Laid out as a column, the leftover height falls
   between the two, `margin-block-start: auto` on the art, instead of pooling
   under the image and leaving a deeper band of empty card at the bottom than
   at the top. The `gap` is the floor, for when there is no slack to share. */

.gc-bento__card:not(.gc-bento__card--wide) {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--30 );
}

.gc-bento__card:not(.gc-bento__card--wide) .gc-bento__copy {
	flex: 0 0 auto;
}

.gc-bento__card:not(.gc-bento__card--wide) .gc-bento__art {
	margin-block-start: auto;
}

@media ( max-width: 1080px ) {
	.gc-bento {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.gc-bento__card--wide {
		grid-column: span 2;
	}
}

@media ( max-width: 720px ) {
	.gc-bento {
		grid-template-columns: minmax( 0, 1fr );
	}

	.gc-bento__card--wide,
	.gc-bento__card--wide.gc-bento__card--flip {
		grid-column: span 1;
		flex-direction: column;
		align-items: stretch;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gc-bento__card,
	.gc-bento__link span {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Image slots
   ---------------------------------------------------------------------- */

/* Every product visual on the site is one of these: a framed, shadowed slot
   holding an ordinary Image block. Select the image in the editor and use
   "Replace" to drop in a real screenshot, the frame, radius, shadow and crop
   are handled here, so any image lands looking deliberate. */

/* No frame, fill or shadow, the image carries itself. Only the radius and the
   clip stay, so a screenshot with square corners still sits correctly. */

.gc-slot {
	margin: 0;
	border-radius: var( --wp--custom--radius--xl );
	overflow: hidden;
}

.gc-slot img {
	display: block;
	width: 100%;
	height: auto;
}

/* On the dark hero the hairline needs to be light, or it disappears. */

/* Square off the bottom corners: the image runs off the edge of the hero band
   rather than ending inside it, so rounding there would read as a mistake. */

.gc-slot--hero {
	margin-top: var( --wp--preset--spacing--60 );
	border-radius: var( --wp--custom--radius--xl ) var( --wp--custom--radius--xl ) 0 0;
}

/* Clipped at the fold, so the composition continues past the section edge
   rather than being letterboxed into it. */

.gc-slot--hero img {
	max-height: 28rem;
	object-fit: cover;
	object-position: top center;
}

@media ( max-width: 782px ) {
	.gc-slot--hero img {
		max-height: 16rem;
	}
}


/* The scanner panel centres its field inside the band. */

/* -------------------------------------------------------------------------
   Split home hero
   ---------------------------------------------------------------------- */

/* Copy on the left over the artwork's dark side, product shot on the right
   inside the bloom. The artwork is set on the element itself rather than on a
   pseudo-element because .gc-hero--center::before is already the perspective
   grid, a transformed box clipped to the top 46%, which would have skewed the
   image and cropped it. The pattern no longer sets an inline gradient, so this
   background is unopposed; the brand gradient stays underneath as the fallback
   for a failed image request. */

.gc-hero--split {
	text-align: left;
	overflow: hidden;
	background-color: #061416;
	background-image: url("../images/hero-bg.webp"), var( --wp--preset--gradient--brand );
	/* Stretched to the box rather than cover-cropped. The artwork is 2:1 and the
	   hero is close to square, so `cover` threw away the whole dark left half, 
	   the side the copy needs, and left a uniform bloom. There is no detail in
	   a blurred aurora for the stretch to distort. */
	background-size: 100% 100%, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* The artwork carries the decoration, so the shared dot field would only add
   noise over it. */

.gc-hero--split::before {
	content: none;
}

/* A scrim that stays heavy under the copy and clears entirely before the
   bloom. Without it the headline sits on the bright half at roughly 2:1. */

.gc-hero--split::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba( 4, 19, 22, 0.72 ) 0%,
		rgba( 4, 19, 22, 0.58 ) 32%,
		rgba( 4, 19, 22, 0.24 ) 54%,
		transparent 74%
	);
	pointer-events: none;
}

.gc-hero--split .wp-block-columns {
	align-items: center;
}

.gc-hero--split .gc-hero__chip {
	margin-inline: 0;
}

.gc-hero--split .gc-hero__proof {
	justify-content: flex-start;
}

.gc-hero--split .gc-hero__badges {
	justify-content: flex-start;
}

.gc-hero--split .gc-hero__badges img {
	height: 4rem;
}

/* The product shot leans out towards the bloom rather than sitting in a neat
   column, which is what gives the reference its depth. */

.gc-hero__aside {
	position: relative;
}

.gc-hero__aside img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--lg );
	box-shadow: 0 40px 90px -40px rgba( 0, 0, 0, 0.75 );
}

@media ( min-width: 782px ) {
	.gc-hero--split .wp-block-columns {
		gap: var( --wp--preset--spacing--60 );
	}

	.gc-hero__aside {
		margin-right: calc( -1 * clamp( 0rem, 6vw, 5rem ) );
	}
}

/* Stacked, the artwork's dark left no longer sits behind the copy, so the
   scrim goes flat instead of horizontal. */

@media ( max-width: 781px ) {
	.gc-hero--split {
		background-size: cover, cover;
		background-position: 72% center, center;
	}

	.gc-hero--split::after {
		background: linear-gradient( 180deg, rgba( 4, 19, 22, 0.9 ) 0%, rgba( 4, 19, 22, 0.72 ) 55%, rgba( 4, 19, 22, 0.5 ) 100% );
	}

	.gc-hero--split .gc-hero__badges img {
		height: 3.25rem;
	}
}

/* WordPress generates its preset font-size classes with !important, so
   `.has-display-xl-font-size` beats an ordinary rule no matter how specific.
   Matching the flag is the only way to set an exact size here without
   stripping the preset off the block. */

.gc-hero--split h1 {
	font-size: 60px !important;
}

/* 60px is a desktop measurement, held flat it puts about four words on a
   phone line. Below 600px it scales instead. */

@media ( max-width: 600px ) {
	.gc-hero--split h1 {
		font-size: clamp( 2.25rem, 9.5vw, 60px ) !important;
	}
}

/* -------------------------------------------------------------------------
   Hero trust row
   ---------------------------------------------------------------------- */

/* Badges and the customer proof sit on one row as a single footer to the
   copy. No rule above them, the gap does the separating. */

.gc-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
	margin-top: var( --wp--preset--spacing--50 );
}

.gc-trustrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.gc-trustrow__faces {
	margin: 0;
	flex: none;
}

/* The overlap and the white rings are part of the supplied artwork, so this
   only has to size it. */

.gc-trustrow__faces img {
	display: block;
	height: 2.9rem;
	width: auto;
}

.gc-trustrow__count {
	margin: 0;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.gc-trustrow__note {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.3;
	color: rgba( 255, 255, 255, 0.7 );
}

/* -------------------------------------------------------------------------
   Hero stage, the layered product visual
   ---------------------------------------------------------------------- */

.gc-hero__stage {
	position: relative;
	isolation: isolate;
}

/* No chrome: the supplied screenshot carries its own frame and shadow, and
   image slots in this theme are deliberately unstyled, no border, no
   background, no box-shadow. This is a positioning container only. */

.gc-hero__frame {
	position: relative;
	z-index: 1;
}

.gc-hero__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( max-width: 781px ) {

	.gc-hero__trust {
		gap: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
	}
}


/* The product shot is the hero's centrepiece, so it takes the room the copy
   column gives back and runs on past the wide column towards the page edge.
   Held to the column it rendered a 1582px source at 519px, a third of size. */

@media ( min-width: 782px ) {
	/* Bleed only into the gutter that actually exists beside the 78rem column,
	   never past it. A flat clamp overshot on a 1440 screen and would have cut
	   the right-hand nodes off the artwork; this measures the gutter instead
	   and keeps 1rem of air at the edge. */
	.gc-hero__stage {
		margin-right: calc( -1 * max( 0px, min( 16rem, ( 100vw - 78rem ) / 2 - 1rem ) ) );
		/* Also reach back over the gap towards the copy. A negative margin grows
		   the box, where `left` would only slide it and leave a hole on the
		   right. Scaled with the viewport so it cannot reach the headline on a
		   narrower screen, where the copy column wraps wider. */
		margin-left: calc( -1 * clamp( 0rem, 7.5vw, 8.5rem ) );
	}
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 600px ) {
	/* Inline padding/margin on the pattern, hence !important. 335 - 2 - 40 = 293px form; the note fits one line. */
}

@media ( max-width: 781px ) {
	.gc-hero__trust {
		margin-top: var( --wp--preset--spacing--40 ); /* 48 -> 32 */
	}
	.gc-hero--split .wp-block-columns {
		row-gap: var( --wp--preset--spacing--40 );   /* copy -> product shot 48 -> 32 */
	}
	/* Flow-layout block gap lands as margin-top on flex items: 20px that pushed the text off the avatars' centre. */
	.gc-hero__trust > *,
	.gc-trustrow > * {
		margin-block: 0;
	}
	.gc-trustrow {
		gap: 0.75rem;
	}
	.gc-trustrow__faces img {
		height: 2.5rem; /* frees ~20px so the note fits one line */
	}
	/* .gc-hero clips, so nothing can side-scroll; visible artwork lands on the 20px grid line. */
	.gc-hero__stage {
		margin-inline: -1rem;
	}
}

@media ( max-width: 600px ) {
	/* Three ticks need 415px: stack them, and beat the generic check-list li margin (0,2,1). */
	.gc-hero .wp-block-list.gc-hero__proof {
		flex-direction: column;
		gap: 0.5rem;
	}
	.gc-hero .wp-block-list.gc-hero__proof > li {
		margin-bottom: 0;
	}
}

/* Any width - colour typo: the comment says 'inverts to the brand teal' but the stroke was #235ee4 (blue). */

@media ( max-width: 720px ) {
	.gc-bento__card {
		padding: var( --wp--preset--spacing--30 ); /* 32 -> 24: copy 270 -> 287px */
	}
	.gc-bento__card--wide,
	.gc-bento__card--wide.gc-bento__card--flip {
		gap: var( --wp--preset--spacing--30 );     /* 32 -> 24, same as the narrow cards */
	}
	.gc-bento__art {
		margin-inline: calc( -1 * var( --wp--preset--spacing--10 ) ); /* art 287 -> 303px, still inside the card */
	}
	/* The arrow link's 13px button padding made the gap 37px on cards that end with a link. */
	.gc-bento__copy > .wp-block-buttons:last-child > .wp-block-button.is-style-gc-arrow {
		margin-bottom: -0.8125rem;
	}
}

/* -------------------------------------------------------------------------
   Light split hero (Features)
   ---------------------------------------------------------------------- */

/* The same two-column build as the home hero, set on a pale band instead of
   the artwork: no scrim, no bloom, no dot field. The product shot is a
   transparent PNG, so it sits straight on the band. */

.gc-hero--split.is-light {
	background-color: var( --wp--preset--color--surface );
	background-image: none;
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.gc-hero--split.is-light::before,
.gc-hero--split.is-light::after {
	content: none;
}

.gc-hero--split.is-light h1 {
	font-size: clamp( 2.25rem, 3.75vw, 52px ) !important;
	color: var( --wp--preset--color--contrast );
}

.gc-hero--split.is-light .is-style-gc-lead {
	color: var( --wp--preset--color--ink-soft );
}


.gc-hero--split.is-light .gc-hero__frame img {
	filter: drop-shadow( 0 24px 40px rgba( 3, 28, 34, 0.14 ) );
}

/* The proof row and its ticks are drawn for the dark hero (white text, lime
   tick); on the band they take the page's ink and the brand teal. */

.gc-hero--split.is-light .gc-hero__proof li {
	color: var( --wp--preset--color--ink-soft );
}

.gc-hero--split.is-light .wp-block-list.is-style-gc-check > li::before {
	color: var( --wp--preset--color--primary );
}

/* The product shot is a square with its own margins baked in; held to 600px
   it keeps the hero under one screen on a laptop. */

@media ( min-width: 782px ) {
	.gc-hero--split.is-light .gc-hero__frame img {
		max-width: 600px;
		margin-inline: auto;
	}
}