/*
 * "Need help?" — the floating trigger and the modal questionnaire.
 *
 * Markup comes from inc/need-help.php and assets/js/need-help.js. The
 * questionnaire is chrome rather than a block, so this is front-end only for
 * the same reason chrome.css is.
 *
 * Every colour and every alpha below is live's, verified against
 * cobellscholar.org on 2026-08-05 — the deployed pill's class list is
 * byte-identical to NeedHelpFloatingPill.tsx, so the reference repo is what is
 * running and its wizard values are live's values. An earlier pass here
 * substituted teal and ember to clear contrast; matching live is the call, and
 * these are the exceptions it buys. Written down so they are owned rather than
 * discovered:
 *
 *   pill label, 11px semibold cream on clay ........ 3.72:1  (needs 4.5:1)
 *   option description, 13px forest 65% on cream ... 3.94:1  (needs 4.5:1)
 *   Back / Start over, 11px forest 60% on cream .... 3.46:1  (needs 4.5:1)
 *   checkbox rule, forest 35% on cream ............. 1.94:1  (needs 3:1, 1.4.11)
 *
 * Each is one declaration. The substitutes that clear AA are teal for the pill
 * fill (6.02:1, and what style.css already uses for .btn--primary), forest 75%
 * for both muted text levels (5.20:1), and forest 55% for the checkbox rule
 * (3.06:1).
 *
 * The theme sets no global box-sizing, so anything padded here opts in
 * explicitly or it renders wider than the number written.
 */

/* -------------------------------------------------------------------------
 * The floating trigger
 * ---------------------------------------------------------------------- */

/*
 * Ships hidden and is unhidden by need-help.js once it has confirmed the
 * browser can open the dialog. A browser without <dialog>.showModal(), or a
 * visitor with scripting off, is never shown a control that would do nothing —
 * the footer entry, which is a real link to the contact page, is their way in.
 */
.cobell-need-help-pill[hidden] {
	display: none;
}

.cobell-need-help-pill {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	padding: 0.8125rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--clay );
	color: var( --wp--preset--color--cream );
	box-shadow: 0 0.625rem 1.5rem -0.5rem color-mix( in srgb, var( --wp--preset--color--forest-deep ) 45%, transparent );
	cursor: pointer;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	line-height: 1;
	text-transform: uppercase;
	/* Out of view until the hero has gone, and inert while it is out — the
	   script drops it from the tab order and the accessibility tree to match. */
	opacity: 0;
	transform: translateY( 1.5rem );
	pointer-events: none;
	transition:
		opacity 350ms ease,
		transform 350ms cubic-bezier( 0.165, 0.84, 0.44, 1 ),
		background-color 200ms ease;
}

@media ( min-width: 48rem ) {
	.cobell-need-help-pill {
		right: 2rem;
		bottom: 2rem;
	}
}

.cobell-need-help-pill[data-visible] {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* The dialog's own backdrop would blur it into a smear behind the panel. */
html[data-need-help-open] .cobell-need-help-pill {
	opacity: 0;
	transform: translateY( 1.5rem );
	pointer-events: none;
}

.cobell-need-help-pill:hover,
.cobell-need-help-pill:focus-visible {
	background-color: var( --wp--preset--color--forest-deep );
}

.cobell-need-help-pill__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background-color: color-mix( in srgb, var( --wp--preset--color--cream ) 18%, transparent );
	transition: background-color 200ms ease;
}

.cobell-need-help-pill:hover .cobell-need-help-pill__icon {
	background-color: color-mix( in srgb, var( --wp--preset--color--cream ) 28%, transparent );
}

.cobell-need-help-pill__icon svg {
	width: 0.75rem;
	height: 0.75rem;
}

/* -------------------------------------------------------------------------
 * The dialog
 * ---------------------------------------------------------------------- */

