/* ==========================================================================
   Components — Wellfield .wf-* blocks. BEM naming, token-driven.
   ========================================================================== */

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

.wf-hero {
	/* Clean white ground per Figma (no line texture). */
	background-color: var(--wf-hero-bg);
	padding: 50px 0px 66px 0px;
}

.wf-hero__inner {
	/* Shares the standard site container so the hero's left edge aligns with
	   every section below it. Figma: text column 752px, graphic 279px, sitting
	   in the ~1160 content column. */
	max-width: var(--wf-container);
	margin-inline: auto;
	padding-inline: var(--wf-gutter);
	display: flex;
	align-items: center;
	gap: var(--wf-2xl);
}

.wf-hero__content {
	flex: 0 1 752px;
	min-width: 0;
}

.wf-hero__media {
	flex: 0 0 250px;
	margin-left: initial;
	text-align: right;
}

.wf-hero__media img {
	width: 90%;
	max-width: 250px;
	margin-inline-start: auto;
	object-fit: contain;
}

/* Eyebrow — Figma: Roboto Medium 20px, -2% tracking, uppercase, neutral grey. */
.wf-hero__label {
	display: block;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wf-grey-label);
	margin-bottom: var(--wf-sm);
}

/* Heading — Figma: Roboto Light 52px / 60px line-height, -2% tracking. */
.wf-hero__heading {
	font-size: 42px;
	font-weight: 300;
	line-height: 50px;
	letter-spacing: -0.02em;
	margin: 0 0 var(--wf-md);
}

.wf-hero__heading strong { font-weight: 700; }
.wf-hero__heading em { font-weight: 300; font-style: italic; }

/* Subhead — Roboto Regular 24px / 35px line-height, -2% tracking. */
.wf-hero__sub {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: -0.02em;
	color: var(--wf-secondary);
	margin: 0 0 var(--wf-lg);
	max-width: none;
}

.wf-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wf-sm);
	padding: 30px 0px 0px 0px;
}

.wf-hero__ctas--center { justify-content: center; }

/* Sub-page hero: full-width text column (no graphic). Heading inherits the
   canonical 52px/60 from .wf-hero__heading — Figma uses the same size on every
   subpage hero. Cap the text so long headings wrap ~Figma's 1100px, not the
   full container. */
.wf-hero--subpage .wf-hero__inner { display: block; max-width: var(--wf-container); }
.wf-hero--subpage .wf-hero__content { max-width: 1100px; }
.wf-hero--subpage .wf-hero__sub { max-width: 1100px; }
.wf-hero--centered { text-align: center; }
.wf-hero--centered .wf-hero__sub { margin-inline: auto; }
.wf-hero--dark { background-color: var(--wf-secondary); background-image: none; }
.wf-hero--dark .wf-hero__heading { color: var(--wf-white); -webkit-text-fill-color: var(--wf-white); }
.wf-hero--dark .wf-hero__sub { color: rgba(255, 255, 255, .7); }
.wf-hero--dark .wf-hero__label { color: rgba(255, 255, 255, .5); }

