/*
 * Ocean Rafting Tour Finder
 *
 * Visual language from the "Tour Finder Redesign" design doc: cream and teal
 * ground, purple for the secondary tour, yellow reserved for the one action
 * that matters, nove for display headings over Mulish body copy.
 *
 * Both typefaces are named here but never loaded — the Ocean Rafting theme
 * already serves them, and a plugin loading its own webfonts would duplicate
 * the download. The stacks below fall back cleanly anywhere they are absent.
 * Change the two variables below to re-typeset the whole widget; nothing
 * names a face directly.
 *
 * Sizing is driven by container queries (cqi), not the viewport, so the widget
 * scales to whatever column it is dropped into — full-width section, sidebar
 * or a 390px phone frame — without the page needing to tell it anything.
 * Every clamp() is preceded by a plain fallback for browsers without
 * container query support, which would otherwise drop the declaration.
 *
 * Everything is namespaced under .ortf so it cannot collide with the theme.
 */

.ortf {
	--ortf-ink: #16256b;
	--ortf-ink-soft: #4b5480;
	--ortf-ink-muted: #6c74a0;
	--ortf-ink-faint: #7a82a6;
	--ortf-teal: #29b8c8;
	--ortf-teal-deep: #0e7c86;
	--ortf-yellow: #ffd100;
	--ortf-cream: #fdf7dc;
	--ortf-purple: #4b1f9e;
	--ortf-white: #fff;
	--ortf-line: rgba(22, 37, 107, 0.1);
	--ortf-rail: #e3e6f0;
	--ortf-display: "nove", sans-serif;
	--ortf-body: "Mulish", system-ui, -apple-system, sans-serif;
	/* One corner radius across every panel, card and photo frame. Pills
	 * (buttons, chips, counters, ticks) stay fully round by design. */
	--ortf-radius: 15px;

	container-type: inline-size;
	position: relative;
	margin: 0 auto;
	padding: 32px 24px;
	padding: clamp(24px, 5cqi, 64px) clamp(18px, 4cqi, 56px);
	background-color: var(--ortf-cream);
	background-image: radial-gradient(120% 70% at 100% 0%, rgba(41, 184, 200, 0.16) 0%, rgba(41, 184, 200, 0) 60%);
	border-radius: var(--ortf-radius);
	color: var(--ortf-ink);
	font-family: var(--ortf-body);
	line-height: 1.55;
	text-align: left;
}

/* background="no": the page supplies its own section styling. */
.ortf--plain {
	padding: 0;
	background: none;
	border-radius: 0;
}

.ortf__inner {
	max-width: 1080px;
	margin: 0 auto;
}

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

/* The intro and stage are toggled with the hidden attribute, and an author
 * `display` rule beats the UA stylesheet's [hidden] — so state it here. */
.ortf [hidden] {
	display: none !important;
}

/* The widget is built from lists, and theme stylesheets routinely put
 * bullets, markers and indents back onto any ul/li they can reach
 * (.entry-content ul li and the like). Undo that wholesale — the widget
 * draws its own marks where it wants them. !important is deliberate: this
 * has to survive arbitrary theme specificity. */
.ortf ul,
.ortf li {
	list-style: none !important;
}

/* Only the indentation themes add, never the block spacing: zeroing margin
 * outright here also wipes the gaps the components below set for themselves. */
.ortf ul {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
}

.ortf li::before,
.ortf li::after {
	content: none !important;
}

.ortf img {
	max-width: 100%;
}

/* Themes style every <button> on the site — pill radii, gradients, uppercase
 * transforms, fixed widths — and those rules reach the widget's cards and
 * controls. Neutralise them here; every component below is selected as
 * `.ortf .ortf__x` so it outranks this reset and re-applies the design. */
.ortf button {
	width: auto;
	margin: 0;
	background-image: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

/* Shared type ------------------------------------------------------------ */

.ortf__eyebrow {
	display: block;
	font-size: 11px;
	font-size: clamp(10px, 1.15cqi, 12px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ortf-teal-deep);
}

.ortf__display {
	margin: 0;
	font-family: var(--ortf-display);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--ortf-ink);
	text-wrap: balance;
}

