/* ---------------------------------------------------------------------------
 * www-payments — Qualtrics 2026 brand layer
 *
 * Loaded AFTER qualtrics-global.css, which is kept only for its grid and the
 * .btn-q-primary hook the markup already uses. That sheet still sets
 * `benton-sans` on body; benton-sans is retired under the 2026 brand, so every
 * type rule here overrides it. Nothing in this file depends on that sheet's
 * typography or spacing.
 *
 * Expression mode: Inform (transactional payment surface — clarity over
 * impression). No patterns, no gradient, black + cobalt on light grey.
 * ------------------------------------------------------------------------ */

/* --- Brand fonts -------------------------------------------------------- */
/* Qualtrics Display is Regular-only by design — never synthesise a bold from
   it; heavier type steps up to Qualtrics Text SemiBold/Bold instead. */
@font-face {
	font-family: 'Qualtrics Display';
	src: url('/invoice/assets/fonts/QualtricsDisplayWeb-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Qualtrics Text';
	src: url('/invoice/assets/fonts/QualtricsTextWeb-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Qualtrics Text';
	src: url('/invoice/assets/fonts/QualtricsTextWeb-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Qualtrics Text';
	src: url('/invoice/assets/fonts/QualtricsTextWeb-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Qualtrics Text';
	src: url('/invoice/assets/fonts/QualtricsTextWeb-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
	/* 2026 palette */
	--glacier: #00b4ee;
	--cobalt: #0768dd;
	--nightshade: #5f1ae5;
	--orchid: #e672ff;
	--teal: #23ffc1;
	--light-grey: #edf2f4;
	--dark-grey: #c8ccce;
	--black: #000000;
	--white: #ffffff;

	--color-text: var(--black);
	--color-text-muted: #4a5257;
	--color-primary: var(--cobalt);
	--color-border: var(--dark-grey);
	--color-surface: var(--white);
	--color-surface-sunken: var(--light-grey);
	--color-error: #b3001b;

	--font-display: 'Qualtrics Display', 'Inter', system-ui, sans-serif;
	--font-body: 'Qualtrics Text', 'Inter', system-ui, -apple-system, sans-serif;

	/* 4px spacing scale — one ladder for the whole portal. Every margin and
	   pad below picks a rung; no more ad-hoc 5px/13px/-15px values. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	--radius-control: 6px;
	--radius-surface: 12px;
	/* Pill shape is the brand's CTA form. */
	--radius-pill: 999px;
}

/* --- Base --------------------------------------------------------------- */
/* One of the remote sheets this page loads drops the root to 10px, so every rem
   landed at 62.5% of its intended size — the footer's 0.875rem rendered at
   8.75px. The CSS copied out of the Qualtrics repo is written against a 16px
   root (as on qualtrics.com), so pin it back. Safe here: qualtrics-global.css
   itself declares no rem units. */
html {
	font-size: 100%;
}

/* Sticky footer: the page wrapper fills the viewport and the footer takes the
   slack, so on short pages (the confirmation, an error state) it sits on the
   bottom edge instead of floating mid-screen. Long pages are unaffected — the
   footer stays after the content rather than overlaying it. */
html,
body {
	min-height: 100%;
}

#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* dvh keeps it honest against mobile browser chrome; vh above is the fallback. */
	min-height: 100dvh;
}

.qnav-footer-min-v2-wrap {
	margin-top: auto;
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-surface);
	-webkit-font-smoothing: antialiased;
	/* Ligatures are a brand requirement, not decoration. */
	font-feature-settings: 'liga' 1, 'clig' 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--color-text);
	letter-spacing: 0;
	line-height: 1.1;
	/* Sentence case is a brand rule — no text-transform anywhere in this file. */
	text-transform: none;
}

h3,
h4,
h5,
h6 {
	font-family: var(--font-body);
	font-weight: 600;
	line-height: 1.25;
}

p {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--nightshade);
	text-decoration: underline;
}

strong {
	font-weight: 600;
}

/* --- Header / nav (Main Navigation 2026) -------------------------------- */
/* Structure and tokens copied from nav_service/css/mn26/header-main-nav26.css
   and templates/v1/header_main_nav26_min.html.twig: a floating white pill bar
   inside a padded wrapper. Only the font stack differs — the source pulls
   `qualtrics-text` from Typekit, which this app self-hosts.
   Note mn26 is `position: relative`, not fixed, so pages no longer need to
   reserve nav height the way the old Bootstrap navbar required. */
.mn26 {
	--mn26-primary: #0768dd;
	--mn26-primary-dark: #064a9e;
	--mn26-secondary: #c3ddfd;
	--mn26-surface: #fff;
	--mn26-surface-alt: #f5f5f5;
	--mn26-hover-bg: #edf2f4;
	--mn26-text-primary: #1e1e1e;
	--mn26-text-secondary: #737373;
	--mn26-divider: #d7d7d5;
	--mn26-focus-ring: #b000d6;
	--mn26-max-width: 1360px;
	--mn26-radius-sm: 8px;
	--mn26-radius-md: 16px;
	--mn26-radius-lg: 24px;
	--mn26-radius-xl: 40px;
	--mn26-radius-full: 999px;
	--mn26-shadow: 0 5px 25px rgb(0 0 0 / 10%);
	--mn26-transition-fast: 0.2s cubic-bezier(0.28, 0.11, 0.32, 1);
	--mn26-font-size-sm: 0.875rem;
	--mn26-font-size-base: 1rem;
	--mn26-font-size-lg: 1.125rem;

	position: relative;
	z-index: 1030;
	padding: 24px 40px;
	font-family: var(--font-body);
	line-height: 1.4;
	color: var(--mn26-text-primary);
}

.mn26 :where(*, *::before, *::after) {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.mn26__bar {
	position: relative;
	z-index: 103;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 65px;
	padding: 8px 24px 8px 24px;
	margin: 0 auto;
	background: var(--mn26-surface);
	border-radius: var(--mn26-radius-full);
	box-shadow: var(--mn26-shadow);
}

.mn26__logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	color: var(--mn26-primary);
}

.mn26__logo:focus-visible {
	outline: 2px solid var(--mn26-focus-ring);
	outline-offset: 1px;
}

.mn26__logo img,
.mn26__logo svg {
	display: block;
	width: 116px;
	height: 36px;
}

/* .mn26__primary-button is the source's full-size pill; .qnav-demo-button is
   the compact header variant (qnav client.css), which sizes it to ~36px.
   Deliberately literal rather than var(--mn26-*): those tokens are declared on
   .mn26, so a button rendered outside the nav would lose its radius and size
   entirely (an invalid var() drops the whole declaration). */
.mn26__primary-button,
button.mn26__primary-button,
a.mn26__primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	background-color: #601ae5;
	background-image: none;
	border: none;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.2s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.mn26__primary-button:hover,
.mn26__primary-button:focus,
button.mn26__primary-button:hover,
button.mn26__primary-button:focus,
a.mn26__primary-button:hover,
a.mn26__primary-button:focus {
	color: #fff;
	background-color: #4a11b8;
	text-decoration: none;
}

.mn26__primary-button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px #b000d6;
}