@media (max-width: 991px) {
	.wf-hero { padding-block: var(--wf-section); }
	.wf-hero__inner {
		flex-direction: column;   /* graphic sits below the copy on mobile */
		align-items: center;
		max-width: var(--wf-container);
		margin-inline: auto;
		padding-inline: var(--wf-gutter);
	}
	/* Stack and pin both columns to the container width. width:100% on the img
	   (not auto) stops it requesting its intrinsic size, which otherwise inflates
	   the flex cross-size and pushes the columns past the viewport. */
	.wf-hero__content,
	.wf-hero__media {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.wf-hero__media { margin-left: 0; text-align: center; }
	.wf-hero__media img { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; }
	.wf-hero__heading { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.2; }
	.wf-hero__sub { max-width: none; }
}

@media (max-width: 575px) {
	.wf-hero__heading { font-size: 2.4rem; }
	.wf-hero__sub { font-size: 16px; line-height: 24px; }
}

/* --------------------------------------------------------- Brand strips --- */

.wf-brands {
	background-color: var(--wf-brands-bg);
	padding: 53px 0px 66px 0px;
}

/* Eyebrow — Figma: Roboto Medium 20px, line-height 70px, -2% tracking,
   uppercase. Scoped to this section so other eyebrows keep their own style;
   colour (coral), uppercase + inline-block come from base .wf-section-label. */
.wf-brands .wf-section-label {
	font-weight: 500;
	font-size: 24px;
	line-height: 2.2;          /* extra gap above the heading (Figma) */
	letter-spacing: -0.02em;
	margin-bottom: var(--wf-xs);
}

/* Heading — Figma: Roboto Light 62px, line-height 40px, -2% tracking. Scales
   down on smaller viewports; the literal single-line 62/40 slot is applied at
   desktop width (where the line does not wrap, as in the design). */
.wf-brands__tagline {
	color: var(--wf-white);
	font-size: clamp(2rem, 4.6vw, 62px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: none;
	margin: 0 0 40px;
}

@media (min-width: 1200px) {
	.wf-brands__tagline { font-size: 42px; line-height: 25px; }
}

.wf-brands__list {
	display: flex;
	flex-direction: column;
	gap: var(--wf-md);
}

.wf-brand-strip {
	background: var(--wf-tint-coinmama);
	border: none;
	border-radius: 20px;
	padding: 36px 44px;
	display: grid;
	grid-template-columns: 220px 1fr auto;
	align-items: center;
	gap: var(--wf-lg);
}

.wf-brand-strip--coinmama { background: var(--wf-tint-coinmama); }
.wf-brand-strip--tradewind { background: var(--wf-tint-tradewind); }
.wf-brand-strip--defi { background: var(--wf-tint-defi); }

/* Figma: name Tenon 400 42px (Tenon→Roboto fallback via --wf-font-nav); tagline
   Roboto 500 22px #828486; desc Roboto 300 14/20; stat value 700 30px, label 14px. */
.wf-brand-strip__logo { max-height: 40px; width: auto; margin-bottom: 0.4rem; }
.wf-brand-strip__name { font-family: var(--wf-font-nav); font-size: 22px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.wf-brand-strip__tagline { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--wf-grey-label); margin: 0; }
.wf-brand-strip__desc { font-size: 14px; font-weight: 300; line-height: 18px; letter-spacing: -0.01em; color: var(--wf-secondary); margin: 0 0 0.5rem; }
.wf-brand-strip__subtitle { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; }
.wf-brand-strip__center { padding: 0 20px; }
/* Three stats on one row, content-sized and grouped to the LEFT (not stretched
   edge to edge). Each stat's value + label stays centred within its own box. */
.wf-brand-strip__stats { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 30px; margin: 0; padding: 0; list-style: none; }
.wf-brand-strip__stats li { flex: 0 0 auto; max-width: 100px; text-align: center; }
.wf-brand-strip__stat-value { font-size: 30px; font-weight: 700; line-height: 1.1; display: block; white-space: nowrap; }
.wf-brand-strip__stat-label { font-size: 14px; color: var(--wf-grey-label); }

@media (max-width: 991px) {
	.wf-brand-strip { grid-template-columns: 1fr; text-align: left; }
	.wf-brands__tagline { font-size: 30px; line-height: 1.2; }
	/* Desktop 70px line-height leaves a huge gap when the label wraps on mobile. */
	.wf-brands .wf-section-label { line-height: 28px; }
	/* On the narrow single-column card, let the stats wrap + left-align instead
	   of stretching edge-to-edge (the wide nowrap values would overflow). */
	.wf-brand-strip__stats { flex-wrap: wrap; justify-content: flex-start; gap: var(--wf-lg); }
}

/* ----------------------------------------------------------- Platforms --- */

.wf-platforms {
	background: var(--wf-secondary);
	color: var(--wf-white);
	padding-block: var(--wf-section);
}

.wf-platforms__header { text-align: center; margin-bottom: var(--wf-xl); }
.wf-platforms__label { font-size: 17px; font-weight: 500; letter-spacing: 0.04em; color: var(--wf-white); display: block; margin-bottom: var(--wf-sm); }
.wf-platforms__heading { font-weight: 400; line-height: 1.15; margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); }
.wf-platforms__heading-pre { color: var(--wf-sage); }
.wf-platforms__heading-main { font-size: 48px; }

.wf-platforms__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wf-md);
}