.ortf__lede {
	margin: 0;
	max-width: 52ch;
	font-size: 15px;
	font-size: clamp(13px, 1.55cqi, 17px);
	line-height: 1.55;
	color: var(--ortf-ink-soft);
	text-wrap: pretty;
}

/* Yellow pill: the one action that matters. The hard shadow gives it a
 * physical press rather than a fade. */
.ortf .ortf__btn {
	display: inline-block;
	width: auto;
	border: 0;
	background: var(--ortf-yellow);
	color: var(--ortf-ink);
	font-family: inherit;
	font-size: 14px;
	font-size: clamp(13px, 1.5cqi, 15px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 17px 28px;
	padding: clamp(15px, 1.9cqi, 20px) clamp(24px, 3cqi, 34px);
	/* Themes on this site pill every button; state the shape outright. */
	border-radius: 999px !important;
	box-shadow: 0 6px 0 rgba(22, 37, 107, 0.16);
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ortf .ortf__btn::after {
	content: "\2192";
	margin-left: 0.5em;
}

.ortf .ortf__btn:hover,
.ortf .ortf__btn:focus-visible {
	color: var(--ortf-ink);
	transform: translateY(-2px);
	box-shadow: 0 9px 0 rgba(22, 37, 107, 0.18);
}

.ortf .ortf__btn:active {
	transform: translateY(2px);
	box-shadow: 0 3px 0 rgba(22, 37, 107, 0.18);
}

.ortf .ortf__btn:focus-visible {
	outline: 3px solid var(--ortf-teal-deep);
	outline-offset: 3px;
}

/* Image placeholder tone, used behind any art that is still loading. */
.ortf__media {
	position: relative;
	overflow: hidden;
	background: repeating-linear-gradient(135deg, #d6f0f4 0 12px, #c4e7ee 12px 24px);
}

/* Photos must fill their frame edge to edge, cropping rather than letterboxing.
 *
 * Themes ship `img { height: auto !important }` to stop images stretching, and
 * that wins here — the photo then sits short of the bottom of its frame with
 * the placeholder stripes showing through. Pinning the insets is not enough:
 * an absolutely positioned *replaced* element resolves height:auto from the
 * image's own dimensions, not from its top/bottom insets, so it collapses.
 * Matching !important is the only thing that beats !important. */
.ortf .ortf__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Intro ------------------------------------------------------------------ */

.ortf__intro {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	gap: clamp(22px, 3.4cqi, 44px);
	align-items: center;
	animation: ortf-in 0.4s ease both;
}

.ortf__intro-copy {
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	gap: clamp(12px, 1.6cqi, 18px);
}

.ortf__intro-title {
	font-size: 38px;
	font-size: clamp(30px, 6.6cqi, 62px);
	line-height: 0.94;
}

.ortf__intro-text {
	max-width: 38ch;
	font-size: 16px;
	font-size: clamp(14px, 1.65cqi, 18px);
}

.ortf__intro .ortf__btn {
	margin-top: 6px;
}

.ortf__intro-meta {
	font-size: 12px;
	font-size: clamp(11px, 1.3cqi, 13px);
	font-weight: 500;
	line-height: 1;
	color: var(--ortf-ink-faint);
}

.ortf__intro-media {
	flex: 1 1 300px;
	min-height: 240px;
	min-height: clamp(220px, 30cqi, 330px);
	border-radius: var(--ortf-radius);
	box-shadow: 0 18px 40px rgba(22, 37, 107, 0.14);
}

.ortf__badge {
	position: absolute;
	right: 14px;
	top: 14px;
	font-family: var(--ortf-display);
	font-size: 14px;
	font-size: clamp(13px, 1.5cqi, 15px);
	font-weight: 400;
	line-height: 1;
	color: var(--ortf-ink);
	background: var(--ortf-yellow);
	padding: 9px 14px;
	border-radius: 999px;
	transform: rotate(3deg);
}

/* Questions -------------------------------------------------------------- */

.ortf__step-view {
	animation: ortf-in 0.35s ease both;
}

/* Selected as `.ortf .ortf__x` so the block spacing outranks a theme's own
 * `ul` margins, which are more specific than a lone class. */
.ortf .ortf__rail {
	display: flex;
	gap: 8px;
	/* Generous, because the match counter below is a tall pill and would
	 * otherwise sit right up against the rail. */
	margin: 0 0 34px;
	margin-bottom: clamp(26px, 3.6cqi, 44px);
}

.ortf .ortf__rail li {
	flex: 1;
	height: 7px;
	border-radius: 99px;
	background: var(--ortf-rail);
	transition: background-color 0.3s ease;
}

.ortf .ortf__rail li.is-done {
	background: var(--ortf-teal);
}

.ortf .ortf__rail li.is-current {
	background: var(--ortf-yellow);
}

.ortf__qhead {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	margin-bottom: clamp(8px, 1.2cqi, 14px);
}

/* Live "tours still match" counter: progress framed as narrowing down
 * rather than filling in a form. */
.ortf__counter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ortf-white);
	border: 2px solid rgba(41, 184, 200, 0.35);
	border-radius: 999px;
	padding: 7px 14px 7px 10px;
}

.ortf__counter-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ortf-teal);
	color: var(--ortf-white);
	font-family: var(--ortf-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	animation: ortf-pulse 0.45s ease;
}

