/* ─────────────────────────────────────────────────────────────
   GTD Desco — the quote configurator.

   WHAT WAS WRONG

   Five WPForms forms in a Bootstrap modal, one per GT rig. The
   modal opened onto "Price: $820,000.00" in the plugin's own
   grey, above the rig's marketing paragraph reprinted a third
   time. The most consequential number on the site was set in a
   plugin's default type at 16px, and it was free.

   WHAT THIS DOES

   Three acts, each a full-bleed band, each doing one thing:
   choose the machine, add what the job needs, hand over who you
   are. Then the number, on its own ground, at the size the
   number deserves.

   THE MOMENT

   The figure. It arrives on ink at display scale with a red
   rule wiping out underneath it, and it is the only thing in
   its viewport. Everything before it is deliberately quiet
   about money — no amount appears anywhere in act one or two,
   in the markup or on the screen.
   ───────────────────────────────────────────────────────────── */

.gtd-pick,
.gtd-opts,
.gtd-gate,
.gtd-num,
.gtd-break,
.gtd-decide {
	--k-red:    var(--gtd-red, #c60000);
	--k-onDark: #ff5b4a;
	--k-ink:    #141313;
	--k-deep:   #0d1414;
	--k-quiet:  #5c6666;
	--k-line:   #c9cfcf;
	--k-ease:   cubic-bezier(.16, 1, .3, 1);
}

/* The field a person never sees and a machine cannot resist. */
.gtd-build__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Every band that owns its own ground bleeds to the page edge. */
.gtd-pick,
.gtd-gate,
.gtd-num,
.gtd-decide {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* ═════════════════════════════════════════════════════════════
   ACT ONE — THE MACHINE
   ═════════════════════════════════════════════════════════════ */

.gtd-pick {
	padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
	background: var(--k-ink);
	color: #fff;
}

.gtd-pick__rule,
.gtd-gate__rule,
.gtd-decide__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
	background: var(--k-red);
	transform-origin: left;
}

/* !important throughout answers css/type.css, which sets every heading
   and every p/a/li with !important of its own. */
.gtd-pick__title {
	margin: 0 0 clamp(.75rem, 1.5vw, 1.15rem);
	font-size: clamp(2.4rem, 1.2rem + 4vw, 6rem) !important;
	font-weight: 900;
	line-height: .88;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

.gtd-pick__lede,
.gtd-opts__lede,
.gtd-gate__lede,
.gtd-decide__lede {
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
	max-width: 54ch;
	font-size: clamp(1rem, .93rem + .3vw, 1.15rem) !important;
	line-height: 1.55;
}

.gtd-pick__lede { color: rgba(255, 255, 255, .78) !important; }

.gtd-pick__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: clamp(.75rem, 1.4vw, 1.15rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtd-pick__cell { margin: 0; }

.gtd-pick__tile {
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto auto;
	height: 100%;
	padding: clamp(.9rem, 1.8vw, 1.25rem);
	background: #1e1d1d;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
	transition: background .35s var(--k-ease), box-shadow .35s var(--k-ease), transform .35s var(--k-ease);
}

.gtd-pick__tile:hover,
.gtd-pick__tile:focus-visible {
	background: #262424;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
	transform: translateY(-3px);
}

.gtd-pick__tile:focus-visible { outline: 3px solid var(--k-onDark); outline-offset: 3px; }

.gtd-pick__tile.is-on {
	background: var(--k-red);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.gtd-pick__shot {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: clamp(.65rem, 1.4vw, 1rem);
	background: #141313;
	overflow: hidden;
}

.gtd-pick__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .5s var(--k-ease);
}

.gtd-pick__tile:hover .gtd-pick__shot img { transform: scale(1.04); }

/* Not every machine has a photograph on file. An empty frame reads as a
   missing image; a texture reads as a decision. */
.gtd-pick__shot:empty {
	background: repeating-linear-gradient(135deg, #171616 0 10px, #1c1b1b 10px 20px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.gtd-pick__name {
	display: block;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.gtd-pick__series {
	display: block;
	margin-top: .25rem;
	font-size: .7rem !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58) !important;
}

.gtd-pick__mark {
	display: block;
	margin-top: clamp(.75rem, 1.5vw, 1.1rem);
	padding-top: .6rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .7rem !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--k-onDark);
}

.gtd-pick__tile.is-on .gtd-pick__mark {
	border-top-color: rgba(255, 255, 255, .35);
	color: #fff;
}

.gtd-pick--empty { padding-block: clamp(4rem, 10vw, 8rem); }
.gtd-pick--empty a { color: var(--k-onDark) !important; }

.gtd-build__msg {
	margin: 0 0 1.25rem;
	font-size: .95rem !important;
	font-weight: 700;
	color: var(--k-onDark) !important;
}

/* ═════════════════════════════════════════════════════════════
   ACT TWO — THE CONFIGURATION
   ═════════════════════════════════════════════════════════════ */

.gtd-opts { padding-block: clamp(3rem, 6.5vw, 5.5rem); }

.gtd-opts__title,
.gtd-break__title {
	margin: 0 0 clamp(.75rem, 1.5vw, 1.1rem);
	font-size: clamp(1.7rem, 1.1rem + 2vw, 3.1rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--gtd-ink, #101d1d) !important;
}

.gtd-opts__lede { color: var(--k-quiet) !important; }

.gtd-opts__none {
	margin: 0;
	max-width: 58ch;
	font-size: clamp(1rem, .93rem + .3vw, 1.15rem) !important;
	line-height: 1.55;
	color: var(--k-quiet) !important;
}

.gtd-opts__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--k-ink);
}

.gtd-opts__row { margin: 0; border-bottom: 1px solid var(--k-line); }

.gtd-opts__opt {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 1.75rem);
	padding-block: clamp(1rem, 2vw, 1.5rem);
	cursor: pointer;
	transition: background .25s var(--k-ease);
}

/* The row answers by moving its type, not its box: animating padding on a
   full-width row relayouts the whole list on every hover. */
.gtd-opts__opt:hover { background: #f4f5f5; }

.gtd-opts__label { transition: transform .3s var(--k-ease); }
.gtd-opts__opt:hover .gtd-opts__label { transform: translateX(.4rem); }

.gtd-opts__opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.gtd-opts__box {
	position: relative;
	display: block;
	width: clamp(1.5rem, 2.4vw, 1.9rem);
	height: clamp(1.5rem, 2.4vw, 1.9rem);
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--k-ink);
	transition: background .2s var(--k-ease), box-shadow .2s var(--k-ease);
}

.gtd-opts__box::after {
	content: "";
	position: absolute;
	inset: 25%;
	background: #fff;
	transform: scale(0);
	transition: transform .28s var(--k-ease);
}

.gtd-opts__opt input:checked ~ .gtd-opts__box {
	background: var(--k-red);
	box-shadow: inset 0 0 0 2px var(--k-red);
}

.gtd-opts__opt input:checked ~ .gtd-opts__box::after { transform: scale(1); }

.gtd-opts__opt input:focus-visible ~ .gtd-opts__box {
	outline: 3px solid var(--k-red);
	outline-offset: 3px;
}

.gtd-opts__label {
	font-size: clamp(1.05rem, .9rem + .75vw, 1.65rem) !important;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--gtd-ink, #101d1d);
}

/* The word changes with the state; the span itself carries no text, so
   there is nothing to hide and nothing for a screen reader to read twice. */
.gtd-opts__add {
	font-size: .7rem !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--k-quiet);
	transition: color .2s var(--k-ease);
}