.wf-platforms__card {
	background: var(--wf-white);
	color: var(--wf-secondary);
	border-radius: var(--wf-radius-card);
	padding: 2rem 1.5rem;
	text-align: left;
	transition: transform var(--wf-transition), box-shadow var(--wf-transition);
}

.wf-platforms__card:hover { transform: translateY(-6px); box-shadow: var(--wf-shadow-card); }
.wf-platforms__card-icon { max-height: 80px; width: auto; margin-bottom: var(--wf-sm); }
.wf-platforms__card-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; }
.wf-platforms__card-text { font-size: 0.9rem; margin: 0; }

.wf-platforms__footer { text-align: center; margin-top: var(--wf-xl); }
.wf-platforms__footer a { color: rgba(255, 255, 255, .75); text-decoration: underline; }
.wf-platforms__footer a:hover { color: var(--wf-white); }

/* --------------------------------------------------------------- Story --- */

.wf-story { background: var(--wf-white); padding-block: var(--wf-section); }
.wf-story__inner { max-width: var(--wf-container-narrow); margin-inline: auto; padding-inline: var(--wf-gutter); text-align: center; }
.wf-story__heading { font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; margin: 0 0 var(--wf-md); }
.wf-story__text { font-size: 24px; line-height: 31px; color: var(--wf-secondary); text-align: left; }
.wf-story__text ul { padding-left: 1.25rem; }
.wf-story__text li::marker { color: var(--wf-primary); }

/* ---------------------------------------------------------- CTA banner --- */

.wf-defi-banner {
	/* Figma "1440/Hero/Text-Left": pure-black ground with a soft grey glow
	   (Blurred Shape #828486 @ 24%, 200px blur) toward the right — no line texture. */
	background-color: #000000;
	background-image: radial-gradient( 760px 760px at 82% 70%, rgba( 130, 132, 134, 0.22 ), rgba( 130, 132, 134, 0 ) 62% );
	background-repeat: no-repeat;
	color: var(--wf-white);
	padding: 62px 0px 66px 0px;
	text-align: center;
}

/* Body copy runs to 1125px in the design; allow the inner enough room. */
.wf-defi-banner__inner { max-width: 1190px; margin-inline: auto; padding-inline: var(--wf-gutter); }
.wf-defi-banner__icon {
	width: 80px; height: 80px; border-radius: 50%;
	margin: 0 auto var(--wf-md);
	background: var(--wf-gradient);
	display: flex; align-items: center; justify-content: center;
	padding: 2px;
}
.wf-defi-banner__icon-inner {
	width: 100%; height: 100%; border-radius: 50%;
	background: var(--wf-border-slate);
	display: flex; align-items: center; justify-content: center;
}
.wf-defi-banner__icon-inner img { width: 36px; height: 36px; }
/* Eyebrow — Figma: Roboto 500, 26/45, -2% tracking, sentence case (overrides
   the global uppercase .wf-section-label). Scoped to this banner. */