/*
 * A native <dialog>, so the focus trap, the return of focus on close, Escape,
 * the inertness of the page behind it, and the top layer are all the browser's.
 * What is left is undoing the user-agent box, which is sized to its contents and
 * centred by auto margins.
 */
dialog.cobell-need-help {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var( --wp--preset--color--forest );
	overflow: hidden;
}

dialog.cobell-need-help[open] {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

@media ( min-width: 40rem ) {
	dialog.cobell-need-help[open] {
		align-items: center;
		padding: 1.5rem;
	}
}

/*
 * The literal is a fallback, not a second source of truth. ::backdrop inherits
 * from the dialog in current browsers but did not always, and an unresolved
 * var() with no fallback computes to transparent — which is a modal with no
 * scrim at all rather than a slightly wrong one.
 */
dialog.cobell-need-help::backdrop {
	background-color: color-mix( in srgb, var( --wp--preset--color--forest-deep, #14201a ) 55%, transparent );
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
}

.cobell-need-help__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: 42rem;
	max-height: 92svh;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-radius: 1rem 1rem 0 0;
	background-color: var( --wp--preset--color--cream );
	box-shadow: 0 1.5rem 3rem -0.75rem color-mix( in srgb, var( --wp--preset--color--forest-deep ) 45%, transparent );
	overflow: hidden;
}

@media ( min-width: 40rem ) {
	.cobell-need-help__panel {
		border-radius: 1rem;
	}
}

/*
 * Entrance. The same blur-fade the sections use, so the questionnaire reads as
 * part of the site rather than as a widget dropped on top of it. Toggling
 * display on [open] restarts the animation, so no arming class is needed.
 */
@media ( prefers-reduced-motion: no-preference ) {
	dialog.cobell-need-help[open]::backdrop {
		animation: cobell-need-help-backdrop 400ms ease both;
	}

	dialog.cobell-need-help[open] .cobell-need-help__panel {
		animation: cobell-need-help-panel 600ms cubic-bezier( 0.165, 0.84, 0.44, 1 ) both;
	}
}

@keyframes cobell-need-help-backdrop {
	from {
		opacity: 0;
	}
}

@keyframes cobell-need-help-panel {
	from {
		opacity: 0;
		filter: blur( 12px );
		transform: translateY( 0.75rem );
	}
}

/* -------------------------------------------------------------------------
 * Panel header
 * ---------------------------------------------------------------------- */

.cobell-need-help__header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.75rem;
	box-sizing: border-box;
	padding: 1.5rem 1.5rem 1.25rem;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 12%, transparent );
}

.cobell-need-help__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: var( --wp--preset--color--clay );
	font-size: var( --wp--custom--eyebrow-size );
	font-weight: 600;
	letter-spacing: 0.4em;
	line-height: 1;
	text-transform: uppercase;
}

.cobell-need-help__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: color-mix( in srgb, var( --wp--preset--color--clay ) 40%, transparent );
}

.cobell-need-help__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.cobell-need-help__close:hover,
.cobell-need-help__close:focus-visible {
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 10%, transparent );
	color: var( --wp--preset--color--forest-deep );
}

.cobell-need-help__close svg {
	width: 1.25rem;
	height: 1.25rem;
}

/*
 * Position readout. Hidden from assistive technology in the markup — a
 * "Step 2 of 5" sentence next to it says the same thing better than five list
 * items with no text in them.
 */
.cobell-need-help__progress {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.cobell-need-help__progress-bar {
	width: 1rem;
	height: 0.25rem;
	border-radius: 999px;
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 20%, transparent );
	transition: width 300ms ease, background-color 300ms ease;
}

.cobell-need-help__progress-bar.is-done {
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
}

.cobell-need-help__progress-bar.is-current {
	width: 2rem;
	background-color: var( --wp--preset--color--clay );
}

/* -------------------------------------------------------------------------
 * Panel body
 * ---------------------------------------------------------------------- */

