/* ==========================================================================
   Homepage — the eleven source sections.
   ========================================================================== */

.wbs-section { padding: clamp(44px, 6vw, 76px) 0; }
.wbs-section:nth-of-type(even) { background: var(--wbs-cream-alt); }

/* Measured: 12.48/18.72 weight 800. */
.wbs-eyebrow {
	margin: 0 0 10px;
	font-family: var(--wbs-font-body);
	font-size: 12.48px; font-weight: 800; line-height: 1.5;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--wbs-teal-deep);
}
/* On the dark hero the source uses its cream, not white. */
.wbs-hero .wbs-eyebrow { color: #eee7cd; }

/* Measured from the source's .factory-section-title:
   Inter, weight 800, clamp(1.8rem, 3vw, 3rem), line-height 1.08, #142231. */
.wbs-section__title {
	max-width: 26ch;
	font-family: var(--wbs-font-heading);
	font-weight: 800;
	font-size: clamp(1.8rem, 3vw, 3rem);
	line-height: 1.08;
	letter-spacing: 0;
	/* Measured #0f3d68 — app.css declares #142231 but a later rule wins. */
	color: var(--wbs-blue);
	margin-bottom: 14px;
}
.wbs-section__lede { max-width: 68ch; color: #4a5a6d; font-size: 16px; line-height: 1.7; }

/* Card/tile headings are Inter too (.dashboard-tile h3, .warehouse-card h3,
   .quality-step h3, .cta-card h3 all override the Playfair base rule). */
.wbs-card__title,
.wbs-step__title,
.wbs-hub__name,
.wbs-docs__subtitle,
.wbs-custom__menutitle,
.wbs-line__title {
	font-family: var(--wbs-font-heading);
	font-weight: 700;
}

.wbs-section__head {
	display: flex; flex-wrap: wrap; gap: 20px;
	align-items: flex-end; justify-content: space-between;
	margin-bottom: 28px;
}
.wbs-section__aside { display: flex; align-items: center; gap: 14px; }

.wbs-pill {
	display: inline-block; padding: 6px 14px;
	border-radius: var(--wbs-radius-pill);
	background: var(--wbs-mist); color: var(--wbs-ink);
	font-size: 13px; font-weight: 600;
}
.wbs-textlink { font-weight: 600; border-bottom: 1px solid currentColor; }

/* --- hero -----------------------------------------------------------------
   Full-bleed dark band over the source's own photograph. Gradient stops are
   the source's exact values from .factory-hero. */
/* ⚠ app.css declares .factory-hero FOUR times. The winning rule is the last
   one, marked !important, and it drops the photograph entirely: a near-opaque
   navy gradient plus two coloured radial glows (teal bottom-left, rust
   top-right). Copying the FIRST rule — the one with url(2p.jpg) at alpha .78 —
   renders the photo prominently and looks nothing like the live site. */
.wbs-hero {
	padding: 76px 0 52px;
	background:
		linear-gradient(115deg, rgba(7, 24, 36, .97), rgba(16, 42, 58, .93)),
		radial-gradient(circle at 12% 88%, rgba(73, 132, 133, .32), transparent 30%),
		radial-gradient(circle at 90% 8%, rgba(167, 101, 53, .30), transparent 32%);
	color: #fff;
}
.wbs-hero__grid {
	display: grid; gap: clamp(28px, 4vw, 52px);
	grid-template-columns: 1.25fr 1fr; align-items: start;
}
.wbs-hero__title {
	font-family: var(--wbs-font-heading);
	font-weight: 800;
	font-size: clamp(2.1rem, 4vw, 3rem);
	line-height: 1.08;
	color: #fff;
	margin-bottom: 12px;
	max-width: 16ch;
	text-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.wbs-hero__copy { max-width: 60ch; color: rgba(255, 255, 255, .82); font-size: 17px; }

/* Metric tiles are a JOINED strip on the source, not three separate cards:
   one bordered container, 1px grid gap showing the container colour through
   as hairline dividers. */
.wbs-hero__metrics {
	display: grid; list-style: none; margin: 34px 0 0; padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid rgba(238, 231, 205, .16);
	background: rgba(238, 231, 205, .10);
	border-radius: 18px;
	overflow: hidden;
}
.wbs-hero .wbs-metric {
	background: rgba(16, 42, 58, .58);
	border: 0;
	border-radius: 0;
	padding: 20px;
}
.wbs-hero .wbs-metric__value { color: #fff; font-family: var(--wbs-font-heading); font-weight: 700; }
.wbs-hero .wbs-metric__label { color: rgba(255, 255, 255, .7); }

.wbs-hero .wbs-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.wbs-hero .wbs-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Control panel: also a joined strip (1px gaps, hidden overflow, square rows). */
.wbs-hero__panel {
	display: grid; list-style: none; margin: 0;
	gap: 1px;
	padding: 0;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 18px;
	overflow: hidden;
	align-self: stretch;
}
.wbs-hero__panel .wbs-line {
	background: rgba(247, 251, 253, .08);
	padding: 22px;
	border-radius: 0;
}

.wbs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 30px; }

.wbs-metric {
	background: var(--wbs-white);
	border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius);
	padding: 14px 16px;
}
.wbs-metric__value {
	display: block; font-family: var(--wbs-font-display);
	font-size: 22px; color: var(--wbs-ink);
}
.wbs-metric__label { display: block; font-size: 12.5px; color: var(--wbs-muted); }

.wbs-line { display: grid; gap: 4px; }
.wbs-line__no {
	font: 600 11px/1 var(--wbs-font-body);
	letter-spacing: .14em; color: var(--wbs-cyan);
}
.wbs-line__title { font-size: 15px; color: #fff; }
.wbs-line__copy { font-size: 13.5px; color: rgba(255, 253, 247, .72); }

@media (max-width: 900px) {
	.wbs-hero__grid { grid-template-columns: 1fr; }
	.wbs-hero__metrics { grid-template-columns: 1fr; }
}

/* --- generic card grids --------------------------------------------------- */
.wbs-cardgrid {
	display: grid; gap: 16px; list-style: none; margin: 28px 0 0; padding: 0;
}
.wbs-cardgrid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Measured: tiles are CREAM, square, borderless, 24px padding — the visible
   rules come from the strip they sit in, not from each tile. */
.wbs-card {
	background: var(--wbs-cream);
	border: 0;
	border-radius: 0;
	padding: 24px;
}
.wbs-cardgrid--5 {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: rgba(16, 42, 58, .12);
	border: 1px solid rgba(16, 42, 58, .12);
	border-radius: var(--wbs-radius);
	overflow: hidden;
}
/* Measured: quality steps are cream, square and borderless at 24px — the rules
   belong to the strip they sit in, exactly like the dashboard tiles. */
.wbs-step {
	background: var(--wbs-cream);
	border: 0;
	border-radius: 0;
	padding: 24px;
}
.wbs-steps {
	gap: 1px;
	background: rgba(16, 42, 58, .12);
	border: 1px solid rgba(16, 42, 58, .12);
	border-radius: var(--wbs-radius);
	overflow: hidden;
}
.wbs-hub {
	background: var(--wbs-white);
	border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius);
	padding: 18px;
}
.wbs-card__key, .wbs-hub__key {
	display: inline-block; margin-bottom: 10px; padding: 5px 10px;
	border-radius: 8px; background: var(--wbs-mist);
	font: 600 11.5px/1 var(--wbs-font-body);
	letter-spacing: .06em; text-transform: uppercase; color: var(--wbs-ink);
}
/* Measured: the quality-step key is PLAIN TEAL TEXT — no chip, no background,
   no padding. 13.76/20.64 weight 900. */
.wbs-step__key {
	display: block; margin-bottom: 4px; padding: 0;
	background: none; border: 0; border-radius: 0;
	font-family: var(--wbs-font-body);
	font-size: 13.76px; font-weight: 900; line-height: 1.5;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--wbs-teal);
}
.wbs-card__title, .wbs-step__title, .wbs-hub__name {
	display: block; margin-bottom: 6px;
	font-size: 17.6px; font-weight: 800; line-height: 1.2;
	color: var(--wbs-ink-deep);
}
.wbs-card__copy, .wbs-step__copy, .wbs-hub__blurb {
	margin: 0; font-size: 13.76px; line-height: 1.65; color: var(--wbs-muted);
}

/* --- warehouse proof ------------------------------------------------------ */
.wbs-statgrid {
	display: grid; gap: 14px; list-style: none; margin: 28px 0; padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.wbs-stat {
	border-left: 3px solid var(--wbs-teal);
	padding: 6px 0 6px 14px;
}
.wbs-stat__value {
	display: block; font-family: var(--wbs-font-display); font-size: 26px;
}
.wbs-stat__label { display: block; font-size: 13px; color: var(--wbs-muted); }

.wbs-proof__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wbs-proof__regions {
	margin-top: 18px; font-size: 13.5px; color: var(--wbs-muted);
	letter-spacing: .02em;
}

/* --- hubs ----------------------------------------------------------------- */
.wbs-hub { display: flex; flex-direction: column; }
.wbs-hub__lines { list-style: none; margin: 14px 0; padding: 0; }
.wbs-hub__lines li {
	position: relative; padding-left: 18px; margin-bottom: 7px;
	font-size: 14px; color: var(--wbs-ink);
}
.wbs-hub__lines li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--wbs-teal);
}
.wbs-hub__cta { margin-top: auto; align-self: flex-start; }