.wf-defi-banner .wf-section-label {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.73; /* 45px @ 26px */
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Heading — Figma: Roboto 500, 48/50, 0 tracking, sage -> coral gradient fill. */
.wf-defi-banner__heading {
	font-size: clamp(2rem, 5vw, 48px);
	font-weight: 500;
	line-height: 1.04; /* 50px @ 48px */
	letter-spacing: 0;
	max-width: 979px; /* Figma heading block width */
	margin: 0 auto var(--wf-md);
}
.wf-defi-banner .wf-gradient-text {
	/* Figma fill: linear-gradient(89.98deg, #B5C3C1 23.88%, #FF604C 76.61%).
	   Override background-image only so the text-clip props on .wf-gradient-text stay intact. */
	background-image: linear-gradient( 89.98deg, #b5c3c1 23.88%, #ff604c 76.61% );
}

/* Body — Figma: Roboto 400, 26/40, -2% tracking, full white, 1125px wide. */
.wf-defi-banner__text {
	color: var(--wf-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: -0.02em;
	margin: 0 auto var(--wf-lg);
	max-width: 1125px;
}

/* ------------------------------------------------------- Feature rows --- */

.wf-protocols { background: var(--wf-white); padding-block: var(--wf-section); }
.wf-protocols__list { display: flex; flex-direction: column; gap: var(--wf-2xl); }

.wf-protocol-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--wf-2xl);
}

.wf-protocol-item--reverse .wf-protocol-item__media { order: -1; }

.wf-protocol-item__badge {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wf-primary);
	background: rgba(255, 96, 76, .1);
	border-radius: var(--wf-radius-pill);
	padding: 0.3rem 0.8rem;
	margin-bottom: var(--wf-sm);
}

.wf-protocol-item__name { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 var(--wf-sm); }
.wf-protocol-item__desc { font-size: 0.95rem; line-height: 1.7; color: rgba(28, 32, 36, .7); margin: 0 0 var(--wf-md); }
.wf-protocol-item__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--wf-md); padding: 0; }
.wf-protocol-item__tags li { font-size: 0.8rem; font-weight: 600; color: var(--wf-primary); background: rgba(255, 96, 76, .08); border-radius: var(--wf-radius-pill); padding: 0.3rem 0.8rem; }
.wf-protocol-item__media img { border-radius: var(--wf-radius-card); box-shadow: var(--wf-shadow-image); }

@media (max-width: 991px) {
	.wf-protocol-item { grid-template-columns: 1fr; }
	.wf-protocol-item--reverse .wf-protocol-item__media { order: 0; }
}

/* ----------------------------------------------------------------- FAQ --- */

.wf-faq { background: var(--wf-white); padding: 40px 0px 45px 0px; }
.wf-faq__list { max-width: 820px; margin-inline: auto; }

/* Figma Q&A: coral divider lines between items. */
.wf-accordion { border-top: 1px solid var(--wf-primary); }
.wf-accordion__item { border-bottom: 1px solid var(--wf-primary); }

.wf-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: flex-start;   /* icon then question, no right-push */
	gap: var(--wf-sm);
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--wf-font-faq);   /* Figma FAQ: Lato 400 20/35 */
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--wf-secondary);
	padding: 1.1rem 0;
	transition: color var(--wf-transition);
}

/* Stay transparent + keep the slate text in every state — overrides
   GeneratePress's button:hover/:focus background AND color (both more specific
   than the base rule), which otherwise turned the question white-on-white once
   the button kept focus after a click. */
.wf-accordion__trigger:hover,
.wf-accordion__trigger:focus,
.wf-accordion__trigger:active { background: none; }
.wf-accordion__trigger:focus,
.wf-accordion__trigger:active { color: var(--wf-secondary); }
.wf-accordion__trigger:hover { color: var(--wf-primary); }
.wf-accordion__trigger:focus-visible { outline: 2px solid var(--wf-primary); outline-offset: 2px; border-radius: 2px; }

.wf-accordion__icon {
	order: -1;                 /* + toggle sits to the LEFT of the question */
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	color: var(--wf-primary);   /* coral +/× toggle per Figma */
	border: 2px solid currentColor;
	border-radius: 50%;
	transition: transform var(--wf-transition);
}
.wf-accordion__icon::before,
.wf-accordion__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.wf-accordion__icon::before { width: 8px; height: 2px; }
.wf-accordion__icon::after { width: 2px; height: 8px; }

.wf-accordion__trigger[aria-expanded="true"] .wf-accordion__icon { transform: rotate(45deg); }