.ortf__counter-label {
	font-size: 12px;
	font-size: clamp(11px, 1.3cqi, 13px);
	font-weight: 600;
	line-height: 1;
	color: var(--ortf-ink);
}

.ortf__question {
	margin: 0 0 10px;
	font-size: 32px;
	font-size: clamp(25px, 5.2cqi, 50px);
	line-height: 0.98;
}

/* No bottom margin: the gap above the answers belongs to the answer grid, so
 * that questions with no help text sit exactly as far from their options as
 * questions with it. */
.ortf__help {
	margin: 0;
	/* Wider than the 52ch reading measure the lede uses — these are one-line
	 * clarifications and read better unbroken where there is room. */
	max-width: 92ch;
}

.ortf .ortf__answers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
	gap: clamp(12px, 1.8cqi, 20px);
	/* Owns the space above itself, whether the preceding element is the help
	 * text or the heading — adjacent margins collapse to this either way. */
	margin-top: 26px;
	margin-top: clamp(20px, 2.8cqi, 34px);
}

.ortf .ortf__answer {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	background: var(--ortf-white);
	border: 2px solid var(--ortf-line);
	/* Without !important the theme's pill radius turns these near-square
	 * cards into circles. */
	border-radius: var(--ortf-radius) !important;
	overflow: hidden;
	font: inherit;
	color: inherit;
	text-align: left;
	/* Restated here rather than left to the reset above: a theme's own
	 * `button` rule ties that reset on specificity and wins on source order. */
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ortf .ortf__answer:hover,
.ortf .ortf__answer:focus-visible {
	border-color: var(--ortf-yellow);
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgba(22, 37, 107, 0.14);
}

.ortf .ortf__answer:focus-visible {
	outline: 3px solid var(--ortf-teal-deep);
	outline-offset: 2px;
}

.ortf .ortf__answer .ortf__media {
	aspect-ratio: 4 / 3;
	width: 100%;
}

.ortf__answer-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 15px;
	padding: clamp(13px, 1.6cqi, 18px);
}

.ortf__answer-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.ortf__answer-label {
	font-size: 16px;
	font-size: clamp(14px, 1.75cqi, 18px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ortf-ink);
}

.ortf__answer-count {
	flex: none;
	background: rgba(41, 184, 200, 0.14);
	color: var(--ortf-teal-deep);
	border-radius: 999px;
	padding: 4px 9px;
	font-size: 11px;
	font-size: clamp(10px, 1.15cqi, 12px);
	font-weight: 600;
	line-height: 1;
}

.ortf__answer-note {
	font-size: 13px;
	font-size: clamp(12px, 1.4cqi, 14px);
	line-height: 1.4;
	color: var(--ortf-ink-muted);
}

/* A real secondary button: same physical press as the yellow primary, but
 * outlined and muted so it never competes with it. */
