/**
 * Case study single + archive.
 *
 * Uses the same tokens as the rest of the site so a study reads as part of it:
 * Lexend, #133FF1 primary, #EEFF41 as punctuation, 1200px content width.
 */

.cx-cs{
	width:100%;
	--cs-primary:#133FF1;
	--cs-lime:#EEFF41;
	--cs-ink:#101010;
	--cs-muted:#6B7280;
	--cs-line:#E6E9F2;
	--cs-surface:#F2F5FF;
	font-family:Lexend, sans-serif;
	color:var(--cs-ink);
}

.cx-cs__wrap{
	width:100%;
	max-width:1480px;
	margin-inline:auto;
	padding-inline:20px;
}

.cx-cs__flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    width: 100%;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- hero */
.cx-cs__hero{
	background:var(--cs-surface);
	padding-block:64px 72px;
}
.cx-cs__hero-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:48px;
	align-items:center;
}

/*
 * Two badge variants, copied from the ones already on the site: the light blue
 * pill the homepage uses for section eyebrows, and the lime .cx-suite-badge.
 */
.cx-cs__eyebrow{
	display:inline-block;
	padding:6px 15px;
	border:1px solid #D5D9EB;
	border-radius:30px;
	background:#E7F6FF;
	color:var(--cs-primary);
	font-family:Lexend, sans-serif;
	font-size:14px;
	font-weight:500;
	line-height:1.2;
	letter-spacing:.6px;
	text-transform:uppercase;
}
.cx-cs__eyebrow.is-lime{
	padding: 6px 8px;
	border-radius:999px;
	background:var(--cs-lime);
	color:var(--cs-primary);
	border: 1px solid #D6EB00;
}

.cx-cs__title{
	margin:18px 0 0;
	font-size:clamp(32px, 4.2vw, 60px);
	font-weight:500;
	line-height:1.117;
	letter-spacing:-0.044em;
}
.cx-cs__title.is-centred,
.cx-cs__intro.is-centred,
.cx-cs__h2.is-centred{text-align:center;margin-inline:auto;}

.cx-cs__intro{
	margin:16px 0 0;
	max-width:632px;
	color:var(--cs-muted);
	font-size:18px;
	line-height:1.333;
}

/*
 * The hero frame is a gradient ring on a pseudo element rather than a padded
 * background, so a transparent poster never shows the gradient through itself.
 */
.cx-cs__frame{
	position:relative;
	border-radius:var(--cs-frame-r,22px);
	padding:var(--cs-frame,12px);
}
.cx-cs__frame::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	padding:var(--cs-frame,12px);
	background-image:var(--cs-grad,linear-gradient(135deg,#EEFF41,#133FF1,#29A0F8));
	pointer-events:none;
}

/*
 * The pattern rides on the ring, masked exactly like the gradient beneath it.
 * Inside the frame there is only the photo, so the ring is the one place it
 * can be seen. Tile size and opacity are the image card's own.
 * The data URI is set on --cs-pat from PHP, see inc/case-study-frame.php.
 */
.cx-cs__frame::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	padding:var(--cs-frame,12px);
	background-image:var(--cs-pat,none);
	background-repeat:repeat;
	background-size:var(--cs-pat-size,120px) var(--cs-pat-size,120px);
	opacity:var(--cs-pat-op,.35);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	        mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	        mask-composite:exclude;
	pointer-events:none;
}
/* scoped through .cx-cs: the kit ships `.elementor-kit-N img{border-radius:0}`,
   which beats a bare single-class selector */
.cx-cs .cx-cs__heroimg{
	display:block;
	width:100%;
	height:auto;
	border-radius:var(--cs-img-r,14px);
	position:relative;
	z-index:1;
}
.cx-cs__embed{position:relative;z-index:1;border-radius:14px;overflow:hidden;}
.cx-cs__embed iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;}

/* ---------------------------------------------------------------- body */
.cx-cs__body{
	display:grid;
	grid-template-columns:340px 1fr;
	gap:56px;
	padding-block:56px 24px;
	align-items:start;
}

