/* ==========================================================================
   Pitcrew — Solution template block styles  (v2)
   Loaded after site-global-new.css / custom.css / custom-v1.css, so these win.
   Tokens mirror site-global-new.css (Poppins, #11DF99 gradient buttons).
   Everything scoped under .solution-template so nothing leaks site-wide.
   ========================================================================== */

.solution-template {
	--sol-green: #11df99;
	--sol-green-2: #2aedab;
	--sol-ink: #001300;
	--sol-paper: #fffdf5;
	--sol-line: rgba(0, 19, 0, 0.12);
	--sol-muted: #5b665c;
	--sol-radius: 24px;
	--sol-maxw: none;        /* match the Applications page: full width, gutter only */
	--sol-gutter: 50px;
	--sol-body: 20px;
	--sol-section-y: 56px;   /* tighter than before (was 100) */
	--pc-read: 940px;        /* blog article reading-column width */
	--pc-toc-w: 250px;       /* blog article TOC box width */

	font-family: "Poppins", sans-serif;
	color: var(--sol-ink);
}

/* Layout primitives ------------------------------------------------------- */
.solution-template .sol-container {
	width: 100%;
	max-width: var(--sol-maxw);
	margin: 0 auto;
	padding: 0 var(--sol-gutter);
}

.solution-template .sol-block { padding: var(--sol-section-y) 0; }
.solution-template .sol-section-head { margin-bottom: 32px; }

/* Typography -------------------------------------------------------------- */
.solution-template .sol-eyebrow {
	color: var(--sol-green);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.solution-template .sol-heading {
	font-size: 44px;
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 40px;
}

.solution-template .sol-prose {
	font-size: var(--sol-body);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0.2px;
}
.solution-template .sol-prose > :first-child { margin-top: 0; }
.solution-template .sol-prose > :last-child { margin-bottom: 0; }
.solution-template .sol-prose p { margin: 0 0 1.1em; }
.solution-template .sol-prose h2 { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 2.6em 0 0.8em; }
.solution-template .sol-prose h3 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 2.2em 0 0.7em; }
.solution-template .sol-prose ul,
.solution-template .sol-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.solution-template .sol-prose li { margin-bottom: 0.5em; line-height: 1.5; }
.solution-template .sol-prose ul { list-style: disc; }
.solution-template .sol-prose a { color: var(--sol-ink); text-decoration: underline; text-decoration-color: var(--sol-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.solution-template .sol-prose a:hover { color: var(--sol-green); }
.solution-template .sol-prose strong { font-weight: 600; }
.solution-template .sol-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.solution-template .sol-prose figure { margin: 1.6em 0; }
.solution-template .sol-prose figcaption { font-size: 15px; color: var(--sol-muted); margin-top: 8px; text-align: center; }
.solution-template .sol-prose blockquote { margin: 1.5em 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--sol-green); font-size: 24px; line-height: 1.4; font-weight: 300; }
.solution-template .sol-prose h4 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 1.9em 0 0.6em; }

/* Buttons — rely on the theme's .global-btn-nw / .transparent styling.
   We only handle layout (row + spacing). pitcrew_buttons() adds .transparent
   to secondary buttons, which the global CSS renders as the outline variant. */
.solution-template .sol-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

/* Outline (secondary) buttons sit on dark backgrounds in the hero / dark CTA —
   the global .global-btn-nw forces black text, so lift it to white here
   (and back to dark on hover, when the button fills with green). */
