/*
 * CrowdStrike Campaign theme styles.
 *
 * Colours, type scale and spacing are NOT defined here. They come from
 * theme.json as CSS custom properties, so the editor and the front end agree.
 * Reference them as var(--wp--preset--color--brand-red) and so on.
 *
 * This file holds only what theme.json cannot express: component styles,
 * interaction states and responsive behaviour.
 */

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

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   2. Focus and skip link

   The mockup is flat and specifies no focus treatment, so this is a build
   decision recorded in BUILD-NOTES.md. A visible focus ring is not optional.
   --------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, video, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/*
 * The video element itself takes focus before its native controls do, and
 * without this it took focus silently. Caught by the keyboard pass in
 * qa/verify.js, which is exactly what that pass is for.
 */
.csc-video:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-red);
	outline-offset: 3px;
}

.csc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.csc-skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
   3. Masthead and co-brand lockup
   --------------------------------------------------------------------------- */

.csc-masthead {
	/*
	 * Measured from the current export, "CS Microsite Page Mockup.png", which is
	 * 1366px wide. That is the design's own canvas width, so one pixel there is
	 * one CSS pixel here and there is no scale factor to argue about.
	 *
	 * mimecast is the topmost ink at y121.
	 */
	padding-block: 121px 0;
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}

/*
 * Lockup alignment.
 *
 * DELIBERATELY NOT following Canva here. The design gives the rule a different
 * length on each page, 52px on the landing page and 129px on Thank You, and
 * sits it off centre against the wordmarks. Adi's call, and it is the right
 * one: one lockup, one rule, centred.
 *
 * The marks are centred on their WORDMARKS, not on their image boxes, which is
 * what the translate on the CrowdStrike mark below is for.
 */
.csc-lockup {
	/*
	 * Three columns with the outer two equal, so the rule lands on the exact
	 * horizontal centre of the page.
	 *
	 * A flex row centred as a group does NOT do this: at the 52px render the
	 * CrowdStrike mark is 379px wide against mimecast's 319px, so the group's
	 * centre, and with it the rule, sits off the page centre. Adi spotted it.
	 */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1rem, 2vw, 27px);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Each mark hugs the rule, so the gap either side of it stays equal. */
.csc-lockup__mark--crowdstrike {
	justify-self: end;
}

.csc-lockup__mark--mimecast {
	justify-self: start;
}

.csc-lockup__mark {
	display: block;
	width: auto;
}

/*
 * Both marks at the same height.
 *
 * This used to be 60px for CrowdStrike against 52px for Mimecast, with a 4px
 * downward nudge, because the CrowdStrike file was not the official mark and its
 * swoosh was proportionally larger, so a matched height made its wordmark read
 * too small. Measured from the landing mockup, the two marks are 616x84 and
 * 511x83: the design aligns them on height, and the 1px difference is inside the
 * export's own antialiasing.
 *
 * The official export the client supplied on 13 August 2026 is 7.279:1 against
 * the mockup's 7.333:1, so matched heights now reproduce the design. The nudge
 * went with it.
 */
.csc-lockup__mark--crowdstrike,
.csc-lockup__mark--mimecast {
	height: clamp(1.95rem, 3.8vw, 52px);
}

/*
 * Sit the two marks on a shared BASELINE, which is what the mockup does.
 *
 * Centring them on their ink instead, which is what this rule used to do, does
 * not align the baselines: CROWDSTRIKE is all caps, so its ink stops at the cap
 * height, while mimecast carries a t ascender and a ® that push its ink box
 * taller than its letters. Equal boxes, centred, leave the CrowdStrike baseline
 * sitting 17.9% of the mark's height too high. Mika spotted it and drew the two
 * baselines on 13 August 2026.
 *
 * Measured from the files, as a fraction of the render height:
 *   CrowdStrike baseline  83/112 = 0.741 from the top of its box
 *   mimecast  baseline   111/112 = 0.991 from the top of its box
 *
 * Measured from `designs/Landing page.png`, the mockup puts the mimecast
 * baseline 4px below the CrowdStrike one on an 83px mark, 4.82%, which is Canva
 * imprecision rather than intent. Solving for the shift that reproduces it:
 *
 *   0.741 + t = 0.991 - 0.0482  ->  t = 0.202
 *
 * That agrees with the mockup read directly: it places the CrowdStrike ink box
 * 17px lower than the mimecast one, on marks about 83px tall.
 *
 * The swoosh therefore hangs well below the shared baseline. That is correct, not
 * a mistake: the mockup drops it 21px below on an 83px mark, 25%.
 *
 * Percentage, not pixels, so it holds at both page sizes and everywhere the
 * height clamp scales down. The Thank You page renders the lockup larger and
 * needs no separate figure.
 */