.ortf .ortf__back {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	width: auto;
	margin-top: 22px;
	margin-top: clamp(18px, 2.4cqi, 28px);
	background: var(--ortf-white);
	border: 2px solid rgba(22, 37, 107, 0.14);
	border-radius: 999px !important;
	padding: 13px 24px;
	padding: clamp(11px, 1.5cqi, 15px) clamp(20px, 2.4cqi, 28px);
	text-align: left;
	font-family: inherit;
	font-size: 13px;
	font-size: clamp(12px, 1.35cqi, 14px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ortf-ink-soft);
	box-shadow: 0 4px 0 rgba(22, 37, 107, 0.1);
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ortf .ortf__back::before {
	content: "\2190";
	font-size: 1.15em;
	line-height: 1;
}

/* Inline in the result header: no block spacing of its own, and trimmed down
 * so it balances the eyebrow beside it and the counter pill opposite rather
 * than towering over both. */
.ortf .ortf__back--inline {
	margin: 0;
	padding: 8px 16px;
	font-size: 11px;
	font-size: clamp(10px, 1.2cqi, 12px);
}

.ortf .ortf__back:hover,
.ortf .ortf__back:focus-visible {
	color: var(--ortf-ink);
	border-color: rgba(22, 37, 107, 0.28);
	transform: translateY(-2px);
	box-shadow: 0 6px 0 rgba(22, 37, 107, 0.12);
}

.ortf .ortf__back:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 rgba(22, 37, 107, 0.12);
}

.ortf .ortf__back:focus-visible {
	outline: 3px solid var(--ortf-teal-deep);
	outline-offset: 3px;
}

/* Result ----------------------------------------------------------------- */

.ortf__result {
	animation: ortf-in 0.4s ease both;
}

.ortf__result-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	margin-bottom: clamp(12px, 1.6cqi, 18px);
}

/* Back and the eyebrow travel together on the left. */
.ortf__result-lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.ortf__narrowed {
	display: inline-flex;
	align-items: center;
	background: var(--ortf-teal);
	color: var(--ortf-white);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 12px;
	font-size: clamp(11px, 1.3cqi, 13px);
	font-weight: 600;
	line-height: 1;
}

.ortf__card {
	display: flex;
	flex-wrap: wrap;
	background: var(--ortf-white);
	border-radius: var(--ortf-radius);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(22, 37, 107, 0.16);
}

.ortf__card .ortf__media {
	flex: 1 1 320px;
	min-height: 210px;
	min-height: clamp(210px, 26cqi, 100%);
}

.ortf__card-body {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	gap: clamp(12px, 1.6cqi, 18px);
	padding: 28px;
	padding: clamp(20px, 2.8cqi, 38px);
}

.ortf__card-name {
	margin: 0;
	font-size: 34px;
	font-size: clamp(26px, 4.4cqi, 44px);
	line-height: 1;
}

.ortf__card-meta {
	display: block;
	font-size: 14px;
	font-size: clamp(12px, 1.45cqi, 15px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ortf-teal-deep);
}

.ortf__card-summary {
	margin: 0;
	font-size: 15px;
	font-size: clamp(13px, 1.5cqi, 16px);
	line-height: 1.55;
	color: var(--ortf-ink-soft);
	text-wrap: pretty;
}

/* "Why we picked it": the visitor's own answers, echoed back. */
.ortf__why {
	display: flex;
	flex-direction: column;
	gap: 9px;
	background: var(--ortf-cream);
	border-radius: var(--ortf-radius);
	padding: 16px;
	padding: clamp(13px, 1.7cqi, 18px);
}

.ortf__why-title {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ortf-teal-deep);
}

.ortf__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ortf__chip {
	background: var(--ortf-white);
	border: 1px solid rgba(22, 37, 107, 0.12);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 12px;
	font-size: clamp(11px, 1.3cqi, 13px);
	font-weight: 500;
	line-height: 1;
	color: var(--ortf-ink);
}

.ortf .ortf__incs {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ortf .ortf__incs li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-size: clamp(12.5px, 1.45cqi, 15px);
	font-weight: 500;
	line-height: 1.35;
	color: #3c456f;
}

