/* Cenvia — homepage sections, custom page templates, 404/search, payment explainer, partner application. */

/* ---------- Homepage ---------- */
.cenvia-hero { background: var(--c-accent-panel); background-image: var(--dots); background-size: 22px 22px; background-position: -8px -8px; border-bottom: 1px solid var(--c-line-strong); overflow: hidden; }
.cenvia-hero__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-9) var(--container-pad); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; }
.cenvia-hero__headline { font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); line-height: 1.02; margin: 0 0 var(--space-5); max-width: 15ch; }
.cenvia-hero__sub { color: var(--c-ink-muted); font-size: var(--fs-lead); line-height: 1.55; max-width: 44ch; margin: 0 0 var(--space-6); }
.cenvia-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.cenvia-hero__actions .btn-outline { background: var(--c-surface); border-color: var(--c-surface); box-shadow: var(--shadow-card); }
.cenvia-hero__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.cenvia-hero__chips li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); }
.cenvia-hero__chips .cenvia-icon { color: var(--c-accent); width: 18px; height: 18px; }
/* Hero art: a white card with the vial composition centred in it at every width.
   The centre image spans 8 of 12 columns (~320px at 1440); the flanking images
   sit behind it, scaled down, on the same row so the group is vertically centred. */
.cenvia-hero__art { position: relative; display: grid; place-items: center; align-content: center; min-height: 480px; padding: 6% 0; }
.cenvia-hero__art::before { content: ''; position: absolute; inset: 0 2%; background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.cenvia-hero__vial { position: relative; z-index: 1; min-width: 0; align-self: center; }
.cenvia-hero__vial img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(17, 20, 24, 0.14)); }
.cenvia-hero__art--1 .cenvia-hero__vial { width: 72%; }
.cenvia-hero__art--2, .cenvia-hero__art--3 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.cenvia-hero__art--2 .cenvia-hero__vial, .cenvia-hero__art--3 .cenvia-hero__vial { grid-row: 1; width: 100%; }
.cenvia-hero__art--2 .cenvia-hero__vial--1 { grid-column: 2 / 9; z-index: 2; }
.cenvia-hero__art--2 .cenvia-hero__vial--2 { grid-column: 6 / 13; transform: translateY(4%) scale(0.86); }
.cenvia-hero__art--3 .cenvia-hero__vial--1 { grid-column: 3 / 11; z-index: 2; }
.cenvia-hero__art--3 .cenvia-hero__vial--2 { grid-column: 1 / 7; transform: translate(-3%, 5%) scale(0.78); }
.cenvia-hero__art--3 .cenvia-hero__vial--3 { grid-column: 7 / 13; transform: translate(3%, 5%) scale(0.78); }

.cenvia-trust { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.cenvia-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-7); }
.cenvia-trust__item h2 { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-1); }
.cenvia-trust__item p { color: var(--c-ink-muted); font-size: var(--fs-small); margin: 0; }
.cenvia-trust__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--c-accent-tint); color: var(--c-accent); margin-bottom: var(--space-3); }
.cenvia-trust__icon .cenvia-icon { width: 20px; height: 20px; }