.cx-cs__side{position:sticky;top:100px;}
.cx-cs__fact{padding:14px 0;border-bottom:1px solid var(--cs-line);}
.cx-cs__fact-k{
	display:block;
	font-size:20px;
	font-weight:500;
	margin-bottom:4px;
	letter-spacing:0;
}
.cx-cs__fact-v{display:block;color:#101010;font-size:16px; letter-spacing:0; font-weight:400;}

.cx-cs__toc{padding-top:18px;}
.cx-cs__toc ul{margin:10px 0 0;padding:0;list-style:none;}
.cx-cs__toc li{padding:10px 0;}
.cx-cs__toc a{
	display:block;
	padding-left:12px;
	border-left:2px solid transparent;
	color:var(--cs-muted);
	font-size:16px;
	line-height:1.4;
	text-decoration:none;
	transition:color .2s ease,border-color .2s ease;
}
.cx-cs__toc a:hover,
.cx-cs__toc a.is-current{color:var(--cs-primary);border-left-color:var(--cs-primary);}


.cx-cs__share::before {
    content: "";
    position: absolute;
    top: -50%;
    right: 30px;
    width: 300px;
    height: 228px;
    background: rgb(255 255 255 / 9%);
    border-radius: 50%;
    pointer-events: none;
    rotate: 314deg;
}

.cx-cs__share{
	margin-top:24px;
	padding:16px;
	border-radius:12px;
	background:var(--cs-primary);
	color:#fff;
	position:relative;
	overflow: hidden;
}
.cx-cs__share span{display:block;font-size:13px;font-weight:500;margin-bottom:10px;}
.cx-cs__share a svg{ width:24px; height:24px; display:block; }

.cx-cs__share a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	margin-right:8px;
	border-radius:6px;
	background:#fff;
	color:var(--cs-primary);
	font-size:12px;
	font-weight:600;
	text-decoration:none;
}
.cx-cs__share a:hover{background:rgba(255,255,255,.3);color:#fff;}

/* ---------------------------------------------------------- stat bar */
.cx-cs__statbar{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
	gap:12px;
	padding:22px 26px;
	border-radius:14px;
	background:var(--cs-primary);
}
.cx-cs__stat-v{
	display:block;
	color:var(--cs-lime);
	font-size:24px;
	font-weight:600;
	line-height:1.2;
}
.cx-cs__stat-l{display:block;color:#fff;font-size:13px;margin-top:2px;}

/* ---------------------------------------------------------- sections */
.cx-cs__section{padding-top:48px;scroll-margin-top:110px;}
.cx-cs__h2{
	margin:14px 0 0;
	font-size:clamp(24px, 2.7vw, 48px);
	font-weight:500;
	line-height:1.25;
	letter-spacing:-.4px;
}
.cx-cs__p{
	margin:14px 0 0;
	color:var(--cs-muted);
	font-size:15px;
	line-height:1.7;
}

.cx-cs__ticks{margin:18px 0 0;padding:0;list-style:none;}
.cx-cs__ticks li{
	position:relative;
	padding-left:30px;
	margin-bottom:12px;
	font-size:14px;
	line-height:1.5;
}
.cx-cs__ticks li::before{
	content:"";
	position:absolute;
	left:0;
	top:.1em;
	width:18px;
	height:18px;
	border-radius:50%;
	background:var(--cs-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.cx-cs__shots{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:16px;
	margin-top:24px;
}
.cx-cs .cx-cs__shot{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	aspect-ratio:4/3;
	border-radius:12px;
}

/* --------------------------------------------------------- testimonial */
.cx-cs__quote{
	display:grid;
	grid-template-columns:1fr 1fr;
	margin-top:48px;
	border-radius:18px;
	overflow:hidden;
	background:var(--cs-primary);
}
.cx-cs__quote-media{position:relative;min-height:260px;}
.cx-cs .cx-cs__quote-img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.cx-cs__quote-body{
	padding:34px;
	display:flex;
	flex-direction:column;
	gap:4px;
	background:linear-gradient(135deg,#2B36F0 0%,#133FF1 45%,#3B4BFF 100%);
}
.cx-cs__quote-logo{
	display:inline-flex;
	align-self:flex-start;
	padding:8px 14px;
	margin-bottom:14px;
	border-radius:100px;
	background:#fff;
}
.cx-cs .cx-cs__quote-logo img{display:block;height:18px;width:auto;object-fit:contain;}
.cx-cs__quote-name{color:#fff;font-size:15px;font-weight:600;}
.cx-cs__quote-role{color:rgba(255,255,255,.72);font-size:12px;}
/* the design pairs them two by two, not in one row */
.cx-cs__quote-stats{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:24px 18px;
	margin-top:26px;
}
.cx-cs__quote-stats .cx-cs__stat-v{font-size:26px;}

/* -------------------------------------------------------------- close */
.cx-cs__close{padding-top:48px;}
.cx-cs__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.cx-cs__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:13px 24px;
	border:1px solid transparent;
	border-radius:100px;
	font-size:14px;
	font-weight:500;
	text-decoration:none;
	transition:background-color .2s ease,color .2s ease;
}
.cx-cs__btn.is-primary{background:var(--cs-primary);color:#fff;}
.cx-cs__btn.is-primary:hover{background:#0F32C4;color:#fff;}
.cx-cs__btn.is-secondary{background:#fff;color:var(--cs-ink);border-color:#D5D9EB;}
.cx-cs__btn.is-secondary:hover{background:#F7F8FC;color:var(--cs-ink);}
.cx-cs__btn.is-small{padding: 16px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 80%;}
.cx-cs__note{margin:12px 0 0;color:var(--cs-muted);font-size:12px;}

/* ------------------------------------------------------------- brands */
.cx-cs__brands{padding-block:56px;}
.cx-cs__logos{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:28px 44px;
	margin-top:28px;
}
.cx-cs .cx-cs__logo img{
	display:block;
	height:30px;
	width:auto;
	object-fit:contain;
	filter:grayscale(1);
	opacity:.75;
	transition:filter .2s ease,opacity .2s ease;
}
.cx-cs .cx-cs__logo img:hover{filter:none;opacity:1;}

/* -------------------------------------------------------------- cards */
.cx-cs__more{padding-block:56px 80px;}
.cx-cs__archive-body{padding-block:48px 80px;}
.cx-cs__accent{color:var(--cs-primary);}

.cx-cs__cards{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	gap:32px;
	margin-top:32px;
}

/*
 * The related strip queries three studies, so it gets three fixed tracks -
 * auto-fill was opening a fourth empty column on a wide screen. The archive
 * below keeps auto-fill, because it can hold any number of cards.
 */
.cx-cs__more .cx-cs__cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

@media (max-width:900px){
	.cx-cs__more .cx-cs__cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:600px){
	.cx-cs__more .cx-cs__cards{ grid-template-columns:1fr; }
}


.cx-cs__card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.cx-cs__card-media{display:block;width:100%;border-radius:12px;overflow:hidden;}
.cx-cs .cx-cs__card-media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	aspect-ratio:4/3;
	transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.cx-cs__card-media:hover img{transform:scale(1.04);}
.cx-cs__card-title{margin:0;font-size:16px;font-weight:500;line-height:1.45;}
.cx-cs__card-title a{color:var(--cs-ink);text-decoration:none;}
.cx-cs__card-title a:hover{color:var(--cs-primary);}
.cx-cs__card-excerpt{margin:0;color:var(--cs-muted);font-size:13px;line-height:1.6;}

/* --------------------------------------------------------- responsive */
@media (max-width:1024px){
	.cx-cs__hero-grid{grid-template-columns:1fr;gap:32px;}
	.cx-cs__body{grid-template-columns:1fr;gap:32px;}
	.cx-cs__side{position:static;}
	.cx-cs__toc{display:none;}
}
@media (max-width:767px){
	.cx-cs__hero{padding-block:40px 48px;}
	.cx-cs__quote{grid-template-columns:1fr;}
	.cx-cs__quote-media{min-height:220px;}
	.cx-cs__statbar{padding:18px;}
	.cx-cs__quote-stats{gap:14px;}
}
@media (prefers-reduced-motion:reduce){
	.cx-cs *{transition:none !important;}
}

/* =====================================================================
   Block editor content
   The body of a study is written with core blocks, so these map the block
   classes onto the same look the rest of the page uses. The pattern library
   inserts the class names below.
   ===================================================================== */

/*
 * A grid item's automatic minimum size is its content's min-content width, so
 * a wide or unshrinkable child - a slider, a wide table - stretches the column
 * and scrolls the whole page sideways. Ordinary prose never hit this.
 */
.cx-cs__content{min-width:0;}

.cx-cs__content > *{margin-block:0;}
.cx-cs__content > * + *{margin-top:20px;}


.cx-badge-wrap {
    padding-top: 30px;
}
.cx-cs__content h2{
	
	font-size:clamp(24px, 2.6vw, 38px);
	font-weight:500;
	line-height:1.25;
	letter-spacing:-.4px;
	scroll-margin-top:110px;
}
.cx-cs__content h3{font-size:20px;font-weight:600;}
.cx-cs__content p{color:var(--cs-muted);font-size:15px;line-height:1.7;}
.cx-cs__content a{color:var(--cs-primary);}
.cx-cs .cx-cs__content img{border-radius:12px;height:auto;}

/* badge / eyebrow */
.cx-cs__content p.cx-eyebrow{
	display:inline-block;
	margin-top:44px;
	padding:6px 15px;
	border:1px solid #D5D9EB;
	border-radius:30px;
	background:#E7F6FF;
	color:var(--cs-primary);
	font-size:14px;
	font-weight:500;
	line-height:1.2;
	letter-spacing:.6px;
	text-transform:uppercase;
}

/* stat bar */
.cx-cs__content .cx-statbar{
	gap:12px;
	margin-top:28px;
	padding:22px 26px;
	border-radius:14px;
	background:var(--cs-primary);
}
.cx-cs__content .cx-statbar .wp-block-column{flex-basis:0;flex-grow:1;}
.cx-cs__content p.cx-stat-v{
	margin:0;
	color:var(--cs-lime);
	font-size:24px;
	font-weight:600;
	line-height:1.2;
}
.cx-cs__content p.cx-stat-l{margin:2px 0 0;color:#fff;font-size:13px;}

/* checklist */
.cx-cs__content ul.cx-ticks{margin-top:18px;padding:0;list-style:none;}
.cx-cs__content ul.cx-ticks li{
	position:relative;
	padding-left:32px;
	margin-bottom:14px;
	color:#1A1A1A;
	font-size:16px;
	line-height:1.5;
}
/* a filled circle-check, matching the icon the suite bullet lists use */
.cx-cs__content ul.cx-ticks li::before{
	content:"";
	position:absolute;
	left:0;
	top:.15em;
	width:20px;
	height:20px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23133FF1' d='M256 8a248 248 0 1 0 0 496 248 248 0 0 0 0-496zm140 172L228 348a24 24 0 0 1-34 0l-78-78a24 24 0 0 1 34-34l61 61 151-151a24 24 0 0 1 34 34z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* two-up images */
.cx-cs__content .cx-shots{gap:16px;margin-top:24px;}
.cx-cs .cx-cs__content .cx-shots img{width:100%;object-fit:cover;aspect-ratio:4/3;}

/* testimonial card */
.cx-cs__content .cx-quotecard{
	margin-top:44px;
	border-radius:18px;
	overflow:hidden;
	grid-template-columns:1fr 1fr;
}
.cx-cs .cx-cs__content .cx-quotecard .wp-block-media-text__media img{
	height:100%;
	object-fit:cover;
	border-radius:0;
}
.cx-cs__content .cx-quotecard .wp-block-media-text__content{
	padding:34px;
	background:linear-gradient(135deg,#2B36F0 0%,#133FF1 45%,#3B4BFF 100%);
}
.cx-cs__content p.cx-quote-name{margin:0;color:#fff;font-size:15px;font-weight:600;}
.cx-cs__content p.cx-quote-role{margin:2px 0 0;color:rgba(255,255,255,.72);font-size:12px;}
.cx-cs__content .cx-quotecard .wp-block-columns{margin-top:24px;gap:24px 18px;}
.cx-cs__content .cx-quotecard p.cx-stat-v{font-size:26px;}

/* closing block */
.cx-cs__content .wp-block-buttons{margin-top:24px;gap:12px;}
.cx-cs__content .wp-block-button__link{
	padding:16px 24px;
	border-radius:100px;
	font-size:14px;
	font-weight:500;
	line-height:80%;
}
.cx-cs__content .cx-btn-primary .wp-block-button__link{background:var(--cs-primary);color:#fff;}
.cx-cs__content .cx-btn-secondary .wp-block-button__link{background:#fff;color:var(--cs-ink);border:1px solid #D5D9EB;}
.cx-cs__content p.cx-note{margin-top:12px;color:var(--cs-muted);font-size:12px;}

@media (max-width:767px){
	.cx-cs__content .cx-quotecard{grid-template-columns:1fr;}
	.cx-cs__content .cx-statbar{padding:18px;}
}

/*
 * Core lays a gallery out with flex and percentage widths, which leaves ragged
 * rows and odd sizes once the column is narrow. A grid keeps every tile equal
 * and lets the count drop cleanly at each breakpoint. The column count still
 * comes from the block's own Columns setting, through the columns-N class it
 * already writes.
 */
.cx-cs__content .wp-block-gallery{
	display:grid;
	grid-template-columns:repeat(var(--cs-gal, 3), minmax(0, 1fr));
	gap:var(--cs-gal-gap, 16px);
	margin-top:24px;
}

.cx-cs__content .wp-block-gallery.columns-1{ --cs-gal:1; }
.cx-cs__content .wp-block-gallery.columns-2{ --cs-gal:2; }
.cx-cs__content .wp-block-gallery.columns-3{ --cs-gal:3; }
.cx-cs__content .wp-block-gallery.columns-4{ --cs-gal:4; }
.cx-cs__content .wp-block-gallery.columns-5{ --cs-gal:5; }
.cx-cs__content .wp-block-gallery.columns-6{ --cs-gal:6; }

/* core sizes each figure inline, so those have to be handed back to the grid */
.cx-cs__content .wp-block-gallery .wp-block-image{
	width:auto !important;
	margin:0 !important;
	flex:none !important;
}

.cx-cs__content .wp-block-gallery .wp-block-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:12px;
}

/* a caption should not be stretched by object-fit */
.cx-cs__content .wp-block-gallery figcaption{
	position:static;
	margin-top:8px;
	padding:0;
	background:none;
	color:var(--cs-muted);
	font-size:13px;
}

@media (max-width:900px){
	.cx-cs__content .wp-block-gallery{ grid-template-columns:repeat(min(var(--cs-gal, 3), 3), minmax(0, 1fr)); }
}

@media (max-width:600px){
	.cx-cs__content .wp-block-gallery{ grid-template-columns:repeat(min(var(--cs-gal, 3), 2), minmax(0, 1fr)); gap:12px; }
}

/*
 * The archive sits on three columns too. auto-fill was opening a fourth track
 * on a wide screen, which left the cards bunched to one side whenever there
 * were fewer than four of them.
 */
.cx-cs__archive-body .cx-cs__cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

@media (max-width:900px){
	.cx-cs__archive-body .cx-cs__cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:600px){
	.cx-cs__archive-body .cx-cs__cards{ grid-template-columns:1fr; }
}

/* a long badge should still read as a pill, not a paragraph in a pill */
.cx-cs__card .cx-cs__eyebrow{ max-width:100%; }

/* pagination, for when there are enough studies to need it */
.cx-cs__archive-body .navigation.pagination{ margin-top:48px; }

.cx-cs__archive-body .nav-links{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:8px;
}

.cx-cs__archive-body .nav-links .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 12px;
	border:1px solid var(--cs-line);
	border-radius:100px;
	background:#fff;
	color:var(--cs-ink);
	font-size:14px;
	text-decoration:none;
	transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}

.cx-cs__archive-body .nav-links .page-numbers:hover{ border-color:var(--cs-primary); color:var(--cs-primary); }
.cx-cs__archive-body .nav-links .page-numbers.current{ background:var(--cs-primary); border-color:var(--cs-primary); color:#fff; }
.cx-cs__archive-body .nav-links .page-numbers.dots{ border-color:transparent; }

/* ---------------------------------------- the featured story on the archive */

.cx-cs__featured{
	display:grid;
	grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
	gap:48px;
	align-items:end;
	margin-top:100px;
}

.cx-cs__featured-media{
	position:relative;
	border-radius:16px;
	overflow:hidden;
	aspect-ratio:4 / 3;
	background:rgba(0,0,0,.06);
}

.cx-cs .cx-cs__featured-media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:0;
}

/* the two things that sit on top of the photo */
.cx-cs__featured-flag{ position:absolute; top:16px; left:16px; }

.cx-cs__featured-stat{
	position:absolute;
	left:16px;
	bottom:16px;
	display:inline-flex;
	align-items:center;
	gap:8px;
	max-width:calc(100% - 32px);
	padding:7px 12px;
	border-radius:100px;
	background:#fff;
	box-shadow:0 6px 18px rgba(16,24,40,.12);
	    border: 1px solid #D5D9EB;
}

.cx-cs__featured-stat strong{ color:var(--cs-primary); font-size:20px; font-weight:500; line-height: 1.2; }
.cx-cs__featured-stat span{ color:var(--cs-ink); font-size:14px; line-height: 1.4;}

.cx-cs__featured-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-bottom: 30px;}

.cx-cs__featured-logo{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 18px;
	border:1px solid var(--cs-line);
	border-radius:100px;
	background:#fff;
}

.cx-cs .cx-cs__featured-logo img{ display:block; height:20px; width:auto; max-width:140px; object-fit:contain; border-radius:0; }

.cx-cs__featured-quote{
	margin:0;
	padding:0;
	border:0;
	color:var(--cs-ink);
	font-size:24px;
	font-weight:500;
	font-style:normal;
	line-height:1.4;
	quotes:none;
}
.cx-cs__featured-quote::before,.cx-cs__featured-quote::after{ content:none; }

.cx-cs__featured-by{ display:flex; align-items:center; gap:12px; }
.cx-cs__featured-who{ display:flex; flex-direction:column; gap:2px; min-width:0; }

.cx-cs__featured-avatar{
	flex:0 0 auto;
	width:44px;
	height:44px;
	border-radius:50%;
	overflow:hidden;
	background:var(--cs-line);
}

.cx-cs .cx-cs__featured-avatar img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:50%;
}
.cx-cs__featured-name{ color:var(--cs-ink); font-size: 16px;
    line-height: 1.2;
    font-weight: 500; }
.cx-cs__featured-role{ color:var(--cs-muted); font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.25px; }

/* the heading that introduces the grid */
.cx-cs__grid-head{ text-align:center; margin-bottom:40px; }
.cx-cs__grid-head .cx-cs__h2{ margin-top:14px; }

@media (max-width:900px){
	.cx-cs__featured{ grid-template-columns:1fr; gap:28px; margin-top:36px; }
	.cx-cs__featured-quote{ font-size:18px; }
}

@media (max-width:600px){
	.cx-cs__featured-stat{ left:12px; bottom:12px; padding:8px 12px; }
	.cx-cs__featured-flag{ top:12px; left:12px; }
}