/* ==========================================================================
   Velocity by MedShift — Customers + FAQs page styles
   Scoped classes prefixed velp-cf-; reuses global vel-* where possible.

   Every size/colour below is measured off the Figma exports
   (Customers Page.png 1300x4254, FAQs Page.png 1300x3198, export scale 1.0):
   ink widths fitted against Montserrat, section bands read off pixel columns.
   ========================================================================== */

/* ---------- Customers hero ---------- */

.velp-cf-hero {
	background: #fff;
	padding: 108px 0 60px;
	text-align: center;
}

/* Export: 52px / 700 / -1% tracking (ink width 557px for "Users we're proud of.") */
.velp-cf-hero-title {
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.05;
	font-weight: 700;
	color: var(--vel-navy);
	letter-spacing: -0.01em;
	margin: 0 auto 12px;
}

/* Export: 18px / 400 on a 27px pitch, wrapping after "…commerce run" */
.velp-cf-hero-sub,
.velp-cf-hero-sub p,
.elementor-widget-text-editor.velp-cf-hero-sub p {
	font-size: 18px;
	line-height: 1.5;
	color: var(--vel-slate);
}

.velp-cf-hero-sub {
	max-width: 620px;
	margin: 0 auto 46px;
}

.velp-cf-strip-label,
.velp-cf-strip-label p,
.elementor-widget-text-editor.velp-cf-strip-label p {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vel-slate-light);
	/* the spacing to the wordmark row lives on the widget wrapper
	   (adapter-customers.css) — a margin here stacks on top of it */
	margin: 0;
}

/* Export: six wordmarks 40px tall on a uniform 43px gap. */
.velp-cf-logo-strip {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(22px, 3vw, 43px);
	flex-wrap: wrap;
}

/* Cutera runs off the right edge of every Figma frame, so no unclipped crop
   exists to import — it stays a text wordmark, sized and coloured (#303030,
   the export's logo ink) to sit with the five real logo images. */
.velp-cf-logo-strip span {
	font-size: 34px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #303030;
	line-height: 40px;
}

/* ---------- Industries: 4-up cards ---------- */

.velp-cf-cards-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	margin-top: 24px;
	text-align: left;
}

/* Export card: 242x296, 28px padding, 40px icon tile, h3 18/600, body 16/26. */
.velp-cf-cards-4 .vel-card { padding: 28px 28px 30px; }

.velp-cf-cards-4 .vel-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	margin-bottom: 12px;
}

.velp-cf-cards-4 .vel-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }

.velp-cf-cards-4 .vel-card p,
.velp-cf-cards-4 .vel-card .elementor-widget-text-editor p {
	font-size: 16px;
	line-height: 1.625;
	color: var(--vel-slate);
}

