/* ==========================================================================
   CompleteGreet — Shoppable Videos page redesign
   Everything below the platform switcher. English page only.

   Scoping: every new rule lives under .cg-sv-* or body.cg-sv-page, so nothing
   here can leak into the other five use-case pages or the Danish version.

   Embedded CompleteGreet widgets are never styled from here — they render from
   the dashboard config. Where they appear we only give them more room.
   ========================================================================== */

:root{
	/* Brand */
	--cg-sv-orange:        #e48333;
	--cg-sv-orange-deep:   #b85a12;
	--cg-sv-orange-soft:   #fdf4ed;
	--cg-sv-blue:          #3b5dcd;
	--cg-sv-blue-deep:     #2f4fb8;
	--cg-sv-blue-soft:     #f3f5fd;

	/* Dark anchor band. Lifted a touch off pure black so the orange and blue
	   still read as colour rather than glowing out of a void. */
	--cg-sv-navy:          #0a1020;
	--cg-sv-navy-deep:     #050912;

	/* Light surfaces */
	--cg-sv-ink:           #101828;
	--cg-sv-ink-soft:      #475467;
	--cg-sv-line:          #e6e8ef;
	--cg-sv-bg:            #f7f8fb;

	--cg-sv-radius:        20px;
	--cg-sv-radius-sm:     14px;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

/* Every selector in this file is prefixed with #cg-use-case on purpose.
   The parent theme ships a blanket reset —
       #cg-use-case *:not(.cg-live-demo__card--embed *) { margin: 0; padding: 0 }
   — which is ID-specificity, so any plain class selector here would silently
   lose every margin and padding it sets. Matching the ID is the fix; !important
   everywhere would be the alternative and is far worse to maintain. */
#cg-use-case section.cg-sv{
	position: relative;
	/* Generous, uneven vertical rhythm. The old page used one identical gap
	   between every section, which is a large part of why it read as a list. */
	padding: clamp(72px, 9vw, 128px) 0;
	box-sizing: border-box;
}

#cg-use-case .cg-sv *,
#cg-use-case .cg-sv *::before,
#cg-use-case .cg-sv *::after{
	box-sizing: border-box;
}

#cg-use-case .cg-sv .cg-container{
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

#cg-use-case .cg-sv-icon{
	width: 100%;
	height: 100%;
	display: block;
}

/* Eyebrow label ---------------------------------------------------------- */

#cg-use-case .cg-sv-label{
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cg-sv-blue);
	margin: 0 0 18px;
}

#cg-use-case .cg-sv-label--orange{ color: var(--cg-sv-orange); }

/* Section headers -------------------------------------------------------- */

#cg-use-case .cg-sv-head{
	max-width: 760px;
	margin: 0 auto clamp(48px, 6vw, 76px);
	text-align: center;
}

#cg-use-case .cg-sv-head--left{
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

#cg-use-case .cg-sv-head h2{
	margin: 0 0 18px;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--cg-sv-ink);
}

/* The emphasised half of each headline carries the brand colour. One accent
   per headline — more than that and neither one means anything. */
#cg-use-case .cg-sv-head h2 em{
	font-style: normal;
	color: var(--cg-sv-orange);
}

#cg-use-case .cg-sv-head p{
	margin: 0;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.62;
	color: var(--cg-sv-ink-soft);
}

#cg-use-case .cg-sv-head--left p{ max-width: 56ch; }

#cg-use-case .cg-sv-head--dark h2{ color: #fff; }
#cg-use-case .cg-sv-head--dark p{ color: rgba(226, 232, 245, 0.72); }

/* Reveal on scroll -------------------------------------------------------

   Deliberately CSS-only, using scroll-driven animations. There is no
   JavaScript behind this: the site runs LiteSpeed with JS deferral, which
   rewrites theme scripts to type="litespeed/javascript" and holds them until
   the visitor interacts. A JS-gated reveal would therefore leave the whole
   section blank on load — the content must never depend on a script running.

   Browsers without animation-timeline (Safari, Firefox) simply get the
   finished state, which is the correct fallback.
   -------------------------------------------------------------------------- */