.cenvia-featured { background: var(--c-bg); }
.cenvia-testing { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.cenvia-testing__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: center; }
.cenvia-testing__copy p { color: var(--c-ink-muted); line-height: 1.7; }
.cenvia-testing__copy .btn-outline { margin-top: var(--space-2); }
.cenvia-testing__card { background: var(--c-dark); color: #fff; border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); }
.cenvia-testing__card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); margin: 0 0 var(--space-4); color: #fff; max-width: none; }
.cenvia-testing__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.cenvia-testing__list li { display: grid; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cenvia-testing__list li:last-child { border-bottom: none; }
.cenvia-testing__list strong { color: #fff; font-size: var(--fs-small); }
.cenvia-testing__list span { color: rgba(255, 255, 255, 0.65); font-size: var(--fs-small); }
.cenvia-testing__labs { margin: 0; font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.6); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; max-width: none; }
.cenvia-testing__labs span { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; }
.cenvia-page .cenvia-testing__labs { color: var(--c-ink-muted); margin-top: var(--space-4); }
.cenvia-page .cenvia-testing__labs span { background: var(--c-accent-tint); color: var(--c-accent-hover); }

.cenvia-categories { background: var(--c-bg); border-top: 1px solid var(--c-line); }
.cenvia-steps { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.cenvia-why { background: var(--c-bg); border-top: 1px solid var(--c-line); }
.cenvia-about-teaser { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.cenvia-about-teaser__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.cenvia-about-teaser__grid h2 { margin: 0; }
.cenvia-about-teaser__grid p { color: var(--c-ink-muted); line-height: 1.75; }
.cenvia-home-faq { background: var(--c-bg); border-top: 1px solid var(--c-line); }
.cenvia-home-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); align-items: start; }
.cenvia-home-faq__grid p { color: var(--c-ink-muted); }
.cenvia-home-faq .cenvia-faq { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: 0 var(--space-5); }
.cenvia-home-faq .cenvia-faq__item:last-child { border-bottom: none; }

.cenvia-capture-section { background: var(--c-dark); }
.cenvia-capture--block { max-width: 640px; margin: 0 auto; text-align: center; }
.cenvia-capture--block .cenvia-eyebrow { color: #a9c3d8; }
.cenvia-capture__title { color: #fff; }
.cenvia-capture--block .cenvia-capture__title { font-size: clamp(1.7rem, 1.35rem + 1.3vw, var(--fs-h2)); margin-bottom: var(--space-3); }
.cenvia-capture--block .cenvia-capture__lede { color: rgba(255, 255, 255, 0.72); margin: 0 auto var(--space-6); }
.cenvia-capture--block .cenvia-capture__row { max-width: 480px; margin: 0 auto; }
.cenvia-capture--block .cenvia-capture__row input[type="email"] { background: #fff; color: var(--c-ink); border-color: #fff; padding: 0.95rem var(--space-5); font-size: var(--fs-body); }
.cenvia-capture--block .btn-primary { padding: 0.95rem var(--space-6); }
.cenvia-capture--block .cenvia-capture__consent { max-width: 480px; margin: var(--space-3) auto 0; color: rgba(255, 255, 255, 0.5); }

/* ---------- Custom pages ---------- */
.cenvia-coa-lookup-wrap { max-width: 860px; }
.cenvia-coa-lookup-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); }
.cenvia-coa-lookup-card h2 { margin-bottom: var(--space-4); }
.cenvia-coa-lookup__label { display: block; font-weight: 700; font-size: var(--fs-small); margin-bottom: var(--space-2); }
.cenvia-coa-lookup__row { display: flex; gap: var(--space-2); }
.cenvia-coa-lookup__input { flex: 1; min-width: 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); padding: 0.85rem var(--space-5); font-family: var(--font-mono); font-size: var(--fs-body); }
.cenvia-coa-lookup__result { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.cenvia-coa-lookup__intro { font-size: var(--fs-small); color: var(--c-ink-muted); margin: 0; max-width: none; }
.cenvia-coa-lookup__empty { padding: var(--space-4) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-card); background: var(--c-bg); color: var(--c-ink); font-size: var(--fs-small); margin: 0; max-width: none; }
.cenvia-coa-lookup-card__note { font-size: var(--fs-small); color: var(--c-ink-muted); margin: var(--space-4) 0 0; max-width: none; }

.cenvia-coa-grid__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.cenvia-coa-grid__head h2 { margin: 0; }
.cenvia-coa-grid__search { min-width: 280px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); padding: 0.65rem var(--space-5); font-size: var(--fs-small); }
.cenvia-coa-grid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cenvia-coa-grid__card { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-4); }
.cenvia-coa-grid__card[hidden] { display: none; }
.cenvia-coa-grid__image img { width: 96px; height: 96px; object-fit: contain; background: var(--c-bg); border-radius: var(--radius-sm); }
.cenvia-coa-grid__title { font-size: var(--fs-lead); margin: 0 0 var(--space-2); }
.cenvia-coa-grid__title a { color: var(--c-ink); text-decoration: none; }
.cenvia-coa-grid__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0 0 var(--space-3); }
.cenvia-coa-grid__facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-muted); }
.cenvia-coa-grid__facts dd { margin: 0; font-size: var(--fs-small); font-weight: 600; }
.cenvia-coa-grid__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cenvia-coa-grid__actions .btn-primary, .cenvia-coa-grid__actions .btn-outline { padding: 0.5rem var(--space-4); font-size: var(--fs-caption); }
.cenvia-coa-grid__facts dd .cenvia-data { font-weight: 600; }
.cenvia-coa-grid__facts > div { min-width: 0; overflow-wrap: anywhere; }
.cenvia-coa-grid__empty { color: var(--c-ink-muted); text-align: center; padding: var(--space-6); }