.gtd-opts__add::after { content: "Add"; }
.gtd-opts__opt input:checked ~ .gtd-opts__add { color: var(--k-red); }
.gtd-opts__opt input:checked ~ .gtd-opts__add::after { content: "On the machine"; }

/* ═════════════════════════════════════════════════════════════
   ACT THREE — THE GATE
   ═════════════════════════════════════════════════════════════ */

.gtd-gate {
	padding-block: clamp(3rem, 7vw, 6rem);
	background: var(--k-red);
	color: #fff;
}

.gtd-gate--waiting { padding-block: clamp(2rem, 4vw, 3rem); }

.gtd-gate__waiting {
	margin: 0;
	font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem) !important;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff !important;
}

.gtd-gate__inner {
	display: grid;
	grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.gtd-gate__rule { background: #fff; }

.gtd-gate__title {
	margin: 0 0 clamp(.75rem, 1.5vw, 1.15rem);
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 4rem) !important;
	font-weight: 900;
	line-height: .9;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

.gtd-gate__lede { color: rgba(255, 255, 255, .88) !important; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* The shape of the number, without the number. */
.gtd-gate__plate {
	display: flex;
	align-items: baseline;
	gap: .1em;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	padding: clamp(.75rem, 1.6vw, 1.1rem) clamp(1rem, 2vw, 1.4rem);
	background: rgba(13, 20, 20, .32);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(255, 255, 255, .5) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.gtd-gate__cur { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem) !important; }

/* Seven redacted digits and a separator, drawn in CSS. Solid blocks read as
   a number withheld; a row of dashes reads as a rule. */
.gtd-gate__mask {
	display: block;
	width: 5.1em;
	height: .74em;
	font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.6rem) !important;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 .42em, transparent .42em .62em) 0 0 / 1.24em 100% no-repeat,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 .42em, transparent .42em .62em) 1.42em 0 / 1.86em 100% no-repeat;
}