@keyframes cg-sv-rise{
	from{ opacity: 0; transform: translateY(20px); }
	to{ opacity: 1; transform: none; }
}

@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference) {
		#cg-use-case .cg-sv-reveal{
			animation: cg-sv-rise linear both;
			animation-timeline: view();
			/* Start as the block enters the viewport, finish well before the
			   middle, so nothing is still fading while it is being read. */
			animation-range: entry 5% cover 26%;
		}

		/* Per-item stagger inside a revealed block. */
		#cg-use-case .cg-sv-fix li,
	#cg-use-case .cg-sv-friction li,
	#cg-use-case .cg-sv-kit__list li,
	#cg-use-case .cg-sv-perf__facts li,
	#cg-use-case .cg-sv-stat{
			animation: cg-sv-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
	}
}


/* ==========================================================================
   1. THE GAP — light CompleteGreet brand band
   ========================================================================== */

#cg-use-case .cg-sv-gap{
	background: #f6f8ff;
	color: var(--cg-sv-ink);
	overflow: hidden;
	border-top: 4px solid var(--cg-sv-blue);
	border-bottom: 1px solid #e3e8f8;
	/* Full-bleed regardless of the theme's section padding. */
	margin: 0;
}

/* Retained in the markup for compatibility, but the new treatment is flat. */
#cg-use-case .cg-sv-gap__glow{
	display: none;
}

#cg-use-case .cg-sv-gap__grid{
	display: grid;
	/* Deliberately asymmetric: the fix gets more room than the problem. */
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

#cg-use-case .cg-sv-col__tag{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	margin: 0 0 26px;
	background: var(--cg-sv-orange);
	color: #fff;
}

#cg-use-case .cg-sv-col__tag--muted{
	background: rgba(59, 93, 205, 0.08);
	color: var(--cg-sv-blue-deep);
	border: 1px solid rgba(59, 93, 205, 0.16);
}

/* The problem list — unboxed, on the brand wash, with a vertical rail. */
#cg-use-case .cg-sv-friction{
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
	position: relative;
}

#cg-use-case .cg-sv-friction::before{
	content: "";
	position: absolute;
	left: 21px;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: rgba(59, 93, 205, 0.24);
}

#cg-use-case .cg-sv-friction li{
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 18px;
	padding: 0 0 34px;
}

#cg-use-case .cg-sv-friction li:last-child{ padding-bottom: 0; }

#cg-use-case .cg-sv-friction__num{
	position: relative;
	z-index: 1;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(59, 93, 205, 0.20);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cg-sv-blue);
	font-variant-numeric: tabular-nums;
}

#cg-use-case .cg-sv-friction h3{
	margin: 8px 0 7px;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.32;
	font-weight: 700;
	color: var(--cg-sv-ink);
}

#cg-use-case .cg-sv-friction p{
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--cg-sv-ink-soft);
}

/* The fix — the raised white surface on the brand band, so the eye lands here. */
#cg-use-case .cg-sv-col--after{ position: relative; }

#cg-use-case .cg-sv-fix{
	list-style: none;
	margin: 0;
	padding: clamp(24px, 3vw, 38px);
	border-radius: var(--cg-sv-radius);
	background: #fff;
	border: 1px solid rgba(59, 93, 205, 0.15);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 28px 70px -28px rgba(59, 93, 205, 0.28),
		0 4px 14px -8px rgba(16, 24, 40, 0.16);
}

#cg-use-case .cg-sv-fix li{
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid var(--cg-sv-line);
}

#cg-use-case .cg-sv-fix li:first-child{
	padding-top: 0;
	border-top: 0;
}

#cg-use-case .cg-sv-fix li:last-child{ padding-bottom: 0; }

#cg-use-case .cg-sv-fix__mark{
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 50%;
	background: var(--cg-sv-orange);
	color: #fff;
	flex: none;
	margin-top: 1px;
}

#cg-use-case .cg-sv-fix h3{
	margin: 2px 0 6px;
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.35;
	font-weight: 700;
	color: var(--cg-sv-ink);
}