.cenvia-contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.cenvia-contact-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-5); margin-bottom: var(--space-4); }
.cenvia-contact-card p { color: var(--c-ink-muted); font-size: var(--fs-small); margin: 0; max-width: none; }
.cenvia-contact-card__email { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-lead); font-weight: 500; color: var(--c-ink); text-decoration: none; margin-bottom: var(--space-3); word-break: break-all; }
.cenvia-contact-card__email:hover { color: var(--c-accent); }
.cenvia-contact-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cenvia-contact-card__list li { display: grid; gap: 2px; font-size: var(--fs-small); }
.cenvia-contact-card__list strong { color: var(--c-ink); }
.cenvia-contact-card__list span { color: var(--c-ink-muted); }
.cenvia-contact-card--muted { background: var(--c-bg); }
.cenvia-contact-form-wrap { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); }
.cenvia-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.cenvia-contact-form button.btn-primary { background: var(--c-accent); color: #fff; border: none; }

.cenvia-faq-page { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.cenvia-faq-page__nav { position: sticky; top: calc(var(--header-height) + var(--compliance-bar-height) + var(--space-6)); }
.cenvia-faq-page__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--c-line); }
.cenvia-faq-page__nav a { display: block; padding: var(--space-2) var(--space-4); font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; }
.cenvia-faq-page__nav a:hover { color: var(--c-accent); border-left-color: var(--c-accent); }
.cenvia-faq-group { margin-bottom: var(--space-8); }
.cenvia-faq-group h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.cenvia-faq-group .cenvia-faq { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: 0 var(--space-5); }
.cenvia-faq-group .cenvia-faq__item:last-child { border-bottom: none; }

/* Payment explainer */
.cenvia-payment-explainer__title { margin-bottom: var(--space-5); }
.cenvia-payment-explainer__steps { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); counter-reset: none; }
.cenvia-payment-explainer__step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: start; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); }
.cenvia-payment-explainer__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-ink); color: #fff; font-weight: 800; font-size: var(--fs-small); }
.cenvia-payment-explainer__step-title { font-weight: 800; color: var(--c-ink); margin: 0 0 4px; max-width: none; }
.cenvia-payment-explainer__step-text { color: var(--c-ink-muted); font-size: var(--fs-small); margin: 0; max-width: none; line-height: 1.6; }
.cenvia-payment-explainer__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: 0; }
.cenvia-payment-explainer__facts div { background: var(--c-accent-tint); border-radius: var(--radius-card); padding: var(--space-4); }
.cenvia-payment-explainer__facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-muted); margin-bottom: 4px; }
.cenvia-payment-explainer__facts dd { margin: 0; font-weight: 700; color: var(--c-ink); font-size: var(--fs-small); word-break: break-word; }
.cenvia-payment-explainer--compact .cenvia-payment-explainer__step { padding: var(--space-3) var(--space-4); }
body.page article .entry-content .cenvia-payment-explainer p { color: inherit; }