.gtd-gate__promise {
	margin: 0;
	max-width: 44ch;
	font-size: .88rem !important;
	line-height: 1.55;
	color: rgba(255, 255, 255, .8) !important;
}

/* ── the fields ── */

.gtd-gate__field { margin: 0 0 clamp(1rem, 2vw, 1.4rem); }

.gtd-gate__field label,
.gtd-decide__field label {
	display: block;
	margin-bottom: .5rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.gtd-gate__req {
	margin-left: .5em;
	font-size: .68rem !important;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .7);
}

.gtd-gate__field input {
	width: 100%;
	padding: clamp(.75rem, 1.4vw, 1rem) clamp(.85rem, 1.5vw, 1.1rem);
	border: 0;
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--k-ink);
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow .2s var(--k-ease);
}

.gtd-gate__field input:focus {
	outline: 0;
	box-shadow: inset 0 0 0 3px var(--k-ink);
}

.gtd-gate__field input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--k-ink); }

.gtd-gate__msg,
.gtd-decide__msg {
	display: block;
	margin-top: .45rem;
	font-size: .85rem !important;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.gtd-gate__terms { margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); }

.gtd-gate__terms label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
	margin: 0;
	font-size: .88rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	cursor: pointer;
}

.gtd-gate__terms input {
	width: 1.35rem;
	height: 1.35rem;
	margin: .05rem 0 0;
	accent-color: var(--k-ink);
	flex: none;
}

.gtd-gate__terms a { color: #fff !important; text-underline-offset: 3px; }

.gtd-gate__errors {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.5rem);
	background: rgba(13, 20, 20, .35);
	border-top: 3px solid #fff;
}

.gtd-gate__errorsTitle {
	margin: 0 0 .5rem;
	font-size: .95rem !important;
	font-weight: 700;
	color: #fff !important;
}

.gtd-gate__errors ul { margin: 0; padding-left: 1.1rem; }
.gtd-gate__errors li { font-size: .9rem !important; line-height: 1.5; color: #fff !important; }

/* ── the button that opens it ── */

.gtd-gate__go,
.gtd-decide__go {
	display: inline-flex;
	align-items: center;
	gap: .9em;
	padding: clamp(1rem, 1.9vw, 1.3rem) clamp(1.6rem, 3vw, 2.4rem);
	border: 0;
	border-radius: 0;
	background: var(--k-ink);
	font: inherit;
	font-size: clamp(.82rem, .75rem + .25vw, 1rem);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background .25s var(--k-ease), transform .25s var(--k-ease);
}

/* scaleX rather than width: the rule lives on a flex line, and growing its
   width on hover reflows the button. */
.gtd-gate__go::after,
.gtd-decide__go::after {
	content: "";
	width: 2.4em;
	height: 2px;
	background: currentColor;
	transform: scaleX(.625);
	transform-origin: left;
	transition: transform .3s var(--k-ease);
}

.gtd-gate__go:hover,
.gtd-decide__go:hover { background: #000; }
.gtd-gate__go:hover::after,
.gtd-decide__go:hover::after { transform: scaleX(1); }

.gtd-gate__go:focus-visible,
.gtd-decide__go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ═════════════════════════════════════════════════════════════
   THE NUMBER
   ═════════════════════════════════════════════════════════════ */

.gtd-num {
	padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem);
	background: var(--k-ink);
	color: #fff;
	overflow: hidden;
}

.gtd-num__for {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--k-onDark) !important;
}

.gtd-num__rig {
	margin: 0 0 clamp(1rem, 2.5vw, 2rem);
	font-size: clamp(1.4rem, 1rem + 1.6vw, 2.6rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
}

.gtd-num__rig span {
	font-weight: 400;
	color: rgba(255, 255, 255, .5);
}

.gtd-num__figure {
	margin: 0;
	font-size: clamp(3.2rem, 1rem + 11vw, 12rem) !important;
	font-weight: 900;
	line-height: .82;
	letter-spacing: -.055em;
	color: #fff !important;
	font-variant-numeric: tabular-nums;
}

.gtd-num__wipe {
	display: block;
	width: 100%;
	height: 5px;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--k-red);
	transform-origin: left;
}