#cg-use-case .cg-sv-fix p{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cg-sv-ink-soft);
}

/* Proof rail ------------------------------------------------------------- */

#cg-use-case .cg-sv-stats{
	margin-top: clamp(48px, 6vw, 82px);
	padding-top: clamp(34px, 4vw, 52px);
	border-top: 1px solid rgba(59, 93, 205, 0.14);
}

#cg-use-case .cg-sv-stats__row{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px);
	margin: 0;
}

#cg-use-case .cg-sv-stat{
	margin: 0;
	text-align: left;
}

#cg-use-case .cg-sv-stat__value{
	margin: 0 0 8px;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--cg-sv-blue);
	font-variant-numeric: tabular-nums;
}

#cg-use-case .cg-sv-stat:nth-child(even) .cg-sv-stat__value{
	color: var(--cg-sv-orange-deep);
}

#cg-use-case .cg-sv-stat__label{
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cg-sv-ink-soft);
}

#cg-use-case .cg-sv-stats__note{
	margin: clamp(24px, 3vw, 34px) 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #667085;
	max-width: 62ch;
}


/* ==========================================================================
   2. BUILD — setup steps + capability list
   ========================================================================== */

#cg-use-case .cg-sv-build{
	background: #fff;
}

/* Steps: no cards. Type on the background, one hairline rail across the top. */
#cg-use-case .cg-sv-steps{
	list-style: none;
	margin: 0 0 clamp(56px, 7vw, 92px);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
}

#cg-use-case .cg-sv-step{
	position: relative;
	padding-top: 30px;
	border-top: 1px solid var(--cg-sv-line);
}

/* The progress rail: each step's own top border tinted, so the eye reads
   left-to-right movement without a decorative connector graphic. */
#cg-use-case .cg-sv-step::before{
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 46px;
	height: 2px;
	background: var(--cg-sv-orange);
	border-radius: 2px;
}

#cg-use-case .cg-sv-step__num{
	display: block;
	font-size: clamp(40px, 4.6vw, 58px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--cg-sv-blue);
	opacity: 0.24;
	margin-bottom: 12px;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.35s ease, color 0.35s ease;
}

#cg-use-case .cg-sv-step:hover .cg-sv-step__num{
	opacity: 0.4;
	color: var(--cg-sv-orange);
}

#cg-use-case .cg-sv-step h3{
	margin: 0 0 10px;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--cg-sv-ink);
}

#cg-use-case .cg-sv-step p{
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--cg-sv-ink-soft);
}

/* Capability panel ------------------------------------------------------- */

#cg-use-case .cg-sv-kit{
	border-radius: clamp(20px, 2.4vw, 28px);
	background:
		linear-gradient(180deg, var(--cg-sv-blue-soft) 0%, #fbfcff 100%);
	border: 1px solid #e7ebf9;
	padding: clamp(30px, 4vw, 52px);
}

#cg-use-case .cg-sv-kit__head{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	margin-bottom: clamp(26px, 3vw, 38px);
	padding-bottom: clamp(22px, 2.6vw, 30px);
	border-bottom: 1px solid #e2e7f8;
}

#cg-use-case .cg-sv-kit__head h3{
	margin: 0;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--cg-sv-ink);
}

#cg-use-case .cg-sv-kit__head p{
	margin: 0;
	font-size: 15px;
	color: var(--cg-sv-ink-soft);
}

#cg-use-case .cg-sv-kit__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 32px) clamp(28px, 4vw, 56px);
}

#cg-use-case .cg-sv-kit__list li{
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

#cg-use-case .cg-sv-kit__icon{
	width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #e3e8f7;
	color: var(--cg-sv-blue);
	box-shadow: 0 2px 6px -2px rgba(16, 24, 40, 0.08);
	transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

#cg-use-case .cg-sv-kit__list li:hover .cg-sv-kit__icon{
	color: var(--cg-sv-orange);
	border-color: #f4d9c1;
	transform: translateY(-2px);
}