.cobell-need-help__body {
	flex: 1;
	box-sizing: border-box;
	padding: 2rem 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cobell-need-help__step-eyebrow {
	margin: 0 0 0.75rem;
	color: var( --wp--preset--color--clay );
	font-size: var( --wp--custom--eyebrow-size );
	font-weight: 600;
	letter-spacing: 0.35em;
	line-height: 1;
	text-transform: uppercase;
}

.cobell-need-help__title {
	margin: 0;
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.75rem, 3.5vw, 2.25rem );
	font-weight: 400;
	letter-spacing: var( --wp--custom--heading-tracking );
	line-height: 1.05;
}

.cobell-need-help__step:has( .cobell-need-help__destinations ) .cobell-need-help__title {
	font-size: clamp( 1.875rem, 3.8vw, 2.5rem );
}

/*
 * The heading carries tabindex="-1" so each new question is what gets
 * announced, and script focuses it on every move. It is not in the tab order
 * and is not operable, so 2.4.7 has nothing to say about it — and a ring drawn
 * around the question every time the panel changes reads as a fault.
 */
.cobell-need-help__title:focus,
.cobell-need-help__title:focus-visible {
	outline: none;
}

.cobell-need-help__lead {
	margin: 0.75rem 0 0;
	max-width: 34rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Live sets the result's paragraph one step darker than a step's subtitle. */
.cobell-need-help__step:has( .cobell-need-help__destinations ) .cobell-need-help__lead {
	max-width: 36rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-size: 1rem;
}

.cobell-need-help__choices,
.cobell-need-help__checklist,
.cobell-need-help__destinations {
	display: grid;
	gap: 0.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 40rem ) {
	.cobell-need-help__choices--compact {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------------------------------------------------------------
 * The checklist under a student's result
 *
 * It was a question of its own until it turned out to decide nothing — the
 * same three links whatever was ticked, on every student path — so it sits
 * below the links now and refines the message above them rather than gating
 * them. Ruled off because it is a different kind of thing from the links: they
 * are where to go, this is what to have ready.
 *
 * The rule is the same 12% forest the panel header and the action row use, so
 * the result reads as three bands rather than as a list with a stray line in
 * it.
 * ---------------------------------------------------------------------- */

.cobell-need-help__aside {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 12%, transparent );
}

.cobell-need-help__aside-title {
	margin: 0;
	color: var( --wp--preset--color--forest );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.cobell-need-help__aside-lead {
	margin: 0.5rem 0 0;
	max-width: 34rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	font-size: 0.875rem;
	line-height: 1.6;
}

/*
 * Tighter than the 2rem the shared list rule gives it. That gap is sized for a
 * list following a question heading and a subtitle at question scale; here it
 * follows a smaller heading inside an already-ruled block.
 */
.cobell-need-help__aside .cobell-need-help__checklist {
	margin-top: 1.25rem;
}

/* -------------------------------------------------------------------------
 * Choices and destinations — one treatment, two elements
 * ---------------------------------------------------------------------- */

.cobell-need-help__choice,
.cobell-need-help__destination {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	box-sizing: border-box;
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-radius: 0.375rem;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	overflow: hidden;
	text-align: left;
	text-decoration: none;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.cobell-need-help__destination {
	align-items: center;
}

@media ( min-width: 40rem ) {
	.cobell-need-help__choice,
	.cobell-need-help__destination {
		padding: 1rem 1.25rem;
	}
}

.cobell-need-help__choice:hover,
.cobell-need-help__choice:focus-visible,
.cobell-need-help__destination:hover,
.cobell-need-help__destination:focus-visible {
	border-color: color-mix( in srgb, var( --wp--preset--color--forest ) 35%, transparent );
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 4%, transparent );
}

/* The answer given last time, shown when a question is revisited. */
.cobell-need-help__choice[aria-current="true"] {
	border-color: color-mix( in srgb, var( --wp--preset--color--forest ) 30%, transparent );
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 5%, transparent );
}

.cobell-need-help__choice-bar {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 4px;
	background-color: transparent;
	transition: background-color 200ms ease;
}

.cobell-need-help__choice:hover .cobell-need-help__choice-bar,
.cobell-need-help__choice:focus-visible .cobell-need-help__choice-bar,
.cobell-need-help__destination:hover .cobell-need-help__choice-bar,
.cobell-need-help__destination:focus-visible .cobell-need-help__choice-bar {
	background-color: color-mix( in srgb, var( --wp--preset--color--clay ) 40%, transparent );
}

.cobell-need-help__choice[aria-current="true"] .cobell-need-help__choice-bar {
	background-color: var( --wp--preset--color--clay );
}

/*
 * Ordering, and only ordering — aria-hidden in the markup, and redundant with
 * the position the list already carries. That is 1.4.3's decoration exception,
 * which is what lets live set it at clay 70%, 2.44:1. chrome.css gives the
 * dropdown's numerals the same treatment at the same value.
 */
.cobell-need-help__choice-numeral {
	flex: none;
	color: color-mix( in srgb, var( --wp--preset--color--clay ) 70%, transparent );
	font-family: var( --wp--preset--font-family--serif );
	font-size: 0.75rem;
	font-style: italic;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.cobell-need-help__choice-text {
	display: grid;
	gap: 0.25rem;
	flex: 1;
	min-width: 0;
}

.cobell-need-help__choice-label {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.0625rem;
	line-height: 1.25;
}

.cobell-need-help__destination .cobell-need-help__choice-label {
	flex: 1;
	min-width: 0;
}

.cobell-need-help__choice-description {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 65%, transparent );
	font-size: 0.8125rem;
	line-height: 1.45;
}

.cobell-need-help__choice-arrow {
	flex: none;
	margin-left: auto;
	color: var( --wp--preset--color--clay );
	font-size: 1rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateX( -0.25rem );
	transition: opacity 200ms ease, transform 200ms ease;
}

.cobell-need-help__choice:hover .cobell-need-help__choice-arrow,
.cobell-need-help__choice:focus-visible .cobell-need-help__choice-arrow,
.cobell-need-help__choice[aria-current="true"] .cobell-need-help__choice-arrow,
.cobell-need-help__destination:hover .cobell-need-help__choice-arrow,
.cobell-need-help__destination:focus-visible .cobell-need-help__choice-arrow {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
 * Readiness checklist
 * ---------------------------------------------------------------------- */

/*
 * A native checkbox in a label, the same as blocks/criteria-list and for the
 * same reason: ticking, keyboard operation, and the announcement of state all
 * come free and correct. The reference uses a button with role="checkbox" and
 * reimplements each of them.
 */
.cobell-need-help__check {
	display: flex;
	align-items: center;
	gap: 1rem;
	box-sizing: border-box;
	padding: 0.875rem 1rem;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-radius: 0.375rem;
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease;
}

@media ( min-width: 40rem ) {
	.cobell-need-help__check {
		padding: 0.875rem 1.25rem;
	}
}

.cobell-need-help__check:hover {
	border-color: color-mix( in srgb, var( --wp--preset--color--forest ) 35%, transparent );
}

.cobell-need-help__check:has( .cobell-need-help__check-input:checked ) {
	border-color: color-mix( in srgb, var( --wp--preset--color--forest ) 30%, transparent );
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 4%, transparent );
}

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

/* The ring is drawn on the box; the control it belongs to is one clipped pixel. */
.cobell-need-help__check-input:focus-visible ~ .cobell-need-help__check-box {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 3px;
}

/*
 * Live's 35% rule, which is the 1.94:1 listed at the top of this file. The box
 * is the only thing identifying the control and its state, so 1.4.11 wants 3:1;
 * forest 55% is what reaches it, at 3.06:1, if this is ever traded back.
 */
.cobell-need-help__check-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid color-mix( in srgb, var( --wp--preset--color--forest ) 35%, transparent );
	border-radius: 0.25rem;
	background-color: var( --wp--preset--color--cream );
	color: transparent;
	transition:
		border-color 200ms ease,
		background-color 200ms ease,
		transform 200ms cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.cobell-need-help__check:hover .cobell-need-help__check-box {
	border-color: color-mix( in srgb, var( --wp--preset--color--forest ) 60%, transparent );
}

.cobell-need-help__check-input:checked ~ .cobell-need-help__check-box {
	transform: scale( 1.05 );
	border-color: var( --wp--preset--color--forest );
	background-color: var( --wp--preset--color--forest );
	color: var( --wp--preset--color--cream );
}

.cobell-need-help__tick {
	width: 0.875rem;
	height: 0.875rem;
	opacity: 0;
	transform: scale( 0.5 );
	transition: opacity 200ms ease, transform 200ms ease;
}

.cobell-need-help__check-input:checked ~ .cobell-need-help__check-box .cobell-need-help__tick {
	opacity: 1;
	transform: none;
}

.cobell-need-help__check-text {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: color 200ms ease;
}

.cobell-need-help__check-input:checked ~ .cobell-need-help__check-text {
	color: var( --wp--preset--color--forest );
}

/* -------------------------------------------------------------------------
 * Action row
 * ---------------------------------------------------------------------- */

.cobell-need-help__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 12%, transparent );
	background-color: var( --wp--preset--color--cream );
}