.solution-template .sol-hero--dark .sol-buttons a.transparent,
.solution-template .sol-hero--has-bg .sol-buttons a.transparent,
.solution-template .sol-cta-band--dark .sol-buttons a.transparent { color: #fff; }
.solution-template .sol-hero--dark .sol-buttons a.transparent:hover,
.solution-template .sol-hero--has-bg .sol-buttons a.transparent:hover,
.solution-template .sol-cta-band--dark .sol-buttons a.transparent:hover { color: #001300; }

/* Hero — full-bleed background, content stays aligned with the page container */
.solution-template .sol-hero { position: relative; padding: 110px 0; }
.solution-template .sol-hero--dark { color: #fff; }
.solution-template .sol-hero--dark .sol-hero-lead { color: rgba(255, 255, 255, 0.85); }

/* These layers break out of the theme's centred container to the viewport edges.
   left:50% + margin-left:-50vw + width:100vw spans the full screen regardless of
   how wide the wrapping container is. Content (.sol-container) is untouched, so it
   stays aligned with the blocks below. */
.solution-template .sol-hero--dark::before,
.solution-template .sol-hero-bg,
.solution-template .sol-hero--has-bg::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	z-index: 0;
}
.solution-template .sol-hero--dark::before { background: var(--sol-ink); }
.solution-template .sol-hero-bg { background-size: cover; background-position: center; }
.solution-template .sol-hero--has-bg { color: #fff; }
.solution-template .sol-hero--has-bg .sol-hero-lead { color: rgba(255, 255, 255, 0.9); }
.solution-template .sol-hero--has-bg::after { background: linear-gradient(180deg, rgba(0, 19, 0, 0.45) 0%, rgba(0, 19, 0, 0.8) 100%); }

.solution-template .sol-hero > .sol-container { position: relative; z-index: 2; }

.solution-template .sol-hero-inner { max-width: 880px; }
.solution-template .sol-hero-title { font-size: 64px; line-height: 1.06; font-weight: 700; margin: 0 0 24px; }
.solution-template .sol-hero-lead { font-size: 22px; font-weight: 300; line-height: 1.5; }

.solution-template .sol-hero-cards { display: flex; flex-wrap: wrap; gap: 1%; justify-content: space-between; margin-top: 48px; }
.solution-template .sol-card { width: 32.33%; height: 420px; display: flex; align-items: flex-end; padding: 30px; border-radius: var(--sol-radius); background-size: cover; background-position: 50% 50%; color: #fff; text-decoration: none; font-size: 24px; font-weight: 600; transition: transform 0.25s ease; }
.solution-template .sol-card:hover { transform: translateY(-6px); }

/* Rich text --------------------------------------------------------------- */
.solution-template .sol-rich-text--cols-2 .sol-prose { column-count: 2; column-gap: 48px; }
.solution-template .sol-rich-text--cols-2 .sol-prose > :first-child { margin-top: 0; }

/* Text + Media ------------------------------------------------------------ */
.solution-template .sol-text-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.solution-template .sol-text-media--img-left .sol-text-media-text { order: 2; }
.solution-template .sol-text-media--img-left .sol-text-media-img { order: 1; }
/* Locked frame so the image never crops awkwardly */
.solution-template .sol-text-media-img .sol-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: var(--sol-radius); display: block; }

/* Feature grid ------------------------------------------------------------ */
.solution-template .sol-grid { display: grid; gap: 36px 30px; }
.solution-template .sol-grid--2 { grid-template-columns: repeat(2, 1fr); }
.solution-template .sol-grid--3 { grid-template-columns: repeat(3, 1fr); }
.solution-template .sol-grid--4 { grid-template-columns: repeat(4, 1fr); }
.solution-template .sol-grid-icon { margin-bottom: 16px; }
.solution-template .sol-grid-icon .sol-icon { width: 56px; height: 56px; object-fit: contain; }
.solution-template .sol-grid-title { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0 0 10px; }

/* Process steps ----------------------------------------------------------- */
.solution-template .sol-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.solution-template .sol-step { display: flex; gap: 28px; align-items: flex-start; padding: 30px; border: 1px solid var(--sol-line); border-radius: var(--sol-radius); }
.solution-template .sol-step-num { font-size: 40px; font-weight: 700; color: var(--sol-green); line-height: 1; flex: 0 0 auto; }
.solution-template .sol-step-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; }

/* Stat callout ------------------------------------------------------------ */
.solution-template .sol-stat-callout { background: var(--sol-paper); border-radius: var(--sol-radius); }
.solution-template .sol-stat-num { font-variant-numeric: tabular-nums; }
.solution-template .sol-stats { display: grid; grid-template-columns: repeat(var(--sol-stat-count, 3), 1fr); gap: 24px; }
.solution-template .sol-stat { text-align: center; padding: 12px; }
.solution-template .sol-stat-num { display: block; font-size: 64px; font-weight: 700; line-height: 1; color: var(--sol-green); }
.solution-template .sol-stat-label { display: block; margin-top: 12px; font-size: 17px; font-weight: 300; line-height: 1.4; }

/* Table — minimal / editorial -------------------------------------------- */
.solution-template .sol-table-wrap { overflow-x: auto; background: #f6f7f7; border-radius: var(--sol-radius); padding: 10px 28px; }
.solution-template .sol-table { width: 100%; border-collapse: collapse; }
.solution-template .sol-table thead th {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--sol-ink);
	text-align: left;
	padding: 4px 24px 14px;
	border-bottom: 2px solid var(--sol-green);
	white-space: nowrap;
}
.solution-template .sol-table tbody th,
.solution-template .sol-table tbody td {
	padding: 18px 24px;
	text-align: left;
	vertical-align: top;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	border-bottom: 1px solid var(--sol-line);
}
.solution-template .sol-table--label-col tbody th { font-weight: 600; color: var(--sol-ink); width: 34%; }
.solution-template .sol-table tbody tr:last-child th,
.solution-template .sol-table tbody tr:last-child td { border-bottom: 0; }

/* Feature slider ---------------------------------------------------------- */
.solution-template .sol-slider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.solution-template .sol-slider-list { display: grid; gap: 16px; }
.solution-template .sol-slider-tab { text-align: left; width: 100%; padding: 26px 28px; border: 1px solid var(--sol-ink); border-radius: var(--sol-radius); background: transparent; cursor: pointer; transition: background 0.2s ease; font-family: inherit; }
.solution-template .sol-slider-tab.is-active { background: linear-gradient(90deg, var(--sol-green) 0%, var(--sol-green-2) 100%); border-color: transparent; }
.solution-template .sol-slider-tab-title { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.solution-template .sol-slider-tab-desc { display: block; margin-top: 8px; font-size: 17px; font-weight: 300; line-height: 1.5; }
.solution-template .sol-slider-media { position: relative; }
.solution-template .sol-slider-viewport { overflow: hidden; border-radius: var(--sol-radius); }
.solution-template .sol-slider-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.solution-template .sol-slider-slide { flex: 0 0 100%; min-width: 0; }
.solution-template .sol-slider-media .sol-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* CTA band ---------------------------------------------------------------- */
.solution-template .sol-cta-inner { text-align: center; padding: 64px 48px; border-radius: var(--sol-radius); }
.solution-template .sol-cta-band--mint .sol-cta-inner { background: linear-gradient(90deg, var(--sol-green) 0%, var(--sol-green-2) 100%); color: var(--sol-ink); }
.solution-template .sol-cta-band--dark .sol-cta-inner { background: var(--sol-ink); color: #fff; }
.solution-template .sol-cta-band--light .sol-cta-inner { background: var(--sol-paper); }
.solution-template .sol-cta-heading { font-size: 38px; font-weight: 700; line-height: 1.15; margin: 0 0 18px; }
.solution-template .sol-cta-inner .sol-buttons { justify-content: center; }

/* Mint CTA — dark buttons so they stand out against the green band */
.solution-template .sol-cta-band--mint .sol-buttons a.global-btn-nw { background: var(--sol-ink); border-color: var(--sol-ink); color: #fff; }
.solution-template .sol-cta-band--mint .sol-buttons a.global-btn-nw:hover { background: #fff; border-color: #fff; color: var(--sol-ink); }
.solution-template .sol-cta-band--mint .sol-buttons a.transparent { background: transparent !important; border: 1px solid var(--sol-ink) !important; color: var(--sol-ink) !important; }
.solution-template .sol-cta-band--mint .sol-buttons a.transparent:hover { background: var(--sol-ink) !important; color: #fff !important; }

/* FAQ accordion ----------------------------------------------------------- */
.solution-template .sol-faq-inner { max-width: 900px; }
.solution-template .sol-accordion { border-top: 1px solid var(--sol-line); }
.solution-template .sol-accordion-item { border-bottom: 1px solid var(--sol-line); }
.solution-template .sol-accordion-q { margin: 0; }
.solution-template .sol-accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: 21px; font-weight: 600; color: var(--sol-ink); font-family: inherit; }
.solution-template .sol-accordion-icon { position: relative; flex: 0 0 auto; width: 22px; height: 22px; }
.solution-template .sol-accordion-icon::before,
.solution-template .sol-accordion-icon::after { content: ""; position: absolute; background: var(--sol-green); transition: transform 0.2s ease, opacity 0.2s ease; }
.solution-template .sol-accordion-icon::before { top: 10px; left: 0; width: 22px; height: 2px; }
.solution-template .sol-accordion-icon::after { top: 0; left: 10px; width: 2px; height: 22px; }
.solution-template .sol-accordion-trigger[aria-expanded="true"] .sol-accordion-icon::after { opacity: 0; transform: rotate(90deg); }
.solution-template .sol-accordion-a { padding: 0 0 26px; }
.solution-template .sol-accordion-a[hidden] { display: none; }

/* Logos / Trusted by ------------------------------------------------------ */
.solution-template .sol-logos-label { text-align: center; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sol-ink); margin: 0 0 28px; }
.solution-template .sol-logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 56px; }
.solution-template .sol-logo { display: flex; align-items: center; }
.solution-template .sol-logo-img { max-height: 52px; width: auto; object-fit: contain; }

/* Single image block */
.solution-template .sol-image { margin: 0; }
.solution-template .sol-image-img { width: 100%; height: auto; border-radius: var(--sol-radius); display: block; }
.solution-template .sol-image-caption { margin-top: 12px; font-size: 15px; color: var(--sol-muted); }

/* Blog article ------------------------------------------------------------ */
.solution-template .pc-article-measure { max-width: 760px; margin: 0 auto; }
.solution-template .pc-article-head { padding: 64px 0 0; }
.solution-template .pc-article-cat { display: inline-block; color: var(--sol-green); font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 16px; }
.solution-template .pc-article-title { font-size: 46px; line-height: 1.1; font-weight: 700; margin: 0 0 18px; }
.solution-template .pc-article-byline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--sol-muted); font-size: 16px; font-weight: 300; }
.solution-template .pc-article-dot { color: var(--sol-green); }
/* Fixed-ratio frame so the global theme img rules can't stretch it tall */
.solution-template .pc-article-head-media { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--sol-radius); overflow: hidden; }
.solution-template .pc-article-featured-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

/* Split header: text left, image right, top-aligned */
.solution-template .pc-article-head--split .pc-article-head-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* No featured image: centred header */
.solution-template .pc-article-head:not(.pc-article-head--split) .pc-article-head-text { max-width: 760px; margin: 0 auto; text-align: center; }
.solution-template .pc-article-head:not(.pc-article-head--split) .pc-article-byline { justify-content: center; }

.solution-template .pc-article-body { padding: 40px 0; }
.solution-template .pc-article-body h2 { scroll-margin-top: 110px; }

/* Article body built from the shared Solution blocks, rendered in the reading column:
   tighter section rhythm than full pages, and no double container gutter. */
.solution-template .pc-article-blocks .sol-block { padding: 24px 0; }
.solution-template .pc-article-blocks .sol-block:first-child { padding-top: 0; }
.solution-template .pc-article-blocks .sol-container { max-width: none; padding: 0; }
.solution-template .pc-article-blocks .sol-stat-callout > .sol-container { padding: 0 32px; }
.solution-template .pc-article-blocks h2 { scroll-margin-top: 110px; }

/* TL;DR callout */
.solution-template .pc-tldr { margin: 40px 0 0; padding: 26px 30px; background: var(--sol-paper); border-left: 4px solid var(--sol-green); border-radius: 16px; }
.solution-template .pc-tldr-label { color: var(--sol-green); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px; }

/* Table of contents */
.solution-template .pc-toc { margin: 40px 0 8px; padding: 24px 28px; border: 1px solid var(--sol-line); border-radius: 16px; }
.solution-template .pc-toc-title { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sol-muted); margin: 0 0 14px; }
.solution-template .pc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.solution-template .pc-toc a { color: var(--sol-ink); font-size: 17px; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.solution-template .pc-toc a:hover { color: var(--sol-green); border-bottom-color: var(--sol-green); }
/* Article layout: centred content with a far-left sticky TOC */
.solution-template .pc-article-layout { position: relative; padding-top: 40px; padding-bottom: 96px; }
.solution-template .pc-article-main { max-width: var(--pc-read); margin: 0 auto; }
/* Sit the TOC just left of the centred body (~50px gap), not at the page edge.
   650 = half the body (380) + gap (~50) + TOC width (220). max() stops it going
   off-screen as the viewport narrows toward the stacking breakpoint. */
.solution-template .pc-article-aside { position: absolute; left: max(0px, calc(50% - var(--pc-read) / 2 - 48px - var(--pc-toc-w))); top: 40px; bottom: 0; width: var(--pc-toc-w); }
.solution-template .pc-article-aside .pc-toc { margin: 0; }
.solution-template .pc-toc--sticky { position: sticky; top: 110px; }
.solution-template .pc-article-main .pc-tldr { margin: 0 0 32px; }
.solution-template .pc-article-main .pc-article-body { padding: 0; }
/* The theme's #main-wrapper uses overflow:hidden, which disables position:sticky.
   On article pages only, switch it to clip — same clipping, but sticky works. */
body.pc-article-tpl #main-wrapper { overflow: clip; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Below this width there isn't room for a far-left TOC — hide it (desktop-only feature).
   Keep the layout's top padding so the TL;DR still clears the hero image. */
@media only screen and (max-width: 1500px) {
	.solution-template .pc-article-aside { display: none; }
}

@media only screen and (max-width: 1023px) {
	.solution-template { --sol-gutter: 30px; --sol-section-y: 48px; }
	.solution-template .sol-heading { font-size: 34px; }
	.solution-template .sol-hero { padding: 80px 0; }
	.solution-template .sol-hero-title { font-size: 44px; }
	.solution-template .sol-text-media-grid,
	.solution-template .sol-slider-grid { grid-template-columns: 1fr; gap: 32px; }
	.solution-template .sol-text-media--img-left .sol-text-media-text,
	.solution-template .sol-text-media--img-left .sol-text-media-img { order: initial; }
	.solution-template .sol-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.solution-template .pc-article-head--split .pc-article-head-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media only screen and (max-width: 767px) {
	.solution-template { --sol-gutter: 16px; --sol-section-y: 40px; }
	.solution-template .sol-heading { font-size: 28px; }
	.solution-template .sol-hero { padding: 56px 0; }
	.solution-template .sol-hero-title { font-size: 34px; }
	.solution-template .sol-hero-lead { font-size: 18px; }
	.solution-template .sol-card { width: 100%; height: 220px; }
	.solution-template .sol-grid--2,
	.solution-template .sol-grid--3,
	.solution-template .sol-grid--4 { grid-template-columns: 1fr; }
	.solution-template .sol-stats { grid-template-columns: 1fr; }
	.solution-template .sol-stat-num { font-size: 52px; }
	.solution-template .sol-step { flex-direction: column; gap: 12px; padding: 24px; }
	.solution-template .sol-buttons { flex-direction: column; }
	.solution-template .sol-buttons .global-btn-nw { width: 100%; max-width: 100%; }
	.solution-template .sol-rich-text--cols-2 .sol-prose { column-count: 1; }
	.solution-template .sol-cta-inner { padding: 40px 24px; }
	.solution-template .sol-logos-row { gap: 28px 36px; }
	.solution-template .sol-logo-img { max-height: 40px; }
	.solution-template .pc-article-head { padding-top: 40px; }
	.solution-template .pc-article-title { font-size: 30px; }
	.solution-template .pc-article-layout { padding-bottom: 56px; }
	.solution-template .pc-article-body { padding: 32px 0; }
	.solution-template .pc-tldr { padding: 22px 20px; }
	.solution-template .pc-toc { padding: 20px 20px; }

	/* Stacked editorial table on mobile (uses data-label) */
	.solution-template .sol-table-wrap { overflow: visible; }
	.solution-template .sol-table thead { display: none; }
	.solution-template .sol-table,
	.solution-template .sol-table tbody,
	.solution-template .sol-table tr,
	.solution-template .sol-table th,
	.solution-template .sol-table td { display: block; width: 100%; }
	.solution-template .sol-table tr { padding: 16px 0; border-bottom: 1px solid var(--sol-line); }
	.solution-template .sol-table tbody th,
	.solution-template .sol-table tbody td { border: 0; padding: 4px 0; }
	.solution-template .sol-table--label-col tbody th { width: 100%; font-size: 19px; padding-bottom: 6px; }
	.solution-template .sol-table td[data-label]::before { content: attr(data-label) " — "; font-weight: 600; color: var(--sol-muted); }
}