/* --- documentation -------------------------------------------------------- */
.wbs-docs__grid {
	display: grid; gap: 24px; margin-top: 28px;
	grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
}
@media (max-width: 900px) { .wbs-docs__grid { grid-template-columns: 1fr; } }

.wbs-lab {
	background: var(--wbs-ink); color: var(--wbs-cream);
	border-radius: var(--wbs-radius-lg); padding: 22px;
	align-self: start;
}
.wbs-lab__eyebrow {
	margin: 0 0 6px; font-size: 11.5px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--wbs-cyan);
}
.wbs-lab__name {
	display: block; font-family: var(--wbs-font-display);
	font-size: 24px; margin-bottom: 10px; color: #fff;
}
.wbs-lab__copy { font-size: 13.5px; color: rgba(255, 253, 247, .74); }
.wbs-lab__links { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.wbs-lab__links a { color: var(--wbs-cyan); }

.wbs-docs__subtitle { margin: 0; font-size: 20px; }
.wbs-docs__note { font-size: 13.5px; color: var(--wbs-muted); max-width: 72ch; }

/* --- quality steps --------------------------------------------------------- */
.wbs-steps {
	display: grid; gap: 16px; list-style: none; margin: 28px 0 0; padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	counter-reset: wbs-step;
}

/* --- reviews ---------------------------------------------------------------- */
/* Measured: the average is INTER at 42/42 in the review blue — not the Playfair
   the base heading rule would give it — and the count is 12/18. */
.wbs-reviews__score {
	display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px;
	font-size: 13.76px; line-height: 1.5; color: #233044;
}
.wbs-reviews__average {
	font-family: var(--wbs-font-heading);
	font-size: 42px; line-height: 1; color: var(--review-blue);
}
.wbs-reviews__count { font-size: 12px; line-height: 1.5; color: var(--review-muted); }
.wbs-reviews__empty { color: var(--wbs-muted); font-size: 15px; }

.wbs-reviewlist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.wbs-review {
	background: var(--wbs-white); border: 1px solid var(--review-line);
	border-radius: var(--wbs-radius); padding: 16px;
}
.wbs-review__hub {
	display: inline-block; margin-bottom: 8px;
	font-size: 12px; font-weight: 600; color: var(--review-blue);
}
.wbs-review__body { margin: 0 0 6px; color: var(--review-ink); font-size: 15px; }
.wbs-review__meta { font-size: 12.5px; color: var(--review-muted); }

.wbs-reviews__actions { margin-bottom: 18px; }
.wbs-reviews__filters {
	display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}

/* --- community --------------------------------------------------------------- */
.wbs-community__grid {
	display: grid; gap: 24px; align-items: center;
	grid-template-columns: 1.6fr 1fr;
}
@media (max-width: 860px) { .wbs-community__grid { grid-template-columns: 1fr; } }

.wbs-ticks { list-style: none; margin: 18px 0; padding: 0; }
.wbs-ticks li {
	position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 15px;
}
.wbs-ticks li::before {
	content: ""; position: absolute; left: 2px; top: .32em;
	width: 12px; height: 7px;
	border-left: 2px solid var(--wbs-teal);
	border-bottom: 2px solid var(--wbs-teal);
	transform: rotate(-45deg);
}

.wbs-community__card {
	background: var(--wbs-white); border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius-lg); padding: 22px; text-align: center;
}
.wbs-community__eyebrow {
	display: block; font-size: 11.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--wbs-muted);
}
.wbs-community__name {
	display: block; font-family: var(--wbs-font-display);
	font-size: 26px; margin: 6px 0 14px;
}
.wbs-community__pending { font-size: 14px; color: var(--wbs-muted); }
.wbs-community__privacy {
	margin-top: 22px; font-size: 13px; color: var(--wbs-muted);
	border-top: 1px solid var(--wbs-sage-cool); padding-top: 14px;
}