.wf-accordion__panel { padding: 0 0 1.1rem calc(20px + var(--wf-sm)); }   /* align answer under the question (past the icon) */
.wf-accordion__panel p { font-family: var(--wf-font-faq); font-size: 20px; line-height: 28px; color: #5a5a5a; margin: 0; }
.wf-accordion__panel[hidden] { display: none; }

/* -------------------------------------------------------- Text content --- */

.wf-text-content { padding: 42px 0px 28px 0px; }
.wf-text-content__inner { max-width: var(--wf-container); margin-inline: auto; padding-inline: var(--wf-gutter); }
.wf-text-content--narrow .wf-text-content__inner { max-width: var(--wf-container-narrow); }
.wf-text-content--bg-light-grey { background: #f9f9f9; padding: 41px 0px 25px 0px !important; }   /* Figma light section ground */
.wf-text-content--bg-dark { background: var(--wf-dark-panel); color: var(--wf-white); padding: 40px 0px 40px 0px; }
/* Comparison table on a dark ground: light borders, white text, subtle header. */
.wf-text-content--bg-dark .wf-table-wrap th,
.wf-text-content--bg-dark .wf-table-wrap td { border-color: rgba(255, 255, 255, .25); color: var(--wf-white); }
.wf-text-content--bg-dark .wf-table-wrap thead th { background: transparent; }
.wf-text-content--bg-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--wf-white); }
.wf-text-content--bg-dark .wf-section-label { color: var(--wf-white); }   /* white eyebrow on dark ground */
.wf-text-content--bg-dark p { color: var(--wf-white); }
.wf-text-content__heading { font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; margin: 0 0 var(--wf-md); }
/* Text-section typography — matches the Figma "The technology" spec
   (Roboto, 20px, -2% tracking). Scoped to
   the text section so the shared .wf-section-label eyebrow used by other section
   types is left untouched. */
.wf-text-content .wf-section-label {
	font-family: var(--wf-font);
	font-size: 24px;          /* uniform eyebrow size */
	font-weight: 500;         /* Medium */
	line-height: 70px;        /* tall single-line band per Figma */
	letter-spacing: -0.02em;  /* -2% */
	/* uppercase + coral color + margin inherited from base .wf-section-label */
}
/* Tighten the 70px band on mobile (label may wrap; out-specifies the base rule). */
@media (max-width: 991px) {
	.wf-text-content .wf-section-label { line-height: 28px; }
}
.wf-text-content__body {
	font-size: 20px;          /* Body: 20/28, -2% tracking */
	font-weight: 400;
	line-height: 28px;
	letter-spacing: -0.02em;
}
.wf-text-content__body a {
	font-weight: 600;         /* SemiBold link, e.g. "How the technology works" */
	letter-spacing: -0.02em;
}
.wf-text-content__body--two-col { column-count: 2; column-gap: var(--wf-2xl); }

@media (max-width: 767px) {
	.wf-text-content__body--two-col { column-count: 1; }
}

/* Optional image beside the copy (two-column). Default: image on the right. */
.wf-text-content--has-media .wf-text-content__inner {
	display: flex;
	align-items: center;
	gap: var(--wf-2xl);
}
/* Copy column wider than the illustration, per Figma (~62 / 34). */
.wf-text-content--has-media .wf-text-content__col--text { flex: 1 1 62%; min-width: 0; }
.wf-text-content--has-media .wf-text-content__col--media { flex: 0 1 34%; min-width: 0; }
.wf-text-content--media-left .wf-text-content__col--media { order: -1; }
.wf-text-content__img {
	width: 100%;
	border-radius: var(--wf-radius-card);
	box-shadow: var(--wf-shadow-image);
}
/* On a light-grey ground the illustration reads as a white card (Figma). */
.wf-text-content--bg-light-grey .wf-text-content__img {
	box-sizing: border-box;
	background: var(--wf-white);
	padding: var(--wf-md);
	border-radius: 24px;
}

@media (max-width: 767px) {
	.wf-text-content--has-media .wf-text-content__inner { flex-direction: column; align-items: stretch; }
	.wf-text-content--media-left .wf-text-content__col--media { order: 0; }
}

/* --------------------------------------------------- Comparison table --- */