.csc-lockup__mark--crowdstrike {
	transform: translateY(20.2%);
}

/*
 * One rule, the same on both pages, centred. 56px reads as a clean divider
 * beside a 52px wordmark without competing with it.
 */
.csc-lockup__rule {
	flex: 0 0 auto;
	align-self: center;
	width: 3px;
	height: clamp(2.25rem, 4.1vw, 56px);
	background: var(--wp--preset--color--ink);
}

/*
 * Below the width where the two marks sit side by side they stack and the rule
 * turns horizontal. The design covers one width only, so this is a build
 * decision. Issue #14.
 */
@media (max-width: 30rem) {
	.csc-lockup {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 1rem;
	}

	.csc-lockup__mark--crowdstrike,
	.csc-lockup__mark--mimecast {
		justify-self: center;
	}

	.csc-lockup__mark--crowdstrike {
		margin-bottom: 0;
	}

	.csc-lockup__rule {
		width: 4rem;
		height: 3px;
	}
}

/* ---------------------------------------------------------------------------
   4. Placeholders

   Nothing on either page is a placeholder any more, so the styles that made
   placeholders look unmistakably unfinished have been removed. The last one was
   the disclaimer, deleted from the form on 13 August 2026.

   The section is kept, empty, so the numbering below it does not shift.
   functions.php refers to "section 9 of theme.css" and renumbering would quietly
   make that reference point at the wrong place.

   If a placeholder is ever needed again, style it so it cannot be mistaken for
   approved content in a client review. That was the rule here and it worked: the
   disclaimer survived every review precisely because it looked broken.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   5. Eyebrow heading

   "SEE THE INTEGRATION IN ACTION". Written in sentence case in the content and
   uppercased here, so assistive technology reads real words rather than a
   string of capitals.

   Size is a compromise and is documented in BUILD-NOTES.md: the mockup's cap
   height implies about 26px, its line width implies about 23px. Outfit's
   uppercase proportions differ from the mockup typeface, so both cannot be
   satisfied. 24px sits within a few per cent of each.
   --------------------------------------------------------------------------- */