/* --- customization ------------------------------------------------------------ */
.wbs-custom__grid {
	display: grid; gap: 28px; grid-template-columns: 1.3fr 1fr; align-items: start;
}
@media (max-width: 900px) { .wbs-custom__grid { grid-template-columns: 1fr; } }

/* Measured: transparent, square, borderless, 24px. */
.wbs-custom__menu {
	background: transparent; border: 0; border-radius: 0; padding: 24px;
}
.wbs-custom__menutitle {
	margin-top: 0;
	font-family: var(--wbs-font-heading);
	font-size: 17.6px; font-weight: 800; line-height: 1.2;
	color: var(--wbs-ink-deep);
}
.wbs-custom__list { list-style: none; margin: 0 0 16px; padding: 0; }
.wbs-custom__list li {
	display: flex; flex-direction: column; gap: 2px;
	padding: 11px 0; border-bottom: 1px solid var(--wbs-line-soft);
}
.wbs-custom__list li:last-child { border-bottom: 0; }
.wbs-custom__list span { font-size: 13.5px; color: var(--wbs-muted); }
.wbs-custom__limits { margin: 0; font-size: 13px; color: var(--wbs-muted); }
.wbs-custom__limits strong { display: block; color: var(--wbs-ink); margin-bottom: 4px; }