/* Partner application (Typeform widget embed; the script is enqueued on /partners/ only) */
.cenvia-section--apply .cenvia-section-head { margin-bottom: var(--space-6); }
.cenvia-partner-embed { max-width: 760px; margin: 0 auto; }
.cenvia-partner-embed__rules { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.cenvia-partner-embed__rules-title { font-weight: 800; color: var(--c-ink); margin: 0 0 var(--space-3); max-width: none; }
.cenvia-partner-embed__rules .cenvia-check-list { margin: 0; gap: var(--space-2); font-size: var(--fs-small); }
/* The widget fills its container, so the container owns the height. The
   min-height reserves the space before the script arrives (no page jump);
   once loaded, data-tf-auto-resize sets the container's height to the
   taller of the current question and the 800px floor. The floor is what
   the form's long-text questions need before they stop scrolling inside
   the iframe (Typeform reports a smaller height for them than it renders;
   a two-line title needs about 760px), so no question shows an inner
   scrollbar next to the page's own. */
.cenvia-partner-embed__form { width: 100%; height: 800px; min-height: 800px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
/* Typeform's reported height also runs a few pixels short of its own
   question scroller on questions taller than the floor, which paints a
   full-length scrollbar thumb. Giving the widget 8px more than the
   container (clipped by the overflow above; the footer badge sits well
   clear of the edge) removes it. */
.cenvia-partner-embed__form:not(.tf-v1-widget-fullscreen) .tf-v1-widget { height: calc(100% + 8px); }
.cenvia-partner-embed__form iframe { display: block; }
.cenvia-partner-embed__fallback { text-align: center; font-size: var(--fs-small); color: var(--c-ink-muted); margin: var(--space-3) 0 0; max-width: none; }
.cenvia-partner-embed__fallback a { color: inherit; font-weight: 600; }

/* 404 / search */
.cenvia-404 .cenvia-section-inner, .cenvia-search .cenvia-section-inner { padding-top: var(--space-8); }
.cenvia-search__products, .cenvia-search__pages { margin-bottom: var(--space-8); }
.cenvia-search__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cenvia-search__list li { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); }
.cenvia-search__list a { font-weight: 800; color: var(--c-ink); text-decoration: none; font-size: var(--fs-lead); }
.cenvia-search__list p { color: var(--c-ink-muted); font-size: var(--fs-small); margin: var(--space-1) 0 0; max-width: none; }

@media (max-width: 1024px) { .cenvia-coa-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cenvia-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
	.cenvia-hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-7); padding-bottom: var(--space-7); gap: var(--space-6); }
	.cenvia-hero__copy { min-width: 0; }
	.cenvia-hero__art { min-height: 340px; max-width: 480px; margin: 0 auto; width: 100%; padding: 8% 0; }
	.cenvia-testing__grid, .cenvia-about-teaser__grid, .cenvia-home-faq__grid, .cenvia-contact-grid, .cenvia-faq-page { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.cenvia-testing__grid > *, .cenvia-about-teaser__grid > *, .cenvia-home-faq__grid > *, .cenvia-contact-grid > *, .cenvia-faq-page > * { min-width: 0; }
	.cenvia-faq-page__nav { position: static; }
	.cenvia-faq-page__nav ul { display: flex; flex-wrap: wrap; border-left: none; gap: var(--space-2); }
	.cenvia-faq-page__nav a { border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); margin: 0; padding: 6px var(--space-3); }
	.cenvia-payment-explainer__facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.cenvia-trust__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.cenvia-coa-grid__list { grid-template-columns: minmax(0, 1fr); }
	.cenvia-form-grid { grid-template-columns: minmax(0, 1fr); }
	.cenvia-partner-embed__rules { padding: var(--space-4); }
	.cenvia-partner-embed__form { height: 560px; min-height: 560px; }
	.cenvia-coa-lookup__row { flex-direction: column; }
	.cenvia-capture__row { flex-direction: column; }
	.cenvia-hero__headline { max-width: none; }
	.cenvia-coa-grid__search { min-width: 0; width: 100%; }
}

/* Footer link lists: a little vertical padding so each link is at least 24px tall on phones. */
.cenvia-footer__links a, .cenvia-footer ul a { display: inline-block; padding: 3px 0; }