.gtd-num__note {
	margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
	max-width: 62ch;
	font-size: .95rem !important;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68) !important;
}

/* ═════════════════════════════════════════════════════════════
   THE BREAKDOWN
   ═════════════════════════════════════════════════════════════ */

.gtd-break { padding-block: clamp(3rem, 6.5vw, 5.5rem); }

.gtd-break__title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.gtd-break__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--k-ink);
}

.gtd-break__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: baseline;
	margin: 0;
	padding-block: clamp(.9rem, 1.8vw, 1.35rem);
	border-bottom: 1px solid var(--k-line);
}

.gtd-break__what {
	font-size: clamp(1rem, .9rem + .5vw, 1.35rem) !important;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--gtd-ink, #101d1d);
}

.gtd-break__what em {
	font-style: normal;
	font-weight: 400;
	color: var(--k-quiet);
}

.gtd-break__amt {
	font-size: clamp(1rem, .9rem + .5vw, 1.35rem) !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--gtd-ink, #101d1d);
}

.gtd-break__row--total {
	border-top: 3px solid var(--k-red);
	border-bottom: 3px solid var(--k-red);
	margin-t

.gtd-break__row--total .gtd-break__what,
.gtd-break__row--total .gtd-break__amt {
	font-size: clamp(1.15rem, .95rem + .9vw, 1.9rem) !important;
	font-weight: 900;
	letter-spacing: -.03em;
}: -.03em;
}

.gtd-break__row--total .gtd-break__amt { color: var(--k-red); }

.gtd-break__back { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; }

.gtd-break__back a {
	font-size: .78rem !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--k-red) !important;
	text-underline-offset: 5px;
}

/* ═════════════════════════════════════════════════════════════
   THE DECISION
   ═════════════════════════════════════════════════════════════ */

.gtd-decide {
	padding-block: clamp(3rem, 7vw, 6rem);
	background: var(--k-deep);
	color: #fff;
}

.gtd-decide__title {
	margin: 0 0 clamp(.75rem, 1.5vw, 1.15rem);
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 4rem) !important;
	font-weight: 900;
	line-height: .9;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

.gtd-decide__lede { color: rgba(255, 255, 255, .78) !important; }

.gtd-decide__also {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	font-size: .95rem !important;
	color: rgba(255, 255, 255, .6) !important;
}

.gtd-decide__also a { color: var(--k-onDark) !important; text-underline-offset: 4px; }

.gtd-decide__errors {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	padding: clamp(1rem, 2vw, 1.4rem);
	background: rgba(198, 0, 0, .18);
	border-top: 3px solid var(--k-onDark);
}

.gtd-decide__errors p { margin: 0; font-size: .95rem !important; font-weight: 700; color: #fff !important; }

.gtd-decide__set { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); padding: 0; border: 0; }

.gtd-decide__legend {
	padding: 0;
	margin-bottom: clamp(.9rem, 1.8vw, 1.25rem);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.gtd-decide__routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: clamp(.75rem, 1.5vw, 1.15rem);
	max-width: 46rem;
}

.gtd-decide__route {
	position: relative;
	display: block;
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	background: #1a1919;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
	cursor: pointer;
	transition: background .3s var(--k-ease), box-shadow .3s var(--k-ease), transform .3s var(--k-ease);
}

.gtd-decide__route:hover { background: #222020; transform: translateY(-2px); }

.gtd-decide__route input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.gtd-decide__route:has(input:checked) {
	background: var(--k-red);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.gtd-decide__route:has(input:focus-visible) { outline: 3px solid var(--k-onDark); outline-offset: 3px; }

.gtd-decide__routeName {
	display: block;
	font-size: clamp(1.25rem, 1rem + .9vw, 1.8rem) !important;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.gtd-decide__routeNote {
	display: block;
	margin-top: .5rem;
	font-size: .85rem !important;
	line-height: 1.45;
	color: rgba(255, 255, 255, .62);
	overflow-wrap: anywhere;
}

.gtd-decide__route:has(input:checked) .gtd-decide__routeNote { color: rgba(255, 255, 255, .88); }

/* auto-fit, not two fixed columns: with JavaScript on, the phone field stands
   down until it is asked for, and the note should take the whole width rather
   than sit in half of a grid whose other half is empty. */
.gtd-decide__extra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	max-width: 46rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.gtd-decide__field { margin: 0; }

.gtd-decide__req {
	margin-left: .5em;
	font-size: .68rem !important;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .55);
}

.gtd-decide__field input,
.gtd-decide__field textarea {
	width: 100%;
	padding: clamp(.75rem, 1.4vw, 1rem);
	border: 0;
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--k-ink);
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow .2s var(--k-ease);
}

.gtd-decide__field textarea { resize: vertical; min-height: 6rem; }

.gtd-decide__field input:focus,
.gtd-decide__field textarea:focus { outline: 0; box-shadow: inset 0 0 0 3px var(--k-red); }
.gtd-decide__field input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--k-red); }