.wf-table-wrap { overflow-x: auto; }
/* Mobile-only per-platform cards (see comparison.php); table shows on desktop. */
.wf-compare-cards { display: none; }
.wf-section .wp-block-table table,
.wf-table-wrap table {
	border-collapse: collapse;
	width: 100%;
	min-width: 640px;
}
.wf-section .wp-block-table th,
.wf-section .wp-block-table td,
.wf-table-wrap th,
.wf-table-wrap td {
	border: 1px solid rgba(0, 0, 0, .1);
	padding: 1rem 1.25rem;
	text-align: left;
	vertical-align: top;
	font-size: 18px;
	line-height: 1.45;
	letter-spacing: -0.02em;
}
.wf-section .wp-block-table thead th,
.wf-table-wrap thead th { background: var(--wf-light-bg); font-weight: 700; }
.wf-table-wrap tbody th { font-weight: 700; }

/* Optional full-width image below the intro (art-directed desktop/mobile via
   <picture> in comparison.php). Used e.g. when the table is toggled off in
   favour of a diagram. Fills the content column; height scales with the image. */
.wf-compare-media { margin: 40px 0 0; }
.wf-compare-media__img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------- Feature card grid --- */

.wf-features { padding: 42px 0px 66px 0px; background: var(--wf-white); }
.wf-features--light { background: var(--wf-light-bg); }
.wf-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wf-md);
	margin-top: var(--wf-lg);
}
.wf-features__card {
	background: var(--wf-white);
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: var(--wf-radius-card);
	padding: 2rem;
}
.wf-features--light .wf-features__card { background: var(--wf-white); }
.wf-features__badge {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wf-primary);
	background: rgba(255, 96, 76, .1);
	border-radius: var(--wf-radius-pill);
	padding: 0.3rem 0.8rem;
	margin-bottom: var(--wf-sm);
}
/* Figma: card title Roboto 700 26/40; description Roboto 400 22/35, -2%, #1c2024. */
.wf-features__name { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.wf-features__desc { font-size: 20px; font-weight: 400; line-height: 28px; letter-spacing: -0.02em; color: var(--wf-secondary); margin: 0; }

/* -------------------------------------------------------------- Connect --- */

.wf-connect { background: var(--wf-white); padding-block: 40px; }
/* Narrow columns spread across the row with a wide gap (Figma image 3). */
.wf-connect__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: space-between; gap: var(--wf-2xl); }
.wf-connect__card h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.wf-connect__card p { font-size: 0.95rem; line-height: 1.6; color: rgba(28, 32, 36, .8); margin: 0; }

@media (max-width: 767px) {
	.wf-connect__grid { grid-template-columns: 1fr; }
}

/* ============================================================ Page scopes --- */

/* Home — "The technology" (text section directly after the brand strips) uses
   tight 25px top/bottom padding instead of the default section rhythm, to close
   the gap above and below the copy. Sibling combinator targets only this text
   section, not the earlier "What Wellfield does" one. */
.wf-page-home .wf-brands + .wf-text-content { padding: 25px 0; }

/* Coinmama — "Coinmama at a glance" (text section right after the hero) sits on
   a #F9F9F9 ground. */