/* --- SEO prose ------------------------------------------------------------------ */
.wbs-prose { max-width: 76ch; }
.wbs-prose h2 { margin-top: 0; }
.wbs-prose p { color: var(--wbs-muted); }

/* --- FAQ -------------------------------------------------------------------------- */
.wbs-faq__title { max-width: none; }
.wbs-faq__groups {
	display: grid; gap: 22px; margin-top: 28px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.wbs-faq__group {
	background: var(--wbs-white); border: 1px solid var(--wbs-sage-cool);
	border-radius: var(--wbs-radius); padding: 18px;
}
.wbs-faq__key {
	margin: 0 0 4px; font-family: var(--wbs-font-body);
	font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wbs-teal-deep);
}
.wbs-faq__intro { font-size: 13.5px; color: var(--wbs-muted); margin-bottom: 14px; }

.wbs-faq__item { border-top: 1px solid var(--wbs-line-soft); padding: 10px 0; }
.wbs-faq__item:first-of-type { border-top: 0; }
.wbs-faq__q {
	cursor: pointer; font-weight: 600;
	font-size: 16.32px; line-height: 1.5; color: var(--wbs-blue);
	list-style: none; display: flex; gap: 10px; align-items: flex-start;
}
.wbs-faq__q::-webkit-details-marker { display: none; }
.wbs-faq__q::before {
	content: "+"; color: var(--wbs-teal); font-weight: 700; line-height: 1.4;
}
.wbs-faq__item[open] .wbs-faq__q::before { content: "–"; }
.wbs-faq__a { padding: 6px 0 4px 22px; }
.wbs-faq__a p { margin: 0; font-size: 13.76px; line-height: 1.75; color: #536171; }