.mn26__primary-button.qnav-demo-button,
button.mn26__primary-button.qnav-demo-button,
a.mn26__primary-button.qnav-demo-button {
	min-height: 0;
	padding: 10px 16px;
	font-size: 1rem;
	line-height: 16px;
}

@media (width >= 1200px) {
	.mn26__bar {
		max-width: var(--mn26-max-width);
	}
}



/* Contact panel — an mn26-style dropdown surface under the bar. */
#collapseContactInfo {
	width: 100%;
	max-width: var(--mn26-max-width);
	margin: 12px auto 0;
}

#collapseContactInfo .mn26__panel-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 40px;
	background: var(--mn26-surface);
	border-radius: var(--mn26-radius-xl);
	box-shadow: var(--mn26-shadow);
}

#collapseContactInfo .mn26__panel-card {
	flex: 1 1 220px;
	padding: 24px;
	background: var(--mn26-hover-bg);
	border-radius: var(--mn26-radius-md);
}

.contact-card-title {
	font-family: var(--font-body);
	font-size: var(--mn26-font-size-base);
	font-weight: 600;
	line-height: 1.3125;
	color: var(--mn26-text-primary);
	margin: 0 0 12px;
}

.contact-detail {
	display: block;
	margin: 0 0 4px;
	font-size: var(--mn26-font-size-base);
	font-weight: 400;
	line-height: 1.5;
	/* Replaces .thinfont, which uppercased and letter-spaced contact details.
	   ALL CAPS is out under the 2026 brand. */
	text-transform: none;
	letter-spacing: 0;
}