.cobell-need-help__quiet {
	padding: 0;
	border: 0;
	background-color: transparent;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 60%, transparent );
	cursor: pointer;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	line-height: 1;
	text-transform: uppercase;
	transition: color 200ms ease;
}

.cobell-need-help__quiet:hover,
.cobell-need-help__quiet:focus-visible {
	color: var( --wp--preset--color--forest-deep );
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Holds its place so the row does not reflow, but leaves the accessibility
   tree — the reference fades it to zero opacity, where it stays announceable. */
.cobell-need-help__quiet:disabled {
	visibility: hidden;
}

/* The continue button on a checklist screen — the reference draws one on its
   readiness step and nowhere else. Every value is live's own: rounded-full,
   px-6 py-3, 14px semibold, teal on cream, teal-deep on hover, and a 150ms
   Tailwind-default transition. The arrow is decoration and is aria-hidden.

   font-family is declared because a <button> does not inherit the document
   font and the UA hands it Arial. */
.cobell-need-help__advance {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0 auto;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 9999px;
	background-color: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--cream );
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	transition: background-color 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.cobell-need-help__advance:hover {
	background-color: var( --wp--preset--color--teal-deep );
}

.cobell-need-help__advance:focus-visible {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 2px;
}

.cobell-need-help__hint {
	margin: 0 0 0 auto;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	line-height: 1;
	text-transform: uppercase;
}

@media ( min-width: 40rem ) {
	.cobell-need-help__header {
		padding: 2rem 2.5rem 1.25rem;
	}

	.cobell-need-help__body {
		padding: 2.5rem;
	}

	.cobell-need-help__actions {
		padding: 1.25rem 2.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.cobell-need-help-pill,
	.cobell-need-help-pill__icon,
	.cobell-need-help__close,
	.cobell-need-help__progress-bar,
	.cobell-need-help__choice,
	.cobell-need-help__destination,
	.cobell-need-help__choice-bar,
	.cobell-need-help__choice-arrow,
	.cobell-need-help__check,
	.cobell-need-help__check-box,
	.cobell-need-help__tick,
	.cobell-need-help__quiet,
	.cobell-need-help__advance {
		transition: none;
	}

	.cobell-need-help-pill {
		transform: none;
	}

	.cobell-need-help__check-input:checked ~ .cobell-need-help__check-box {
		transform: none;
	}
}