.velp-cf-accent { background: var(--vel-bg-tint, #eaf3fb); color: var(--vel-navy); }

/* The industries band is #F3F7FC in the export; the testimonial wall below it
   is white (the global .vel-testimonials default of soft is wrong here). */
.vel-main .vel-testimonials { background: #fff; }

/* Export section rhythm: 80px above the eyebrow, 80px below the cards. */
.vel-main .vel-features,
.vel-main .vel-testimonials { padding: 80px 0; }

/* ---------- Testimonials: 3-up grid ---------- */

.velp-cf-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 26px;
	row-gap: 46px;
	margin-top: 52px;
	text-align: left;
}

/* Cards stretch to their row height in the export — the short ones keep the
   row's height and the case-study link stays pinned to the card foot. */
.velp-cf-quotes .vel-quote-card {
	padding: 28px 28px 30px;
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 342px;
}

.velp-cf-quotes .vel-quote-mark { margin-bottom: 35px; }

/* Export quote body: 16px / 600 on a 20.5px pitch, navy. */
.velp-cf-quotes blockquote {
	font-size: 16px;
	line-height: 1.28;
	font-weight: 600;
	margin-bottom: 16px;
}

.velp-cf-quotes .vel-quote-card figcaption strong { font-size: 15px; font-weight: 700; line-height: 1.15; }

.velp-cf-quotes .vel-quote-card figcaption span {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vel-slate-light);
	line-height: 1.3;
}

/* "Read case study" — #2877B9 in the export, pinned to the card foot. */
.velp-cf-quote-link {
	margin-top: auto;
	padding-top: 26px;
	font-size: 15.5px;
	font-weight: 600;
	/* .vel-textlink pins navy with !important, so this has to shout back. */
	color: #2877b9 !important;
}

.velp-cf-quote-link svg { width: 14px; height: 14px; }

/* The case-study band carries the CTA card too — one continuous #F3F7FC
   section in the export, so the CTA section must not go back to white. */
.vel-main .vel-cta { background: var(--vel-bg-soft); padding: 85px 0 88px; }

/* Export CTA card: flat #0E2037, 20px radius, no decorative bars. */
.vel-main .vel-cta-card {
	background: var(--vel-navy);
	border-radius: 20px;
	padding: 56px 32px;
}

.vel-main .vel-cta-card .vel-cta-deco { display: none; }

.vel-main .vel-cta-card h2 { margin-bottom: 20px; }

.vel-main .vel-cta-card p,
.vel-main .vel-cta-card .elementor-widget-text-editor p {
	font-size: 18px;
	line-height: 1.5;
	color: var(--vel-blue-light, #d7efff);
	max-width: 460px;
	margin: 0 auto 17px;
}

.vel-main .vel-cta-card .vel-btn--light {
	background: var(--vel-blue-light, #d7efff);
	color: var(--vel-navy) !important;
}

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

.velp-cf-faqhero {
	background: var(--vel-bg-soft);
	padding: 90px 0 71px;
	text-align: center;
}

.velp-cf-faqhero-title {
	font-size: clamp(32px, 4.6vw, 52px);
	line-height: 1.05;
	font-weight: 700;
	color: var(--vel-navy);
	letter-spacing: -0.01em;
	margin: 0 auto 12px;
}

.velp-cf-faqhero-sub,
.velp-cf-faqhero-sub p,
.elementor-widget-text-editor.velp-cf-faqhero-sub p {
	font-size: 18px;
	line-height: 1.5;
	color: var(--vel-slate);
}

.velp-cf-faqhero-sub {
	max-width: 660px;
	margin: 0 auto;
}

/* Figma renders the whole sub-head as plain body copy — the "get in touch"
   link carries no colour or weight of its own. */
.velp-cf-faqhero-sub a {
	color: inherit !important;
	font-weight: inherit;
	text-decoration: none !important;
}

.velp-cf-faqhero-sub a:hover { text-decoration: underline !important; }

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

.velp-cf-faqs { padding: 54px 0 57px; }

/* Export FAQ column is 820px wide, not the global 860 - 2x24. */
.velp-cf-faqs .vel-container--narrow { max-width: 868px; }

.velp-cf-faqgroup {
	font-size: 22px;
	font-weight: 600;
	color: var(--vel-navy);
	letter-spacing: -0.01em;
	margin: 56px 0 6px;
}

.velp-cf-faqgroup:first-child { margin-top: 0; }

.velp-cf-faqs .vel-faq-list { margin-top: 10px; }

/* .vel-faq-item's own 4px block padding is on top of the summary padding. */
.velp-cf-faqs .vel-faq-item { padding: 0; }

/* Export accordion row is 73px tall: 18px/600 question on a 1.45 line box
   between 23px paddings. (An earlier client round set 500 — the export is 600.) */
.velp-cf-faqs .vel-faq-item summary {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	padding: 23px 0;
}


/* Export toggle is an 11x11 plus, not the global 16x16. */
.velp-cf-faqs .vel-faq-toggle { flex: 0 0 12px; height: 12px; }
.velp-cf-faqs .vel-faq-toggle::before { top: 5px; }
.velp-cf-faqs .vel-faq-toggle::after { left: 5px; }


/* ---------- Still have questions CTA ---------- */

.velp-cf-faqcta {
	background: var(--vel-navy);
	border-radius: 20px;
	box-shadow: var(--vel-shadow);
	padding: 48px 32px;
	text-align: center;
	margin-top: 112px;
}

.velp-cf-faqcta h2 {
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: #fff;
	margin: 0 0 19px;
}

.velp-cf-faqcta p,
.velp-cf-faqcta .elementor-widget-text-editor p {
	max-width: 460px;
	margin: 0 auto 17px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--vel-blue-light, #d7efff);
}

.velp-cf-faqcta .vel-btn--light {
	background: var(--vel-blue-light, #d7efff);
	color: var(--vel-navy) !important;
}

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

@media (max-width: 1100px) {
	.velp-cf-faqcta { margin-top: 84px; }
	.vel-main .vel-cta { padding-top: 56px; }
}

@media (max-width: 900px) {
	.velp-cf-cards-4 { grid-template-columns: repeat(2, 1fr); }
	.velp-cf-quotes { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; row-gap: 26px; }
	.velp-cf-hero { padding: 76px 0 52px; }
	.velp-cf-faqhero-title { font-size: clamp(32px, 6.4vw, 44px); }
}

@media (max-width: 560px) {
	.velp-cf-cards-4 { grid-template-columns: 1fr; max-width: 420px; margin: 24px auto 0; }
	.velp-cf-hero { padding: 60px 0 44px; }
	.velp-cf-hero-sub, .velp-cf-faqhero-sub { font-size: 17px; }
	.velp-cf-faqhero { padding: 56px 0 48px; }
	.velp-cf-faqcta { padding: 40px 22px; margin-top: 64px; }
	.velp-cf-faqcta h2 { font-size: 30px; }
	.vel-main .vel-cta { padding: 40px 0 64px; }
	.vel-main .vel-cta-card { padding: 44px 22px; }
	.velp-cf-faqs .vel-faq-item summary { font-size: 16.5px; padding: 18px 0; }
	.velp-cf-faqgroup { margin-top: 40px; }
	.velp-cf-logo-strip span { font-size: 24px; }
}