/* The global sheet uppercases and tracks out links inside a navbar. */
#collapseContactInfo a,
.contact-detail a,
a.telephone-number {
	color: var(--mn26-primary) !important;
	font-size: var(--mn26-font-size-base) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.5;
}

#collapseContactInfo a:hover {
	color: var(--mn26-primary-dark) !important;
}

/* --- Page rhythm -------------------------------------------------------- */
.page-transaction {
	/* The mn26 wrapper already pads 24px below the bar; this is the rest of the
	   gap to the first heading. */
	padding-top: var(--space-4);
	padding-bottom: var(--space-8);
}

.page-transaction .page-section-feature {
	margin-bottom: var(--space-6);
}

.section-heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	color: var(--color-text);
	margin: var(--space-7) 0 var(--space-4);
}

/* First heading in a column shouldn't push the column down past its sibling. */
.section-heading:first-child,
.col-sm-6 > .section-heading:first-of-type {
	margin-top: 0;
}

.section-intro {
	margin-bottom: var(--space-5);
	max-width: 60ch;
}

/* --- Forms -------------------------------------------------------------- */
.form-group {
	margin-bottom: var(--space-4);
}

/* The markup nests half-width fields in a flex .form-group. Gap replaces the
   per-column padding-left/right overrides the views used to carry inline. */
.field-row {
	display: flex;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.field-row > * {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
}

label {
	display: block;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	margin: 0 0 var(--space-2);
	line-height: 1.3;
}

/* Required marker — was a red superscript asterisk. */
label sup {
	color: var(--color-error);
	font-size: 100%;
	top: 0;
	margin-left: 2px;
}

.form-control {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 var(--space-3);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	box-shadow: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

select.form-control {
	/* Safari renders selects shorter than inputs unless told otherwise. */
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--space-6);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5257' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
}

.form-control:focus {
	outline: none;
	border-color: var(--cobalt);
	box-shadow: 0 0 0 3px rgba(7, 104, 221, 0.18);
}

.form-control::placeholder {
	color: #8a9297;
	font-size: 15px;
}

.form-control.invalid-input {
	border-color: var(--color-error);
}

.form-control.invalid-input:focus {
	box-shadow: 0 0 0 3px rgba(179, 0, 27, 0.15);
}

/* Amount field keeps its currency prefix flush against the input. */
.input-group {
	display: flex;
	width: 100%;
}

.input-group-addon.currency-symbol {
	display: flex;
	align-items: center;
	min-width: 48px;
	justify-content: center;
	padding: 0 var(--space-3);
	font-size: 15px;
	color: var(--color-text-muted);
	background-color: var(--color-surface-sunken);
	border: 1px solid var(--color-border);
	border-right: 0;
	border-radius: var(--radius-control) 0 0 var(--radius-control);
}

.input-group .form-control {
	border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

/* Expiry month / year pair */
.expiry-wrapper .row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

.expiry-separator {
	color: var(--color-text-muted);
	font-size: 18px;
	line-height: 44px;
}

/* Terms checkbox */
.checkbox {
	margin: var(--space-5) 0;
}

.checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-weight: 400;
	font-size: 15px;
	color: var(--color-text-muted);
	margin: 0;
}

.checkbox input[type="checkbox"] {
	/* Was nudged with `top: 6px` inline; align it on the first text line
	   instead so it holds when the label wraps. */
	position: static;
	margin: 3px 0 0;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--cobalt);
}

/* --- Order summary ------------------------------------------------------ */
.table.order-summary-table {
	margin-bottom: var(--space-5);
	border-collapse: separate;
	border-spacing: 0;
}

.table.order-summary-table > tbody > tr > td {
	border-top: 0;
	padding: var(--space-4);
	font-size: 16px;
}

.table.order-summary-table tr.total > td {
	background-color: var(--color-surface-sunken);
	border: 0;
}

.table.order-summary-table tr.total > td:first-child {
	border-radius: var(--radius-control) 0 0 var(--radius-control);
	font-weight: 500;
}

.table.order-summary-table tr.total > td:last-child {
	border-radius: 0 var(--radius-control) var(--radius-control) 0;
	text-align: right;
	font-weight: 600;
	font-family: var(--font-display);
	font-size: 20px;
}

.allow-unlimited-charge td {
	padding-top: var(--space-4) !important;
}