.gtd-decide__hint {
	display: block;
	margin-top: .5rem;
	font-size: .82rem !important;
	line-height: 1.45;
	color: rgba(255, 255, 255, .55);
}

.gtd-decide__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.gtd-decide__go { background: var(--k-red); }
.gtd-decide__go:hover { background: #a30000; }

.gtd-decide__nah {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
	transition: color .2s var(--k-ease);
}

.gtd-decide__nah:hover { color: #fff; }
.gtd-decide__nah:focus-visible { outline: 3px solid var(--k-onDark); outline-offset: 4px; }

/* ═════════════════════════════════════════════════════════════
   THE MOMENT

   One authored arrival: the acts rise as they are reached, and
   the figure — the thing the whole page is for — lands with the
   rule wiping out beneath it.
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		.gtd-pick__rule,
		.gtd-gate__rule,
		.gtd-decide__rule {
			animation: gtd-q-grow linear both;
			animation-timeline: view();
			animation-range: entry 15% cover 30%;
		}

		.gtd-pick__cell {
			animation: gtd-q-rise linear both;
			animation-timeline: view();
			/*
			 * The stagger lives in the RANGE, not in a delay. A time delay is
			 * ignored outright on a progress-based timeline, so the old
			 * `animation-delay: calc(var(--i) * 45ms)` staggered nothing —
			 * every tile arrived on the same scroll position. Offsetting the
			 * range start and end by the tile's index is the scroll-timeline
			 * equivalent: each cell reaches its own progress a little later.
			 */
			animation-range: entry calc(5% + var(--i, 0) * 1.6%) cover calc(28% + var(--i, 0) * 1.6%);
		}

		.gtd-opts__row,
		.gtd-break__row {
			animation: gtd-q-slide linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 32%;
		}

		.gtd-gate__plate {
			animation: gtd-q-rise linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 40%;
		}

		/* The figure has no scroll to wait for — it is the first thing on
		   the page it arrives on, so it plays on load, once. */
		.gtd-num__figure { animation: gtd-q-land 1.1s var(--k-ease) both .1s; }
		.gtd-num__wipe   { animation: gtd-q-grow 1.2s var(--k-ease) both .45s; }
		.gtd-num__for    { animation: gtd-q-rise .8s var(--k-ease) both; }
		.gtd-num__rig    { animation: gtd-q-rise .8s var(--k-ease) both .06s; }
		.gtd-num__note   { animation: gtd-q-rise .9s var(--k-ease) both .8s; }
	}
}

@keyframes gtd-q-grow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes gtd-q-rise {
	from { opacity: 0; transform: translateY(1.75rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes gtd-q-slide {
	from { opacity: 0; transform: translateX(-1.25rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes gtd-q-land {
	from { opacity: 0; transform: translateY(2.5rem); filter: blur(14px); }
	60%  { opacity: 1; filter: blur(0); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ═════════════════════════════════════════════════════════════
   NARROWER
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.gtd-gate__inner { grid-template-columns: minmax(0, 1fr); }
	.gtd-gate__promise { max-width: 60ch; }
}

@media (max-width: 720px) {
	.gtd-decide__extra { grid-template-columns: minmax(0, 1fr); }
	.gtd-pick__grid { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
	.gtd-opts__opt { gap: 1rem; }
	.gtd-opts__add { display: none; }
}

@media (max-width: 480px) {
	.gtd-pick__grid { grid-template-columns: minmax(0, 1fr); }
	.gtd-decide__submit { flex-direction: column; align-items: flex-start; }
}

/* ═════════════════════════════════════════════════════════════
   THE BUTTON THAT STARTS ONE

   Sits beside DOWNLOAD SPEC SHEET on every rig page, so it
   inherits .info-button's geometry and changes only its ground.
   ═════════════════════════════════════════════════════════════ */

/* Ink, not red: it sits beside DOWNLOAD SPEC SHEET, which is already red, and
   two identical buttons are not a hierarchy. Ink is also the colour of the
   button that reveals the figure, so the action reads the same in both places. */
.gtd-quotebtn {
	background: #141313 !important;
	color: #fff !important;
}

.gtd-quotebtn:hover,
.gtd-quotebtn:focus-visible { background: #000 !important; }