.csc-eyebrow {
	font-size: 1.575rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   5B. Optional line break

   The mockup breaks "Unified Protection Across / the Modern Attack Surface"
   onto two lines. That break only makes sense while the heading is wide enough
   to hold each half on one line. Below that it produces four ragged lines, so
   the break is dropped and the heading wraps naturally.

   The mockup is flat and does not cover small widths, so this is a build
   decision. Issue #14.
   --------------------------------------------------------------------------- */

@media (max-width: 48rem) {
	.csc-break-wide {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   6. Integration video, issue #19

   The asset finally arrived on 12 August 2026: "CS Microsite Video - NEW Next
   Gen SIEM Video", 1920x1080, 29 seconds, with an audio track.

   NOTE ON THE ASPECT RATIO. This was built at 16:9, then "corrected" to square
   after the Canva editor reported the embed element as 553 x 551 units, then
   put back to 16:9 when the real file turned out to be 1920x1080. The square
   was Canva's own placeholder box for a design it could not load, not the
   frame. Trust the asset over the placeholder.

   It is NOT autoplayed. It carries sound, so browsers would block it anyway,
   and a campaign page that starts talking at you is hostile. It is also
   preload="metadata" rather than "auto", because 5.3MB downloaded on every page
   view would undo the entire performance budget. Only the poster loads up
   front.
   --------------------------------------------------------------------------- */

.csc-video {
	/*
	 * The video's own aspect ratio wins, 16:9, matching the 1920x1080 file.
	 *
	 * The design draws a 550px square frame, but that is the Canva embed
	 * placeholder rather than the footage. Forcing the video into it means
	 * either cropping the sides or letterboxing, and both look wrong. Adi's
	 * call, and the right one.
	 *
	 * Full content column width was chosen over the design's 550px because it
	 * lands at 506px tall against the 549px the design allots the section, so
	 * the page rhythm is preserved as well. At 550px wide it would have been
	 * 309px tall and left a large hole.
	 */
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   7. Benefit list

   In the mockup the list is centred as a block while its items stay left
   aligned, so the bullets form a single vertical line. Measured: every item
   starts at the same x, and the block's centre sits on the page centre.
   --------------------------------------------------------------------------- */

.csc-benefits {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	text-align: left;
}

/*
 * Line rhythm: split into two levers, tightened inside a bullet only.
 *
 * The design runs a uniform 58px step through the list, the same inside a
 * wrapped item as between items, and this used to reproduce it with a single
 * `line-height: 2.18`. That matched Canva to within 1px and read badly: the two
 * lines of a wrapped bullet sat 58px apart while the paragraph directly above
 * them, at the same 26.6px font size, sets its lines 40px apart. The client
 * asked for it tighter on 13 August 2026 and they were right. Adi's call was to
 * make it sensible rather than follow Canva here.
 *
 * So the two gaps are now controlled separately:
 *
 *   1.51  inherited, the theme.json root line-height, so a wrapped bullet now
 *         reads at exactly the same rhythm as the paragraph above it
 *   0.67em added between items, which puts the step between bullets back to
 *         1.51 + 0.67 = 2.18em, the 58px the design draws
 *
 * The gap between bullets is therefore UNCHANGED and still matches the design.
 * Only the wrap inside a bullet moved.
 *
 * `em` rather than px because the `large` preset is fluid, clamping between
 * 1.3125rem and 1.6625rem, so a pixel margin would drift as the font scales.
 *
 * Side effect, in our favour: 2.18 left half its leading hanging below the last
 * line, which CSS counts and Canva does not, and the old note here recorded the
 * gap to "Request a Demo" landing about 25px too large as a result. At 1.51 that
 * overhang shrinks by about 9px, so that gap gets closer to the design too.
 */
.csc-benefits li + li {
	margin-top: 0.67em;
}

/* ---------------------------------------------------------------------------
   9. Request a Demo form

   Gravity Forms' own CSS is disabled in functions.php, so everything here is
   written from scratch against the approved mockup.

   Every value below was measured from designs/Landing page.png at the 1920px
   export and divided by the 1.5 assumed scale. The form column is 896px, which
   is slightly wider than the 880px text column. That is what the artwork draws,
   so it is kept rather than rounded to match.
   --------------------------------------------------------------------------- */

.csc-form-band {
	/* Band top to sub line 40px, button to band bottom about 108px. */
	padding-block: 1.125rem 4.5rem;
}

.csc-form-band > * {
	max-width: 56rem; /* 896px */
	margin-inline: auto;
}

.csc-form-wrap {
	/* Sub line to first label, measured 72px at the export. */
	margin-top: 2.375rem;
}

/*
 * Things Gravity Forms hides in its own stylesheet.
 *
 * Because that stylesheet is disabled, these MUST be hidden here or they render
 * as ordinary fields. The honeypot is the dangerous one: Gravity Forms rejects
 * any submission where it is filled in, so leaving it visible means a real
 * person can fill it and have their enquiry silently discarded as spam.
 *
 * Found by rendering the page, not by reading the markup.
 */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield_visibility_hidden {
	display: none !important;
}

.gform_wrapper .gform_fields .gform_validation_container {
	display: none !important;
}

/* Layout ------------------------------------------------------------------ */

.gform_wrapper form {
	margin: 0;
}

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	/* Input bottom to next label top, measured 58px at the export. */
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gfield {
	margin: 0;
	padding: 0;
}

/* Labels ------------------------------------------------------------------ */

.gform_wrapper .gfield_label {
	display: block;
	/* Label bottom to input top, measured 25px at the export. */
	margin-bottom: 0.6875rem;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.2;
}

/*
 * Every field on this form is required, and the mockup shows no asterisks and
 * no "required fields" legend. They are hidden visually only. Inputs still
 * carry aria-required, so assistive technology is told. Build decision, #14.
 */
.gform_wrapper .gfield_required,
.gform_wrapper .gform_required_legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Inputs ------------------------------------------------------------------ */

.gform_wrapper .ginput_container input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* Measured input height 76px. */
	height: 3.1875rem;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	appearance: none;
	transition: border-color 0.15s ease;
}

.gform_wrapper .ginput_container input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/*
 * Hover, focus and error treatments are not in the mockup. Build decisions,
 * recorded in BUILD-NOTES.md.
 */
.gform_wrapper .ginput_container input:hover {
	border-color: var(--wp--preset--color--muted);
}

.gform_wrapper .ginput_container input:focus-visible {
	border-color: var(--wp--preset--color--brand-red);
	outline: 3px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/* Validation -------------------------------------------------------------- */

.gform_wrapper .gfield_error .ginput_container input {
	border-color: var(--wp--preset--color--brand-red);
	border-width: 2px;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--brand-red);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.gform_wrapper .gform_validation_errors {
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--wp--preset--color--brand-red);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	font-size: 1rem;
}

.gform_wrapper .gform_validation_errors h2 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

/* Submit ------------------------------------------------------------------ */

.gform_wrapper .gform_footer {
	/* Last input bottom to button top, 43px. */
	margin: 1.8125rem 0 0;
	padding: 0;
}

/*
 * Gravity Forms 3.0 renders the submit control as `<button type="submit">`.
 * Earlier versions rendered `<input type="submit">`, which is what this file
 * originally targeted, so the button lost every one of these styles the moment
 * the plugin was updated.
 *
 * Both elements are matched, deliberately. It means a plugin rollback does not
 * break the design a second time, and it costs nothing.
 */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"] {
	/* iOS Safari puts its own rounding and gradient on both of these. */
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* Measured button height 96px, label 40px. */
	min-height: 4rem;
	padding: 0.4rem 1rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: clamp(1.5rem, 4.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover {
	background: #c00b11;
}

.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer button[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* Stops a second submission while the first is still in flight. */
.gform_wrapper .gform_footer input[type="submit"][disabled],
.gform_wrapper .gform_footer button[type="submit"][disabled] {
	opacity: 0.65;
	cursor: progress;
}

/* Disclaimer -------------------------------------------------------------- */

/*
 * KEPT ON PURPOSE, even though nothing carries this class right now.
 *
 * The disclaimer was a Gravity Forms HTML field, deleted on 13 August 2026 so
 * the placeholder wording was not visible in a client demo. Excelerate still owes
 * us the real wording, and when it arrives it goes back the same way: an HTML
 * field on form 1 holding `<p class="csc-disclaimer">`. Deleting these two rules
 * would mean rebuilding them then.
 */
.csc-disclaimer {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.gform_wrapper .gfield--type-html {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   10. Thank You page, issue #9

   The whole page sits on the surface grey. Values measured from
   designs/Thank You page.png at the 1920px export, divided by the 1.5 scale.
   --------------------------------------------------------------------------- */

.page-thank-you {
	background: var(--wp--preset--color--surface);
}

/*
 * The Thank You page draws a DIFFERENT lockup from the landing page, measured
 * from the current 1366px exports:
 *
 *            CrowdStrike   mimecast   rule      band top
 *   landing  437 x 60      319 x 52   3 x 52    y121
 *   thankyou 437 x 61      342 x 56   3 x 129   y84
 *
 * CrowdStrike is the same on both. mimecast is larger here and the rule is
 * more than twice as tall. The three are centred on each other rather than
 * baseline aligned, which is how this page draws them.
 */
.page-thank-you .csc-masthead {
	padding-block-start: 84px;
	background: transparent;
}

/*
 * The lockup is larger on this page, but the two marks still match each other.
 *
 * The Thank You mockup draws mimecast 6% smaller than the landing mockup does
 * while drawing CrowdStrike at the same size, which reads as an inconsistency in
 * the client's Canva file rather than an intention: 616x85 against 481x78 here,
 * 616x84 against 511x83 there. This follows the same call already made for the
 * rule above, one lockup that behaves the same on both pages, and keeps mimecast
 * at the 56px the design gives it.
 */
.page-thank-you .csc-lockup__mark--crowdstrike,
.page-thank-you .csc-lockup__mark--mimecast {
	height: clamp(2.1rem, 4.1vw, 56px);
}

/*
 * The rule is deliberately NOT overridden here. The design makes it 129px on
 * this page against 52px on the landing page; one consistent rule is better.
 */

/* Confirmation tick ------------------------------------------------------- */

.csc-tick {
	display: block;
	width: 213px;
	height: 213px;
	margin-inline: auto;
	color: var(--wp--preset--color--brand-red-deep);
}

.csc-tick circle,
.csc-tick path {
	fill: none;
	stroke: currentColor;
	/*
	 * Measured: 10px stroke on a 199px circle, so 5% of the diameter. The
	 * viewBox is 100 units wide, so that is 5, not 10. It was 10, which drew
	 * the mark at double weight.
	 */
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Top block --------------------------------------------------------------- */

/*
 * The gap below the lockup is padding on the section, not margin on the tick.
 *
 * WordPress emits `.wp-block-group.is-layout-constrained > :first-child
 * { margin-block-start: 0 }` with real class specificity, which beat
 * `.csc-tick`. The tick ended up flush against the rule, which is what Adi
 * spotted. Padding on the section cannot be overridden that way.
 *
 * Measured: mockup lockup ends at y298, tick starts at y347, so 33px.
 */
.csc-ty-head {
	padding-top: 2.0625rem;
	text-align: center;
}

.csc-ty-head h1 {
	/* Measured 96px, against the landing page h1 at 93px. */
	margin-block: 3.5625rem 0;
	/* Ink height matched to the mockup: 97px at the 1280px design width. */
	font-size: clamp(2.875rem, 8.1vw, 103.7px);
}

.csc-ty-lead {
	margin-block: 0.375rem 0;
	font-size: clamp(1.25rem, 2.13vw, 27px);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.csc-ty-body {
	margin-block: 1.875rem 0;
	font-size: clamp(1.3125rem, 2.82vw, 35.8px);
	line-height: 1.5;
}

/* What happens next ------------------------------------------------------- */

.csc-steps {
	margin-block: 6.5625rem 0;
	padding-bottom: 6rem;
}

.csc-steps__title {
	margin: 0;
	font-size: clamp(1.5rem, 3.39vw, 42.7px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

.csc-steps__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/*
	 * Measured from the current 1366px export: the icon circles span x152..1172
	 * and the column pitch is 433px, so the block is about 1299px wide. That is
	 * far wider than the 900px text column, which is what the artwork draws.
	 *
	 * It has to break out of the constrained parent to get there. Left at the
	 * parent's width the columns came out 220px and column 3 wrapped onto four
	 * lines instead of three.
	 */
	width: 1299px;
	max-width: 100%;
	margin: 60px auto 0;
	padding: 0;
	list-style: none;
}

.csc-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: 1.5rem;
	text-align: center;
}

/*
 * The rules sit between the columns, not after the last one, and they are a
 * fixed height rather than the full column height.
 *
 * Measured: 4px wide and 343px tall, starting 11px below the top of the icon
 * circle. This was 1px until the section by section comparison caught it, the
 * same mistake as the lockup rule.
 */
.csc-steps__item {
	position: relative;
}

.csc-steps__item + .csc-steps__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6875rem;
	width: 4px;
	height: 21.4375rem;
	background: var(--wp--preset--color--rule);
}

.csc-steps__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 154px;
	height: 154px;
	border-radius: 50%;
	background: var(--wp--preset--color--body);
	color: var(--wp--preset--color--base);
}

.csc-steps__icon svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
}

.csc-steps__number {
	margin-block: 33px 0;
	/* Width implies 83px, glyph height implies 93px. Outfit's digits are
	   narrower relative to their height than the mockup typeface, so 88px is
	   the midpoint. Same substitution effect as elsewhere, see issue #18. */
	/* Ink height matched to the mockup: 89.5px at the 1280px design width. */
	font-size: clamp(3rem, 7.53vw, 96.2px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}

.csc-steps__text {
	margin-block: 17px 0;
	font-size: clamp(1.1875rem, 2.36vw, 30.2px);
	line-height: 1.43;
	/*
	 * The measure is narrower than the column. Without it the copy wraps a word
	 * later than the mockup does, which was only visible once the text was
	 * corrected to its real size. Mockup's widest column line is 290px.
	 */
	/* Widest line the design draws in a column is 333px. */
	max-width: 340px;
	margin-inline: auto;
}

/*
 * The mockup covers one width only. Below the point where three columns stop
 * working the steps stack, and the vertical rules become horizontal ones so the
 * separation is not lost. Build decision, issue #14.
 */
@media (max-width: 56rem) {
	.csc-steps__list {
		grid-template-columns: 1fr;
		gap: 3rem;
		/* The explicit desktop width has to be released here, or it overflows
		   the viewport on a phone. Caught by the verification pass. */
		width: 100%;
		max-width: 30rem;
	}

	.csc-steps__item + .csc-steps__item {
		padding-top: 3rem;
	}

	.csc-steps__item + .csc-steps__item::before {
		position: static;
		display: block;
		width: 8rem;
		height: 4px;
		margin: 0 auto 3rem;
	}
}

/* ---------------------------------------------------------------------------
   11. Main
   --------------------------------------------------------------------------- */

.csc-main {
	display: block;
}

.csc-notfound {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--40);
	text-align: center;
}

/* ---------------------------------------------------------------------------
   6. Reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}