.ortf__tick {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--ortf-teal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ortf__card-body .ortf__btn {
	align-self: flex-start;
	margin-top: 4px;
}

/*
 * Grid rather than flex, because the two boxes need an exact 65/35 split.
 * flex-grow ratios only approximate it — measured 63.5/36.5 at 65/35 and
 * 75.6/24.4 at 90/10 — since the algorithm folds content sizing into the
 * distribution. fr units divide the space left after the gap exactly.
 */
.ortf__result-foot {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	gap: clamp(14px, 2cqi, 22px);
	margin-top: 24px;
	margin-top: clamp(18px, 2.4cqi, 30px);
}

/* Side by side once the widget is wide enough to carry both; stacked below
 * that. Keyed off the widget's own width, not the viewport. */
@container (min-width: 560px) {
	.ortf__result-foot {
		grid-template-columns: 65fr 35fr;
	}
}

/* Purple: the secondary tour, deliberately not competing with the yellow.
 * min-width:0 lets the grid track govern the width instead of the content. */
.ortf__alt {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	background: var(--ortf-purple);
	border-radius: var(--ortf-radius);
	padding: 19px;
	padding: clamp(16px, 2cqi, 22px);
	color: var(--ortf-white);
}

.ortf__alt .ortf__media {
	flex: 0 0 100px;
	flex-basis: clamp(84px, 11cqi, 120px);
	aspect-ratio: 1;
	border-radius: var(--ortf-radius);
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 8px, rgba(255, 255, 255, 0.1) 8px 16px);
}

.ortf__alt-body {
	flex: 1 1 170px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ortf__alt-eyebrow {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ortf-yellow);
}

.ortf__alt-name {
	font-family: var(--ortf-display);
	font-size: 20px;
	font-size: clamp(17px, 2.2cqi, 24px);
	font-weight: 400;
	line-height: 1;
}

.ortf__alt-note {
	font-size: 13px;
	font-size: clamp(12px, 1.4cqi, 14px);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

.ortf__alt-link {
	margin-top: 3px;
	color: var(--ortf-yellow);
	font-size: 13px;
	font-size: clamp(12px, 1.4cqi, 14px);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.ortf__alt-link::after {
	content: "\2192";
	margin-left: 0.4em;
}

.ortf__alt-link:hover,
.ortf__alt-link:focus-visible {
	color: var(--ortf-white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ortf__alt-link:focus-visible {
	outline: 3px solid var(--ortf-yellow);
	outline-offset: 3px;
	border-radius: 4px;
}

.ortf__redo {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	background: var(--ortf-white);
	border: 2px dashed rgba(22, 37, 107, 0.15);
	border-radius: var(--ortf-radius);
	padding: 19px;
	padding: clamp(16px, 2cqi, 22px);
}

.ortf__redo-text {
	font-size: 14px;
	font-size: clamp(12.5px, 1.45cqi, 15px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--ortf-ink-soft);
}

.ortf .ortf__restart {
	align-self: flex-start;
	width: auto;
	border: 0;
	background: none;
	border-radius: 0;
	padding: 0;
	text-align: left;
	font-family: inherit;
	font-size: 14px;
	font-size: clamp(12.5px, 1.45cqi, 15px);
	font-weight: 700;
	line-height: 1;
	color: var(--ortf-teal-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

.ortf .ortf__restart:hover {
	color: var(--ortf-ink);
}

.ortf .ortf__restart:focus-visible {
	outline: 3px solid var(--ortf-teal-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Unresolved fallback ---------------------------------------------------- */

.ortf__dead-end {
	background: var(--ortf-white);
	border-radius: var(--ortf-radius);
	padding: 24px;
	padding: clamp(20px, 2.6cqi, 34px);
}

.ortf__dead-end .ortf__question {
	font-size: 26px;
	font-size: clamp(22px, 3.6cqi, 34px);
}

/* Screen-reader announcements -------------------------------------------- */

.ortf__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

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

@keyframes ortf-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ortf-pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.06);
	}
	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ortf__intro,
	.ortf__step-view,
	.ortf__result,
	.ortf__counter-num {
		animation: none;
	}

	.ortf .ortf__answer,
	.ortf .ortf__btn,
	.ortf .ortf__rail li {
		transition: none;
	}

	.ortf .ortf__answer:hover,
	.ortf .ortf__answer:focus-visible,
	.ortf .ortf__btn:hover,
	.ortf .ortf__btn:focus-visible,
	.ortf .ortf__btn:active {
		transform: none;
	}
}