/**
 * IJO vendors page: layout, color tokens and components.
 *
 * Every rule is scoped to .ijo-vendors, the class the page's own sections carry, so nothing else on the
 * site changes. Type families and weights come from one of the two font sheets (ijo-vendors-fonts-brand.css
 * or ijo-vendors-fonts-site.css), which a page lists after this sheet.
 * Plain CSS, no nesting. Hex values live only in the token block below.
 */

/* ----------------------------- Tokens ----------------------------- */

.ijo-vendors {
	--ijo-fs-body: 18px;
	--ijo-fs-btn: 15px;
	--ijo-dark-blue: #021d65;
	--ijo-blue: #1b4b88;
	--ijo-tonal-blue: #4b70a5;
	--ijo-azure: #c7eeff;
	--ijo-orange: #fcf5eb;
	--ijo-light: #f9fafd;
	--ijo-white: #ffffff;
	--ijo-royal: #0f3a85;
	--ijo-peri: #3f4f94;
	--ijo-sky: #8fb4e8;
	--ijo-azure-deep: #2b7fa6;
	--ijo-mint: #b9f0d8;
	--ijo-butter: #fff1b8;
	--ijo-indigo: #3b3f93;
	--ijo-teal: #0b6b73;
	--ijo-green: #1f6b45;
	--ijo-steel: #2a6a96;
	--ijo-plum: #5a3a8c;
	--ijo-plum-deep: #432a6b;
	--ijo-flow-1: #1ba57a;
	--ijo-flow-2: #1a9aa0;
	--ijo-flow-3: #6fa6cd;
	--ijo-flow-4: #4f9ad0;
	--ijo-flow-5: #8d93d8;
	--ijo-flow-6: #a98fe0;
	--ijo-rule-on-light: #d3dcea;
	--ijo-rule-on-dark: rgba(252, 245, 235, 0.32);
	--ijo-rule-on-sky: rgba(2, 29, 101, 0.28);
	--ijo-card-shadow: 0 1px 2px rgba(2, 29, 101, 0.06), 0 8px 28px rgba(2, 29, 101, 0.08);
	--ijo-btn-shadow: 0 8px 24px rgba(2, 29, 101, 0.28);
	--ijo-btn-shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.25);
	--ijo-pill-shadow: 0 10px 30px rgba(2, 29, 101, 0.35);
	--ijo-pill-border: rgba(199, 238, 255, 0.4);

	/* Decorative blurred-blue textures, recreated in CSS. No stop is lighter than --ijo-tonal-blue. */
	--ijo-tex-dark: radial-gradient(55% 70% at 12% 18%, rgba(75, 112, 165, 0.95) 0%, rgba(75, 112, 165, 0) 70%),
		radial-gradient(45% 60% at 88% 22%, rgba(56, 94, 152, 0.9) 0%, rgba(56, 94, 152, 0) 70%),
		radial-gradient(60% 80% at 72% 100%, rgba(27, 75, 136, 0.9) 0%, rgba(27, 75, 136, 0) 70%),
		radial-gradient(50% 60% at 28% 96%, rgba(2, 29, 101, 0.9) 0%, rgba(2, 29, 101, 0) 70%),
		linear-gradient(160deg, #0b2a72 0%, #1b4b88 55%, #021d65 100%);
	--ijo-tex-tonal: radial-gradient(55% 75% at 18% 22%, rgba(75, 112, 165, 1) 0%, rgba(75, 112, 165, 0) 70%),
		radial-gradient(50% 70% at 86% 72%, rgba(75, 112, 165, 0.9) 0%, rgba(75, 112, 165, 0) 70%),
		radial-gradient(45% 55% at 62% 8%, rgba(46, 82, 140, 0.85) 0%, rgba(46, 82, 140, 0) 70%),
		radial-gradient(40% 50% at 30% 100%, rgba(38, 74, 132, 0.8) 0%, rgba(38, 74, 132, 0) 70%),
		linear-gradient(135deg, #46699e 0%, #3c6198 50%, #476ca1 100%);
	--ijo-tex-peri: radial-gradient(55% 70% at 14% 20%, rgba(78, 92, 162, 0.95) 0%, rgba(78, 92, 162, 0) 70%),
		radial-gradient(50% 65% at 88% 82%, rgba(46, 60, 128, 0.9) 0%, rgba(46, 60, 128, 0) 70%),
		radial-gradient(45% 55% at 70% 6%, rgba(58, 72, 144, 0.85) 0%, rgba(58, 72, 144, 0) 70%),
		linear-gradient(150deg, #44559c 0%, #3a4a8c 55%, #3f4f94 100%);
	--ijo-tex-sky: radial-gradient(60% 75% at 14% 16%, rgba(160, 197, 245, 1) 0%, rgba(160, 197, 245, 0) 70%),
		radial-gradient(50% 65% at 88% 84%, rgba(111, 155, 220, 0.95) 0%, rgba(111, 155, 220, 0) 70%),
		radial-gradient(45% 55% at 66% 6%, rgba(140, 180, 238, 0.9) 0%, rgba(140, 180, 238, 0) 70%),
		linear-gradient(160deg, #8db4ea 0%, #78a2e0 55%, #9bbdee 100%);

	/* Accent-word sizes (--ijo-script-hero, -intro, -why, -what, -us, -yes, -maybe, -met, -card) are set by the font
	   sheet that has a script face; without them an accent word is the size of its heading. They are not defined here,
	   so the order of the sheets cannot change them. */
}

/* Text sets per band: heading, body, accent, button, focus ring, rules and check circles. */
.ijo-vendors.ijo-band--tex-dark,
.ijo-vendors.ijo-band--blue,
.ijo-vendors.ijo-band--peri,
.ijo-vendors.ijo-band--tex-tonal {
	--ijo-h: var(--ijo-white);
	--ijo-b: var(--ijo-orange);
	--ijo-a: var(--ijo-azure);
	--ijo-btn-bg: var(--ijo-orange);
	--ijo-btn-fg: var(--ijo-dark-blue);
	--ijo-focus: var(--ijo-azure);
	--ijo-rule: var(--ijo-rule-on-dark);
	--ijo-icon: var(--ijo-azure);
	--ijo-icon-fg: var(--ijo-dark-blue);
	--ijo-hover-shadow: var(--ijo-btn-shadow-dark);
}

.ijo-vendors.ijo-band--tex-tonal {
	--ijo-h: var(--ijo-orange);
}

.ijo-vendors.ijo-band--light {
	--ijo-h: var(--ijo-dark-blue);
	--ijo-b: var(--ijo-blue);
	--ijo-a: var(--ijo-blue);
	--ijo-btn-bg: var(--ijo-dark-blue);
	--ijo-btn-fg: var(--ijo-white);
	--ijo-focus: var(--ijo-blue);
	--ijo-rule: var(--ijo-rule-on-light);
	--ijo-icon: var(--ijo-blue);
	--ijo-icon-fg: var(--ijo-white);
	--ijo-hover-shadow: var(--ijo-btn-shadow);
}

.ijo-vendors.ijo-band--sky {
	--ijo-h: var(--ijo-dark-blue);
	--ijo-b: var(--ijo-dark-blue);
	--ijo-a: var(--ijo-royal);
	--ijo-btn-bg: var(--ijo-dark-blue);
	--ijo-btn-fg: var(--ijo-white);
	--ijo-focus: var(--ijo-royal);
	--ijo-rule: var(--ijo-rule-on-sky);
	--ijo-icon: var(--ijo-royal);
	--ijo-icon-fg: var(--ijo-white);
	--ijo-hover-shadow: var(--ijo-btn-shadow);
}

/* Each section takes its own heading color and accent color, so the headings run through the palette. */
.ijo-vendors.ijo-s2 {
	--ijo-h: var(--ijo-royal);
	--ijo-a: var(--ijo-steel);
}

.ijo-vendors.ijo-s3 {
	--ijo-h: var(--ijo-butter);
	--ijo-a: var(--ijo-white);
}

.ijo-vendors.ijo-s4 {
	--ijo-h: var(--ijo-plum);
	--ijo-a: var(--ijo-teal);
}

.ijo-vendors.ijo-s5 {
	--ijo-h: var(--ijo-azure);
	--ijo-a: var(--ijo-orange);
}

.ijo-vendors.ijo-s6 {
	--ijo-h: var(--ijo-mint);
	--ijo-a: var(--ijo-white);
}

.ijo-vendors.ijo-s7 {
	--ijo-h: var(--ijo-indigo);
	--ijo-a: var(--ijo-teal);
	--ijo-icon: var(--ijo-azure-deep);
	--ijo-cta-bg: var(--ijo-plum);
	--ijo-cta-bg-hover: var(--ijo-plum-deep);
	--ijo-fs-btn: 17px;
}

.ijo-vendors.ijo-s8 {
	--ijo-h: var(--ijo-butter);
	--ijo-a: var(--ijo-mint);
}

.ijo-vendors.ijo-s9 {
	--ijo-h: var(--ijo-teal);
	--ijo-a: var(--ijo-green);
}

.ijo-vendors.ijo-band--tex-dark {
	background: var(--ijo-tex-dark);
}

.ijo-vendors.ijo-band--tex-tonal {
	background: var(--ijo-tex-tonal);
}

.ijo-vendors.ijo-band--peri {
	background: var(--ijo-tex-peri);
	background-color: var(--ijo-peri);
}

.ijo-vendors.ijo-band--sky {
	background: var(--ijo-tex-sky);
	background-color: var(--ijo-sky);
}

.ijo-vendors.ijo-band--blue {
	background: var(--ijo-blue);
}

.ijo-vendors.ijo-band--light {
	background: var(--ijo-light);
}

/* ----------------------------- Bands ----------------------------- */

.ijo-vendors.ijo-band {
	margin: 0;
	padding: clamp(64px, 9vw, 120px) 24px;
	color: var(--ijo-b);
	font-family: var(--ijo-font-body);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.ijo-vendors.ijo-band > .container-fluid {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0;
}

.ijo-vendors.ijo-s1 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64vh;
	padding: clamp(72px, 10vw, 128px) 24px;
	text-align: center;
}

.ijo-vendors.ijo-s1 > .container-fluid {
	max-width: 880px;
}

/* The platform's clearfix pseudo-elements would be flex items in this band. */
.ijo-vendors.ijo-s1::before,
.ijo-vendors.ijo-s1::after {
	content: none;
}

.ijo-vendors.ijo-s4 {
	padding: clamp(72px, 10vw, 136px) 24px;
	text-align: center;
}

.ijo-vendors.ijo-s4 > .container-fluid,
.ijo-vendors.ijo-s10 > .container-fluid {
	max-width: 760px;
}

.ijo-vendors.ijo-s6 > .container-fluid {
	max-width: 1060px;
}

.ijo-vendors.ijo-s7 > .container-fluid {
	max-width: 920px;
}

.ijo-vendors.ijo-s10 {
	padding: clamp(72px, 10vw, 136px) 24px clamp(48px, 6vw, 72px);
	text-align: center;
}

/* Rows and columns: the grid gutter off, spacing owned by the page. */
.ijo-vendors .row {
	--bs-gutter-x: 0;
	margin-right: 0;
	margin-left: 0;
}

.ijo-vendors .row > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}

.ijo-vendors .row + .row {
	margin-top: clamp(32px, 4vw, 52px);
}

.ijo-vendors.ijo-s5 .row + .row {
	margin-top: clamp(48px, 6vw, 80px);
}

.ijo-vendors.ijo-s6 .row + .row {
	margin-top: clamp(36px, 4vw, 56px);
}

.ijo-vendors.ijo-s7 .row + .row {
	margin-top: 36px;
}

.ijo-vendors.ijo-s9 .row + .row {
	margin-top: clamp(36px, 4vw, 56px);
}

/* Widgets: platform spacing off. */
.ijo-vendors .widget {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.ijo-vendors .widget .widget-image-wrapper:empty {
	display: none;
}

/* The platform makes every content block a flex container at (0,3,0); one class more keeps it a block. */
.ijo-vendors.ijo-band .widget .content-block {
	display: block;
	margin: 0;
	padding: 0;
}

/* ----------------------------- Type ----------------------------- */

.ijo-vendors .widget h1,
.ijo-vendors .widget h2,
.ijo-vendors .widget h3 {
	margin: 0;
	padding: 0;
	color: var(--ijo-h);
	text-transform: none;
}

/* The theme sets heading families under .wf-active and with !important on h3, so the family is stated here. */
.ijo-vendors .ijo-h1,
.ijo-vendors .ijo-h2,
.ijo-vendors .ijo-h3 {
	font-family: var(--ijo-font-head) !important;
}

/* The theme styles every direct-child span of a heading as an uppercase eyebrow; reset that for the page. */
.ijo-vendors .widget h1 > span,
.ijo-vendors .widget h2 > span,
.ijo-vendors .widget h3 > span {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
}

.ijo-vendors .widget h2 > span,
.ijo-vendors .widget h3 > span {
	display: inline;
}

.ijo-vendors .ijo-h1 {
	font-size: clamp(34px, 5.6vw, 68px);
	font-weight: var(--ijo-w-h1);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.ijo-vendors .ijo-h2 {
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: var(--ijo-w-h2);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.ijo-vendors .ijo-h2--statement {
	font-size: clamp(30px, 4.2vw, 52px);
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.ijo-vendors .ijo-h3 {
	font-weight: var(--ijo-w-h3);
	line-height: 1.3;
	letter-spacing: normal;
}

.ijo-vendors .widget .ijo-h1-line {
	display: block;
}

.ijo-vendors .widget .ijo-script {
	font-family: var(--ijo-font-script);
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ijo-a) !important;
}

.ijo-vendors .widget .ijo-h1-script {
	display: block;
	margin-top: 0.12em;
	font-size: var(--ijo-script-hero, 1em);
	line-height: 1.05;
}

.ijo-vendors.ijo-s2 .ijo-h2 .ijo-script {
	font-size: var(--ijo-script-intro, 1em);
}

.ijo-vendors.ijo-s3 .ijo-h2 .ijo-script {
	font-size: var(--ijo-script-why, 1em);
}

.ijo-vendors.ijo-s5 .ijo-h2 .ijo-script,
.ijo-vendors.ijo-s9 .ijo-h2 .ijo-script {
	font-size: var(--ijo-script-what, 1em);
	padding: 0 0.1em;
}

.ijo-vendors.ijo-s6 .ijo-h2 .ijo-script {
	font-size: var(--ijo-script-us, 1em);
}

.ijo-vendors.ijo-s7 .ijo-cta-lead .ijo-script {
	font-size: var(--ijo-script-yes, 1em);
}

.ijo-vendors.ijo-s10 .ijo-h2 .ijo-script {
	font-size: var(--ijo-script-maybe, 1em);
}

.ijo-vendors.ijo-s10 .ijo-closing--met .ijo-script {
	font-size: var(--ijo-script-met, 1em);
}

.ijo-vendors .widget p,
.ijo-vendors .widget li {
	margin: 0;
	font-family: var(--ijo-font-body);
	font-size: var(--ijo-fs-body);
	line-height: 1.65;
	color: var(--ijo-b);
}

.ijo-vendors .widget p {
	text-wrap: pretty;
}

.ijo-vendors .widget p.ijo-lead,
.ijo-vendors .widget.ijo-prose--lead p,
.ijo-vendors .widget.ijo-prose--maybe p {
	font-size: clamp(18px, 1.6vw, 21px);
}

/* The design balances the line breaks of these headings and leaves the others to wrap naturally. */
.ijo-vendors.ijo-s2 .ijo-heading .ijo-h2,
.ijo-vendors.ijo-s4 .ijo-heading .ijo-h2,
.ijo-vendors.ijo-s5 .ijo-heading .ijo-h2,
.ijo-vendors.ijo-s6 .ijo-heading .ijo-h2,
.ijo-vendors.ijo-s8 .ijo-heading .ijo-h2 {
	text-wrap: balance;
}

/* ----------------------------- Hero ----------------------------- */

.ijo-vendors .ijo-hero .content-block > .d-flex {
	align-items: center;
	gap: 28px;
}

.ijo-vendors .widget p.ijo-lead {
	max-width: 680px;
	line-height: 1.6;
}

.ijo-vendors .ijo-actions.link-container {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 28px;
	margin: 4px 0 0 !important;
	padding: 0;
}

/* ----------------------------- Buttons and links ----------------------------- */

.ijo-vendors.ijo-band a.btn.ijo-btn,
.ijo-vendors.ijo-band a.btn.ijo-btn:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	height: auto;
	padding: 0 30px;
	border: 0;
	border-radius: 999px !important;
	background: var(--ijo-btn-bg);
	color: var(--ijo-btn-fg);
	font-family: var(--ijo-font-ui);
	font-size: var(--ijo-fs-btn);
	font-weight: var(--ijo-w-btn);
	line-height: 1.65;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ijo-vendors.ijo-band a.btn.ijo-btn:hover,
.ijo-vendors.ijo-band a.btn.ijo-btn:focus {
	background: var(--ijo-btn-bg);
	color: var(--ijo-btn-fg);
	text-decoration: none;
	opacity: 0.85;
	transform: translateY(-1px);
	box-shadow: var(--ijo-hover-shadow);
}

.ijo-vendors.ijo-band a.btn:focus-visible,
.ijo-vendors.ijo-band a.btn.ijo-btn:focus-visible {
	outline: 3px solid var(--ijo-focus);
	outline-offset: 3px;
}

/* ----------------------------- Photos ----------------------------- */

/* The platform sizes every widget image at (0,3,1) with width and height 100% and cover, so the rules for images start
   at (0,4,1): a photo keeps its 4:3 box even in a stretched column, and the badge and logo are contained. */
.ijo-vendors.ijo-band .widget.ijo-photo .widget-image-wrapper,
.ijo-vendors.ijo-band .widget.ijo-photo .widget-inner {
	margin: 0;
	padding: 0;
}

.ijo-vendors.ijo-band .widget.ijo-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
}

.ijo-vendors.ijo-band .widget.ijo-photo.ijo-photo--lead img {
	object-position: 50% 35%;
	box-shadow: 14px 14px 0 var(--ijo-sky);
}

.ijo-vendors.ijo-s5.ijo-band .widget.ijo-photo img {
	box-shadow: 14px 14px 0 var(--ijo-mint);
}

/* ----------------------------- Section 2: the pitch beside a photo ----------------------------- */

.ijo-vendors.ijo-s2 .row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

.ijo-vendors.ijo-s2 .ijo-text-col {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.ijo-vendors .wysiwyg-container {
	margin: 0;
	padding: 0;
}

.ijo-vendors .widget.ijo-prose {
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: left;
}

.ijo-vendors .widget.ijo-prose.ijo-prose--lead,
.ijo-vendors .widget.ijo-prose.ijo-prose--maybe {
	text-align: center;
}

.ijo-vendors .ijo-prose .wysiwyg-container,
.ijo-vendors .ijo-prose p {
	text-align: inherit;
}

.ijo-vendors .ijo-prose--lead .wysiwyg-container,
.ijo-vendors .ijo-prose--maybe .wysiwyg-container {
	align-items: center;
}

.ijo-vendors .ijo-prose .wysiwyg-container {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.ijo-vendors .ijo-prose p {
	margin: 0;
}

/* ----------------------------- Section 3: six cards ----------------------------- */

.ijo-vendors .ijo-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

.ijo-vendors .ijo-card {
	--ijo-card-accent: var(--ijo-royal);
	--ijo-a: var(--ijo-card-accent);
	padding: 30px 28px;
	border-top: 5px solid var(--ijo-card-accent);
	border-radius: 16px;
	background: var(--ijo-white);
	box-shadow: var(--ijo-card-shadow);
}

.ijo-vendors .ijo-card:nth-child(6n + 2) {
	--ijo-card-accent: var(--ijo-teal);
}

.ijo-vendors .ijo-card:nth-child(6n + 3) {
	--ijo-card-accent: var(--ijo-indigo);
}

.ijo-vendors .ijo-card:nth-child(6n + 4) {
	--ijo-card-accent: var(--ijo-green);
}

.ijo-vendors .ijo-card:nth-child(6n + 5) {
	--ijo-card-accent: var(--ijo-plum);
}

.ijo-vendors .ijo-card:nth-child(6n + 6) {
	--ijo-card-accent: var(--ijo-steel);
}

.ijo-vendors .ijo-card .content-block > .d-flex {
	gap: 10px;
}

.ijo-vendors .ijo-card .ijo-h3 {
	font-size: 20px;
	color: var(--ijo-card-accent);
}

/* The key word of each card title is set in the script face, larger than the title around it. */
.ijo-vendors.ijo-s3 .ijo-card .ijo-script--card {
	font-size: var(--ijo-script-card, 1em);
	padding: 0 0.1em;
}

.ijo-vendors .widget.ijo-card p {
	font-size: 17px;
	color: var(--ijo-dark-blue);
}

/* ----------------------------- Section 4: statement ----------------------------- */

.ijo-vendors.ijo-s4 .ijo-heading,
.ijo-vendors.ijo-s4 .widget.ijo-prose {
	text-align: center;
}

.ijo-vendors .ijo-center-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ijo-vendors.ijo-s4 .ijo-center-col {
	gap: 22px;
}

.ijo-vendors.ijo-s4 .widget.ijo-prose {
	gap: 22px;
}

.ijo-vendors.ijo-s4 .ijo-prose .wysiwyg-container {
	gap: 22px;
}

.ijo-vendors.ijo-s4 .ijo-heading {
	margin-bottom: 6px;
}

.ijo-vendors.ijo-s4 .ijo-h2--statement {
	line-height: 1.3;
}

/* A single brush stroke under PARTNERS: flat, thicker at the left and tapering to a fine point at the right, drawn as an SVG
   mask over the accent color so it scales with the word. The word stays inline so the period after it cannot wrap onto its
   own line. It starts at (0,3,1) to beat the reset that makes every heading span inline. */
.ijo-vendors .widget h2 > .ijo-flourish {
	position: relative;
	white-space: nowrap;
}

.ijo-vendors .widget h2 > .ijo-flourish::after {
	content: "";
	position: absolute;
	right: -2%;
	bottom: -0.07em;
	left: -2%;
	height: 0.38em;
	background: var(--ijo-a);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 6.2C70 5.6 140 6.9 200 7.4C240 7.7 275 8.7 298 9.3C270 10 235 10.6 195 11.1C135 11.9 70 11.3 4 11C.8 10.2 .8 7.2 2 6.2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 6.2C70 5.6 140 6.9 200 7.4C240 7.7 275 8.7 298 9.3C270 10 235 10.6 195 11.1C135 11.9 70 11.3 4 11C.8 10.2 .8 7.2 2 6.2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ----------------------------- Section 5: photo and a pair of items, three times ----------------------------- */

.ijo-vendors.ijo-s5 .row:not(:first-child) {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}

.ijo-vendors.ijo-s5 .row:has(> .ijo-photo-col--right) {
	flex-direction: row-reverse;
}

.ijo-vendors.ijo-s5 .ijo-photo-col,
.ijo-vendors.ijo-s5 .ijo-items-col {
	flex: 1 1 380px;
	width: auto;
	min-width: 0;
	max-width: none;
}

.ijo-vendors.ijo-s5 .ijo-items-col {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ijo-vendors .ijo-item .content-block > .d-flex {
	gap: 8px;
}

.ijo-vendors.ijo-s5 .ijo-item--means .ijo-h3 {
	font-size: 21px;
	color: var(--ijo-butter);
}

.ijo-vendors .ijo-item--tip .ijo-h3 {
	font-size: 19px;
}

.ijo-vendors .widget.ijo-item--tip p {
	font-size: 17px;
}

/* ----------------------------- Section 6: five commitments and the badge ----------------------------- */

.ijo-vendors.ijo-s6 .ijo-expect {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 36px 56px;
	width: 100%;
}

.ijo-vendors .ijo-item--ruled {
	--ijo-item-rule: var(--ijo-butter);
	padding-top: 20px;
	border-top: 3px solid var(--ijo-item-rule);
}

.ijo-vendors.ijo-s6 .ijo-item--ruled:nth-child(5n + 2) {
	--ijo-item-rule: var(--ijo-mint);
}

.ijo-vendors.ijo-s6 .ijo-item--ruled:nth-child(5n + 3) {
	--ijo-item-rule: var(--ijo-azure);
}

.ijo-vendors.ijo-s6 .ijo-item--ruled:nth-child(5n + 4) {
	--ijo-item-rule: var(--ijo-orange);
}

.ijo-vendors.ijo-s6 .ijo-item--ruled .ijo-h3 {
	font-size: 21px;
	color: var(--ijo-white);
}

/* The fifth commitment is the one that matters most: it spans both columns and sits centered. */
.ijo-vendors.ijo-s6 .ijo-item--last {
	grid-column: 1 / -1;
	justify-self: center;
	width: 100%;
	max-width: 520px;
	text-align: center;
}

.ijo-vendors.ijo-s6 .ijo-item--last .content-block > .d-flex {
	align-items: center;
}

.ijo-vendors.ijo-s6 .ijo-item--last .ijo-h3,
.ijo-vendors.ijo-s6 .ijo-item--last p {
	text-align: center;
}

.ijo-vendors.ijo-s6 .ijo-badge-col {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

/* The badge is sized on its widget: 240px on a phone, 340px from 720px up, or the width of a narrower column. */
.ijo-vendors .widget.ijo-badge {
	width: 240px;
	max-width: 100%;
}

@media (min-width: 720px) {
	.ijo-vendors .widget.ijo-badge {
		width: 340px;
	}
}

.ijo-vendors.ijo-band .widget.ijo-photo.ijo-badge img {
	width: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	object-fit: contain;
}

/* ----------------------------- Section 7: checklist and closing ask ----------------------------- */

.ijo-vendors .ijo-checklist {
	max-width: 920px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.ijo-vendors .ijo-checklist li {
	margin: 0;
	padding: 9px 0;
	font-size: 18px;
	line-height: 1.65;
	text-align: center;
}

.ijo-vendors .ijo-checklist li > span {
	font-size: 19px;
	text-wrap: pretty;
}

/* The theme puts a diamond bullet on every list item inside a WYSIWYG widget; the check circle replaces it. */
.ijo-vendors .ijo-checklist li::before {
	content: none;
}

.ijo-vendors .ijo-check {
	display: inline-block;
	margin: 0 14px 0 0;
	vertical-align: -7px;
}

.ijo-vendors .ijo-check circle {
	fill: var(--ijo-icon-fg);
	stroke: var(--ijo-icon);
	stroke-width: 1.8;
}

.ijo-vendors .ijo-check polyline {
	fill: none;
	stroke: var(--ijo-icon);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ijo-vendors .ijo-closing .content-block > .d-flex {
	align-items: center;
	gap: 22px;
}

.ijo-vendors .widget p.ijo-cta-lead {
	text-wrap: wrap;
	font-family: var(--ijo-font-head);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: var(--ijo-w-lead);
	line-height: 1.4;
	color: var(--ijo-h);
}

.ijo-vendors .ijo-closing .ijo-actions.link-container {
	margin: 0 !important;
}

/* In the checklist section the apply button is the page's primary call to action: a larger, bolder pill filled with the
   brand purple and white text. Hover and focus deepen the fill; keyboard focus adds the shared outline ring. */
.ijo-vendors.ijo-s7.ijo-band a.btn.ijo-btn,
.ijo-vendors.ijo-s7.ijo-band a.btn.ijo-btn:visited {
	box-sizing: border-box;
	max-width: 100%;
	min-height: 60px;
	padding: 0 32px;
	border: 2px solid var(--ijo-cta-bg);
	background: var(--ijo-cta-bg);
	color: var(--ijo-white);
	font-weight: var(--ijo-w-cta);
}

.ijo-vendors.ijo-s7.ijo-band a.btn.ijo-btn:hover,
.ijo-vendors.ijo-s7.ijo-band a.btn.ijo-btn:focus {
	border-color: var(--ijo-cta-bg-hover);
	background: var(--ijo-cta-bg-hover);
	color: var(--ijo-white);
	opacity: 1;
}

@media (min-width: 768px) {
	.ijo-vendors.ijo-s7 {
		--ijo-fs-btn: 18px;
	}

	.ijo-vendors.ijo-s7.ijo-band a.btn.ijo-btn,
	.ijo-vendors.ijo-s7.ijo-band a.btn.ijo-btn:visited {
		min-height: 64px;
		padding: 0 44px;
	}
}

/* ----------------------------- Section 8: tips ----------------------------- */

.ijo-vendors .ijo-tips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 36px 44px;
}

/* ----------------------------- Section 9: the process, as a real ordered list drawn as a curved chart ----------------------------- */

.ijo-vendors.ijo-s9 .row:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}

.ijo-vendors.ijo-s9 .ijo-flow-head {
	flex: 1 1 380px;
	width: auto;
	min-width: 0;
	max-width: none;
}

.ijo-vendors.ijo-s9 .ijo-flow-col {
	flex: 1.3 1 460px;
	width: auto;
	min-width: 0;
	max-width: none;
}

.ijo-vendors .ijo-flow {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ijo-vendors .ijo-flow li {
	--ijo-flow-c: var(--ijo-flow-1);
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	width: fit-content;
	max-width: 100%;
	min-height: 64px;
	margin: 0;
	padding: 8px 26px 8px 8px;
	border: 2px solid var(--ijo-flow-c);
	border-radius: 999px;
	background: var(--ijo-white);
	text-align: left;
}

.ijo-vendors .ijo-flow li:nth-child(2) {
	--ijo-flow-c: var(--ijo-flow-2);
}

.ijo-vendors .ijo-flow li:nth-child(3) {
	--ijo-flow-c: var(--ijo-flow-3);
}

.ijo-vendors .ijo-flow li:nth-child(4) {
	--ijo-flow-c: var(--ijo-flow-4);
}

.ijo-vendors .ijo-flow li:nth-child(5) {
	--ijo-flow-c: var(--ijo-flow-5);
}

.ijo-vendors .ijo-flow li:nth-child(6) {
	--ijo-flow-c: var(--ijo-flow-6);
}

.ijo-vendors .ijo-step-num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ijo-flow-c);
	color: var(--ijo-dark-blue);
	font-family: var(--ijo-font-ui);
	font-size: 18px;
	font-weight: var(--ijo-w-num);
	line-height: 1;
}

.ijo-vendors .ijo-step-label {
	font-family: var(--ijo-font-ui);
	font-size: 16px;
	font-weight: var(--ijo-w-label);
	line-height: 1.3;
	color: var(--ijo-dark-blue);
}

.ijo-vendors .ijo-note {
	max-width: 640px;
	margin-right: auto;
	margin-left: auto;
}

/* From 992px the six pills bow out along a dashed arc: the arc is the right half of an ellipse that runs through the
   centers of the first and last number circles, and each pill is offset to where the arc is at its height. */
@media (min-width: 992px) {
	.ijo-vendors .ijo-flow::before {
		content: "";
		position: absolute;
		top: 32px;
		bottom: 32px;
		left: 30px;
		width: 72px;
		border-right: 3px dashed var(--ijo-flow-4);
		border-radius: 0 100% 100% 0 / 0 50% 50% 0;
	}

	.ijo-vendors .ijo-flow li:nth-child(2),
	.ijo-vendors .ijo-flow li:nth-child(5) {
		margin-left: 58px;
	}

	.ijo-vendors .ijo-flow li:nth-child(3),
	.ijo-vendors .ijo-flow li:nth-child(4) {
		margin-left: 70px;
	}
}

/* ----------------------------- Section 10: closing and sign-off ----------------------------- */

.ijo-vendors.ijo-s10 .ijo-heading {
	margin-bottom: 30px;
}

/* The closing heading reads as a lead line, a little larger than the body text, not as a section title. */
.ijo-vendors.ijo-s10 .ijo-h2--statement {
	font-size: clamp(22px, 2.6vw, 26px);
	line-height: 1.3;
	letter-spacing: 0;
}

.ijo-vendors.ijo-s10 .ijo-prose--maybe {
	margin-bottom: 36px;
}

.ijo-vendors.ijo-s10 .ijo-prose--maybe .wysiwyg-container {
	gap: 14px;
}

.ijo-vendors.ijo-s10 .ijo-closing--met {
	margin-bottom: 16px;
}

.ijo-vendors.ijo-s10 .ijo-closing--met .content-block > .d-flex {
	gap: 30px;
}

.ijo-vendors.ijo-s10 .widget p.ijo-cta-lead {
	font-weight: var(--ijo-w-btn);
	line-height: 1.3;
}

.ijo-vendors.ijo-s10 .ijo-signoff {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px 22px;
	width: 100%;
	margin-top: clamp(24px, 4vw, 40px);
}

.ijo-vendors.ijo-s10 .row:has(> .ijo-signoff) {
	margin-top: 30px;
}

.ijo-vendors .ijo-signoff > .widget {
	flex: none;
	width: auto;
}

.ijo-vendors .ijo-signoff > .widget.ijo-logo,
.ijo-vendors .widget.ijo-logo {
	width: 92px;
}

.ijo-vendors.ijo-band .widget.ijo-photo.ijo-logo img {
	width: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	object-fit: contain;
}

/* The platform gives every paragraph the full width (w-100); the sign-off sits beside the logo. */
.ijo-vendors .widget.ijo-see p {
	text-wrap: wrap;
}

.ijo-vendors .widget.ijo-signoff-line p {
	width: auto !important;
	font-family: var(--ijo-font-script);
}

.ijo-vendors .widget.ijo-signoff-line p,
.ijo-vendors .ijo-signoff-text {
	font-size: clamp(38px, 4vw, 52px);
	line-height: 1;
	color: var(--ijo-a);
}

/* ----------------------------- Apply pill on phones ----------------------------- */

.ijo-vendors.ijo-s10 .row:has(> .ijo-pill-col) {
	margin-top: 0;
}

/* The platform gives every widget display block and full width at (0,2,0); these start at (0,3,0). */
.ijo-vendors .widget.ijo-pill {
	display: none;
}

@media (max-width: 719.98px) {
	.ijo-vendors .widget.ijo-pill {
		position: fixed;
		bottom: 16px;
		left: 50%;
		z-index: 50;
		display: block;
		width: auto;
		transform: translateX(-50%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.ijo-vendors .widget.ijo-pill.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.ijo-vendors .widget.ijo-pill .ijo-pill-wrap.link-container {
		display: block !important;
		margin: 0 !important;
		padding: 0;
	}

	.ijo-vendors .widget.ijo-pill a.btn.ijo-pill-btn,
	.ijo-vendors .widget.ijo-pill a.btn.ijo-pill-btn:visited,
	.ijo-vendors .widget.ijo-pill a.btn.ijo-pill-btn:hover,
	.ijo-vendors .widget.ijo-pill a.btn.ijo-pill-btn:focus {
		display: inline-flex;
		align-items: center;
		height: auto;
		min-height: 48px;
		margin: 0;
		padding: 0 26px;
		border: 1px solid var(--ijo-pill-border);
		border-radius: 999px !important;
		background: var(--ijo-dark-blue);
		color: var(--ijo-white);
		font-family: var(--ijo-font-ui);
		font-size: 15px;
		font-weight: var(--ijo-w-btn);
		line-height: 1.2;
		letter-spacing: 0.04em;
		text-decoration: none;
		text-transform: none;
		white-space: nowrap;
		box-shadow: var(--ijo-pill-shadow);
	}

	.ijo-vendors .widget.ijo-pill a.btn.ijo-pill-btn:focus-visible {
		outline: 3px solid var(--ijo-azure);
		outline-offset: 3px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.ijo-vendors.ijo-band a.btn.ijo-btn,
	.ijo-vendors .widget.ijo-pill {
		transition: none;
	}

	.ijo-vendors.ijo-band a.btn.ijo-btn:hover,
	.ijo-vendors.ijo-band a.btn.ijo-btn:focus {
		transform: none;
	}
}