#cg-use-case .cg-sv-kit__list strong{
	display: block;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--cg-sv-ink);
	margin-bottom: 4px;
}

#cg-use-case .cg-sv-kit__list span{
	display: block;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cg-sv-ink-soft);
}

/* Actions ---------------------------------------------------------------- */

#cg-use-case .cg-sv-actions{
	margin-top: clamp(40px, 5vw, 60px);
	text-align: center;
}

#cg-use-case .cg-sv-actions__badge{ margin-top: 18px; }


/* ==========================================================================
   3. PERFORMANCE — single strip
   ========================================================================== */

#cg-use-case .cg-sv-perf{
	background: var(--cg-sv-bg);
	padding: clamp(56px, 6vw, 84px) 0;
}

#cg-use-case .cg-sv-perf__panel{
	display: grid;
	/* The three facts need the room, not the headline — at 1.18fr they wrap
	   after two words each. */
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: center;
	padding: clamp(28px, 3.4vw, 46px);
	border-radius: clamp(20px, 2.4vw, 28px);
	background: #fff;
	border: 1px solid var(--cg-sv-line);
	box-shadow: 0 18px 44px -30px rgba(16, 24, 40, 0.4);
}

#cg-use-case .cg-sv-perf__lede .cg-sv-label{ margin-bottom: 12px; }

#cg-use-case .cg-sv-perf__lede h2{
	margin: 0 0 10px;
	font-size: clamp(24px, 2.5vw, 32px);
	line-height: 1.18;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--cg-sv-ink);
}

#cg-use-case .cg-sv-perf__lede h2 em{
	font-style: normal;
	color: var(--cg-sv-orange);
}

#cg-use-case .cg-sv-perf__lede p{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cg-sv-ink-soft);
}

#cg-use-case .cg-sv-perf__facts{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
}

#cg-use-case .cg-sv-perf__facts li{
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

#cg-use-case .cg-sv-perf__icon{
	width: 36px;
	height: 36px;
	padding: 9px;
	border-radius: 10px;
	background: var(--cg-sv-orange-soft);
	color: var(--cg-sv-orange);
	border: 1px solid #f6ddc6;
}

#cg-use-case .cg-sv-perf__facts strong{
	display: block;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--cg-sv-ink);
	margin-bottom: 3px;
}

#cg-use-case .cg-sv-perf__facts span{
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cg-sv-ink-soft);
}


/* ==========================================================================
   Retained sections, retuned to match
   ========================================================================== */

/* --- Live demos: give the real widgets more room, never style their guts --- */
body.cg-sv-page #cg-use-case .cg-live-demos{
	background: #fff;
	padding-bottom: clamp(64px, 8vw, 104px);
}

body.cg-sv-page #cg-use-case .cg-live-demos .cg-container,
body.cg-sv-page #cg-use-case .cg-live-demos > div{
	max-width: 1240px;
}

/* --- FAQ: two columns, hairline dividers, no boxes ----------------------- */
body.cg-sv-page #cg-use-case .cg-faq-section{
	background: #fff;
}

body.cg-sv-page #cg-use-case .cg-faq-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 5vw, 64px);
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

body.cg-sv-page #cg-use-case .cg-faq-item{
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cg-sv-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

body.cg-sv-page #cg-use-case .cg-faq-item:nth-child(-n + 2){
	border-top: 1px solid var(--cg-sv-line) !important;
}

body.cg-sv-page #cg-use-case .cg-faq-question{
	padding: 22px 0 !important;
	font-size: 17px;
	gap: 20px;
}

/* The chevron is the only affordance left, so give it a little more presence. */
body.cg-sv-page #cg-use-case .cg-faq-question svg{
	transition: transform 0.3s ease;
}

/* --- Final CTA: closes on the same dark anchor as the gap band ----------- */
body.cg-sv-page #cg-use-case .cg-final-cta{
	position: relative;
	background:
		radial-gradient(900px 480px at 50% 0%, rgba(59, 93, 205, 0.28), transparent 64%),
		linear-gradient(180deg, var(--cg-sv-navy) 0%, var(--cg-sv-navy-deep) 100%);
	color: #fff;
	overflow: hidden;
}