.allow-unlimited-charge-validation {
	display: none;
	margin-top: var(--space-3);
}

/* --- Buttons ------------------------------------------------------------ */
.btn-q-primary,
a.btn-q-primary,
button.btn-q-primary {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--white);
	background-color: var(--cobalt);
	background-image: none;
	border: 1px solid var(--cobalt);
	/* Pill is the brand CTA shape. */
	border-radius: var(--radius-pill);
	padding: var(--space-4) var(--space-6);
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.btn-q-primary:hover,
.btn-q-primary:focus {
	color: var(--white);
	background-color: var(--nightshade);
	border-color: var(--nightshade);
	text-decoration: none;
}

.btn-q-primary:focus-visible {
	outline: 3px solid rgba(7, 104, 221, 0.35);
	outline-offset: 2px;
}

.btn-q-primary[disabled],
.btn-q-primary:disabled {
	background-color: var(--dark-grey);
	border-color: var(--dark-grey);
	cursor: not-allowed;
}

.form-actions {
	margin-top: var(--space-5);
}

/* --- Alerts ------------------------------------------------------------- */
.alert {
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-5);
	border-radius: var(--radius-control);
	font-size: 15px;
	font-weight: 400;
}

.alert.alert-danger {
	color: var(--color-error);
	background-color: #fdf2f3;
	border: 1px solid rgba(179, 0, 27, 0.35);
}

.alert p {
	color: inherit;
	margin: 0 0 var(--space-2);
}

.alert p:last-child {
	margin-bottom: 0;
}

.floating-alert {
	position: fixed;
	/* Above the mn26 bar (z-index 1030), which scrolls with the page. */
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
}

.floating-alert .alert {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.floating-alert {
	z-index: 1040;
}

/* --- Checkout (Payment Element) page ------------------------------------ */
.checkout-page {
	padding-top: var(--space-4);
	padding-bottom: var(--space-8);
}

.checkout-header {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
	margin: var(--space-7) 0 var(--space-5);
}

.order-summary {
	background-color: var(--color-surface-sunken);
	border-radius: var(--radius-surface);
	padding: var(--space-5);
	margin-bottom: var(--space-6);
}

.order-summary p {
	margin: 0 0 var(--space-2);
	color: var(--color-text);
}

.order-summary p:last-child {
	margin-bottom: 0;
}

#payment-element {
	margin-bottom: var(--space-5);
}

.small-text {
	font-size: 14px;
	color: var(--color-text-muted);
}

/* --- Confirmation page -------------------------------------------------- */
.confirmation-panel {
	background-color: var(--color-surface-sunken);
	border-radius: var(--radius-surface);
	padding: var(--space-5) var(--space-6);
	margin-bottom: var(--space-6);
}

.confirmation-detail {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: 0 0 var(--space-2);
	color: var(--color-text);
}

.confirmation-detail:last-child {
	margin-bottom: 0;
}

.confirmation-detail dt,
.detail-label {
	flex: 0 0 180px;
	font-weight: 500;
	color: var(--color-text-muted);
}

.confirmation-amount {
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.1;
}

/* --- Footer (Footer Min V2) --------------------------------------------- */
/* Colors and tokens copied from nav_service/css/footer-v2/footer-min-v2.css so
   this footer matches qualtrics.com. Only the font stack differs: the source
   asks for `qualtrics-text` from Typekit, and this app self-hosts the same
   family already. */
.qnav-footer-min-v2-wrap {
	background-color: #1e1e1e;
}

.qnav-footer-min-v2 {
	--footer-min-v2-max-width: 1360px;
	--footer-min-v2-bg: #1e1e1e;
	--footer-min-v2-text: #fff;
	--footer-min-v2-text-muted: #f0f4f9;
	--footer-min-v2-bottom-link: #c3ddfd;
	--footer-min-v2-link-hover: rgb(255 255 255 / 85%);
	--footer-min-v2-border: rgb(255 255 255 / 12%);

	box-sizing: border-box;
	padding: 0 40px 40px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.286;
	color: var(--footer-min-v2-text);
	background-color: var(--footer-min-v2-bg);
}