.wf-page-coinmama .wf-hero + .wf-text-content { background: #f9f9f9; }

/* Tradewind — "Tradewind Markets at a glance" sits on a #f5f5f5 ground; the
   "Built for institutions" features block flips from grey to white; its card
   titles are 24px. */
.wf-page-tradewind .wf-hero + .wf-text-content { background: #f5f5f5; }
.wf-page-tradewind .wf-features--light { background: var(--wf-white); }
.wf-page-tradewind .wf-features__name { font-size: 24px; }

/* Privacy Policy — dense legal copy reads better at a smaller body size than the
   26px marketing default; a proportional line-height replaces the inherited 40px
   (which is far too loose at 16px). Two-class selector out-specifies the desktop
   and mobile .wf-text-content__body rules, so this holds at every breakpoint. */
.wf-page-privacy-policy .wf-text-content__body { font-size: 16px; line-height: 1.6; }

/* Q&A — pull the FAQ list up under the hero (the standalone Q&A page has no
   section eyebrow, so the default rhythm leaves too big a gap), and give each
   question row more height. Scoped to this page only. */
.wf-page-q-a .wf-hero { padding-bottom: var(--wf-sm); }
.wf-page-q-a .wf-faq { padding-top: var(--wf-sm); }
.wf-page-q-a .wf-accordion__trigger { padding: 40.6px 0; }

/* ====================================================== Mobile (≤768px) --- */
/* Placed last so these win over the earlier 991px / 575px media blocks above. */
@media (max-width: 768px) {
	/* Hero — compact, smaller display type. */
	.wf-hero { padding-block: 10px; }
	.wf-hero__inner { gap: 10px; }
	.wf-hero__heading { font-size: 28px; line-height: 35px; letter-spacing: 0.02em; font-weight: 400; }
	.wf-hero__sub { font-size: 20px; line-height: 26px; letter-spacing: 0; }
	/* Stack the hero CTAs centred, both sized to the widest button; wider buttons,
	   larger gap between them and more room before the next section. */
	.wf-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
		gap: 25px;
		margin-bottom: 40px;
	}
	.wf-hero__ctas .wf-btn { padding: 18px 75px; }

	/* "What Wellfield does" (text + media) — tighter gap between copy and image. */
	.wf-text-content--has-media .wf-text-content__inner { gap: 10px; }

	/* Text body (e.g. "The technology"). */
	.wf-text-content__body { font-size: 20px; font-weight: 400; line-height: 26px; letter-spacing: 0; }

	/* Brand strips. Tighter card padding gives the full-width CTA enough room to
	   keep "Explore the institutional business" on one line. */
	.wf-brand-strip { padding: 30px 16px; }
	.wf-brand-strip__name { font-size: 24px; font-weight: 500; line-height: 39px; letter-spacing: -0.02em; margin: -2%; }
	.wf-brand-strip__tagline { margin: 0 0 0 -4px; }
	.wf-brand-strip__stats { gap: 23px; min-width: 250px; }
	.wf-brand-strip__stat-value { font-size: 20px; }
	.wf-brand-strip__stat-label { font-size: 11px; color: #000; }
	.wf-brand-strip__cta .wf-btn { width: 100%; }

	/* Buttons. */
	.wf-btn { font-size: 16px; padding: 18px 26px; }

	/* CTA banner heading ("The future of finance is on-chain"). */
	.wf-defi-banner__heading { font-size: 28px; font-weight: 500; line-height: 35px; }

	/* Connect cards. */
	.wf-connect__card h3 { font-size: 32px; }
	.wf-connect__card p { font-size: 20px; line-height: 26px; margin: 0; }

	/* Comparison (technology page): swap the wide 3-column table for stacked
	   per-platform cards (Figma mobile). */
	.wf-text-content--bg-dark .wf-table-wrap { display: none; }
	.wf-compare-cards { display: block; }
	.wf-compare-card {
		border: 1px solid rgba(255, 255, 255, .3);
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: var(--wf-lg);
	}
	.wf-compare-card__title {
		margin: 0;
		padding: 14px 16px;
		text-align: center;
		font-size: 18px;
		font-weight: 700;
		color: var(--wf-white);
		border-bottom: 1px solid rgba(255, 255, 255, .3);
	}
	.wf-compare-card__list { margin: 0; }
	.wf-compare-card__row {
		padding: 14px 16px;
		text-align: center;
		color: var(--wf-white);
		font-size: 16px;
		line-height: 1.45;
		border-bottom: 1px solid rgba(255, 255, 255, .3);
	}
	.wf-compare-card__row:last-child { border-bottom: 0; }
	.wf-compare-card__row dt,
	.wf-compare-card__row dd { display: inline; margin: 0; }

	/* About page — "Wellfield organization" (dark) inline links a touch smaller. */
	.wf-page-about-us .wf-text-content--bg-dark .wf-text-content__body a { font-size: 20px; }

	/* About page — centre the "Leadership" links row (last section, last paragraph). */
	.wf-page-about-us .wf-text-content:last-of-type .wf-text-content__body p:last-child { text-align: center; }
}