body.cg-sv-page #cg-use-case .cg-final-cta h2{
	color: #fff !important;
}

body.cg-sv-page #cg-use-case .cg-final-cta p,
body.cg-sv-page #cg-use-case .cg-final-cta .cg-final-cta-sub{
	color: rgba(226, 232, 245, 0.72) !important;
}

/* Secondary button has to invert on the dark, or it disappears. */
body.cg-sv-page #cg-use-case .cg-final-cta .cg-btn-secondary{
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

body.cg-sv-page #cg-use-case .cg-final-cta .cg-btn-secondary:hover{
	background: rgba(255, 255, 255, 0.14) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}

/* The Google review badge ships dark grey text — invisible on the navy. */
body.cg-sv-page #cg-use-case .cg-final-cta .cg-grb-badge,
body.cg-sv-page #cg-use-case .cg-final-cta .cg-grb-link,
body.cg-sv-page #cg-use-case .cg-final-cta .cg-grb-wrap,
body.cg-sv-page #cg-use-case .cg-final-cta .cg-grb-badge * {
	color: rgba(233, 238, 248, 0.92) !important;
}

/* Keep the multi-colour Google wordmark as-is — it is a trademark asset. */
body.cg-sv-page #cg-use-case .cg-final-cta .cg-grb-badge svg {
	color: inherit;
}

/* Trust strip under the CTA (no credit card / GDPR / support). */
body.cg-sv-page #cg-use-case .cg-final-cta .cg-trust-row,
body.cg-sv-page #cg-use-case .cg-final-cta .cg-cta-trust,
body.cg-sv-page #cg-use-case .cg-final-cta small{
	color: rgba(226, 232, 245, 0.55) !important;
}

body.cg-sv-page #cg-use-case .cg-final-cta svg{
	color: rgba(226, 232, 245, 0.55);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px){
	#cg-use-case .cg-sv-steps{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(28px, 4vw, 44px);
	}

	#cg-use-case .cg-sv-perf__panel{
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

@media (max-width: 900px){
	#cg-use-case .cg-sv-gap__grid{
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	#cg-use-case .cg-sv-stats__row{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}

	#cg-use-case .cg-sv-kit__list{
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 680px){
	#cg-use-case section.cg-sv{ padding: 64px 0; }

	#cg-use-case .cg-sv .cg-container{ padding: 0 20px; }

	body.cg-sv-page #cg-use-case .cg-faq-grid{
		grid-template-columns: minmax(0, 1fr);
	}

	body.cg-sv-page #cg-use-case .cg-faq-item:nth-child(2){
		border-top: 0 !important;
	}

	#cg-use-case .cg-sv-head,
	#cg-use-case .cg-sv-head--left{
		text-align: left;
		margin-left: 0;
	}

	#cg-use-case .cg-sv-steps{
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* On one column the horizontal rail reads as clutter — switch each step to
	   a compact stacked row with the numeral inline. */
	#cg-use-case .cg-sv-step{
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 0 16px;
		padding: 24px 0;
		border-top: 1px solid var(--cg-sv-line);
	}

	#cg-use-case .cg-sv-step::before{ width: 30px; }

	#cg-use-case .cg-sv-step__num{
		grid-row: span 2;
		font-size: 34px;
		opacity: 0.22;
		margin: 0;
	}

	#cg-use-case .cg-sv-friction li{
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 14px;
	}

	#cg-use-case .cg-sv-friction::before{ left: 17px; }

	#cg-use-case .cg-sv-friction__num{
		width: 34px;
		height: 34px;
		font-size: 12px;
	}

	#cg-use-case .cg-sv-perf__facts{
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	#cg-use-case .cg-sv-actions .cg-btn-group{
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	#cg-use-case .cg-sv-actions .cg-btn{ width: 100%; }
}

/* Deliberately no single-column fallback for the stat rail: two short columns
   fit comfortably at 320px and stacking four of them adds ~200px of scroll for
   no gain in legibility. */