.qnav-footer-min-v2 :where(*) {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.qnav-footer-min-v2 > * {
	max-width: var(--footer-min-v2-max-width);
	margin-inline: auto;
}

.qnav-footer-min-v2--standalone {
	padding-top: 40px;
}

.qnav-footer-min-v2__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.qnav-footer-min-v2__social {
	flex-shrink: 0;
}

.qnav-footer-min-v2__social .arcadia-social-links {
	--social-links-gap: 23px;
	--social-links-link-size: 20px;
	--social-links-icon-height: 20px;
}

.qnav-footer-min-v2__copyright {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.286;
	color: var(--footer-min-v2-text-muted);
	white-space: nowrap;
}

.qnav-footer-min-v2__divider {
	width: 100%;
	height: 0;
	margin-block: 27px;
	border: none;
	border-top: 1px solid var(--footer-min-v2-border);
}

.qnav-footer-min-v2__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 0;
	list-style: none;
}

.qnav-footer-min-v2__bottom-link {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.286;
	color: var(--footer-min-v2-bottom-link) !important;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
}

a.qnav-footer-min-v2__bottom-link:hover {
	color: var(--footer-min-v2-link-hover) !important;
	text-decoration: underline;
}

a.qnav-footer-min-v2__bottom-link:focus-visible,
button.qnav-footer-min-v2__bottom-link:focus-visible {
	outline: 2px solid var(--footer-min-v2-link-hover);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (width >= 1680px) {
	.qnav-footer-min-v2 {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 0 16px;
		max-width: 1980px;
		padding-inline: 24px;
		margin-inline: auto;
		background: transparent;
	}

	.qnav-footer-min-v2 > * {
		grid-column: 2 / span 10;
		max-width: none;
		margin-inline: 0;
	}
}

/* --- Social links (arcadia:social-links) -------------------------------- */
/* Copied from arcadia/components/navigation/social-links/social-links.css.
   Inline SVGs take `fill: currentcolor`, so the theme class sets the color. */
.arcadia-social-links {
	--social-links-gap: 0.5rem;
	--social-links-link-size: 3em;
	--social-links-icon-height: 20px;
	--social-links-icon-width: auto;

	display: flex;
	column-gap: var(--social-links-gap);
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.arcadia-social-links__item {
	list-style: none;
}

.arcadia-social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--social-links-link-size);
	height: var(--social-links-link-size);
	color: inherit;
	text-decoration: none;
}

.arcadia-social-links__link:hover,
.arcadia-social-links__link:focus {
	color: inherit;
	text-decoration: none;
}

.arcadia-social-links__link:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.arcadia-social-links__icon {
	width: var(--social-links-icon-width);
	height: var(--social-links-icon-height);
	color: inherit;
}

.arcadia-social-links__icon svg {
	width: var(--social-links-icon-width);
	height: var(--social-links-icon-height);
	fill: currentcolor;
}

.arcadia-social-links--theme-light {
	color: #fff;
}

.arcadia-social-links--theme-dark {
	color: #000;
}

.arcadia-social-links--size-sm {
	--social-links-link-size: 2em;
	--social-links-icon-height: 16px;
}

.arcadia-social-links--size-lg {
	--social-links-link-size: 4em;
	--social-links-icon-height: 28px;
}

/* --- Utility ------------------------------------------------------------ */
.clear {
	clear: both;
}

.display-desktop {
	display: inline-block;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
	/* Source breakpoint: tighter wrapper, 58px bar, 85x24 logo. */
	.mn26 {
		padding: 16px 24px;
	}

	.mn26__bar {
		height: 58px;
		padding: 6px 6px 6px 16px;
	}

	.mn26__logo img,
	.mn26__logo svg {
		width: 85px;
		height: 24px;
	}

	.mn26__primary-button.qnav-demo-button {
		padding: 8px 14px;
		font-size: 14px;
		line-height: 14px;
	}

	#collapseContactInfo .mn26__panel-inner {
		padding: 24px;
		border-radius: var(--mn26-radius-lg);
	}

	.field-row {
		flex-direction: column;
		gap: var(--space-4);
	}

	.section-heading {
		font-size: 22px;
		margin-top: var(--space-6);
	}

	.checkout-header {
		font-size: 28px;
	}

	.qnav-footer-min-v2 {
		padding: 0 20px 32px;
	}

	.qnav-footer-min-v2--standalone {
		padding-top: 32px;
	}

	/* Form CTAs go full width on narrow screens; the nav button must not. */
	.form-actions .btn-q-primary {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 500px) {
	.display-desktop {
		display: none;
	}
}