.datajoint-solutions-pharma { color:#011627; }
.datajoint-solutions-pharma__inner { max-width:1280px; margin:0 auto; padding:0 var(--dj-gutter,48px); }

/* Foundation applied (chip grid) */
.datajoint-solutions-pharma__applied { background:#fff; padding:120px 0 100px; text-align:center; }
.datajoint-solutions-pharma__applied-eyebrow { margin:0; color:#00a0df; font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.1em; text-transform:uppercase; }
.datajoint-solutions-pharma__applied-heading { margin:24px auto 0; max-width:1040px; font:700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
.datajoint-solutions-pharma__applied-intro { margin:24px auto 0; max-width:980px; color:#4a5568; font:300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }
.datajoint-solutions-pharma__chips { margin-top:64px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; text-align:left; }
@media (max-width:1024px) { .datajoint-solutions-pharma__chips { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .datajoint-solutions-pharma__chips { grid-template-columns:1fr; } }
.datajoint-solutions-pharma__chip { display:flex; align-items:center; gap:12px; padding:20px 24px; background:#011627; border:1.5px solid #011627; border-radius:12px; text-decoration:none; transition:all 200ms ease; }
.datajoint-solutions-pharma__chip:hover { border-color:#00a0df; transform:translateY(-4px); box-shadow:0 4px 12px rgba(1,22,39,.2); }
.datajoint-solutions-pharma__chip-icon { flex:0 0 auto; width:36px; height:36px; border-radius:8px; background:rgba(0,160,223,.15); display:flex; align-items:center; justify-content:center; }
.datajoint-solutions-pharma__chip-name { display:block; color:#fff; font:700 15px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
.datajoint-solutions-pharma__chip-desc { display:block; margin-top:2px; color:rgba(255,255,255,.7); font:300 12px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }

.datajoint-solutions-pharma__header { background:#f4f7fa; padding:120px 0 32px; }
.datajoint-solutions-pharma__kicker { margin:0; color:#00a0df; font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.1em; text-transform:uppercase; }
.datajoint-solutions-pharma__name { margin:14px 0 0; font:700 48px/1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
@media (max-width:768px) { .datajoint-solutions-pharma__name { font-size:32px; } }
.datajoint-solutions-pharma__intro { margin:16px 0 0; max-width:920px; color:#4a5568; font:300 20px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }

.datajoint-solutions-pharma__body { background:#f4f7fa; padding:24px 0 100px; }

/* Tabs (desktop only). On mobile a custom dropdown replaces the tab row.
   Styled as connected folder-tabs that join the panel below — matching the
   homepage "Proven at Scale" (customer story) tab pattern so the tabs read as
   part of the same surface as the content they filter (client feedback). */
.datajoint-solutions-pharma__tabs { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:1000px) {
	/* Lovable parity: one connected segmented bar across the top of the content
	   panel (no gaps), so it reads as a single line of tabs (client 5:18). */
	.datajoint-solutions-pharma__tabs {
		grid-template-columns:repeat(4,minmax(0,1fr));
		gap:0;
		align-items:stretch;
		margin-bottom:-1px; /* overlap the panel's top border so the active tab merges in */
		position:relative;
		z-index:1;
	}
}
@media (max-width:999px) and (min-width:768px) {
	.datajoint-solutions-pharma__tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
}
@media (max-width:767px) { .datajoint-solutions-pharma__tabs { display:none; } }
.datajoint-solutions-pharma__tab {
	position:relative;
	text-align:left;
	border:1.5px solid #00a0df;
	background:#fff;
	border-radius:10px;
	padding:16px;
	cursor:pointer;
	transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
@media (min-width:768px) {
	/* Segmented bar: a single blue-outlined row with a continuous blue line along
	   the BOTTOM that delineates the tabs from the changing body copy below
	   (client: "blue horizontal line across the bottom of the tabs"). Neighbours
	   share vertical borders; only the outer top corners are rounded so the row
	   and the panel beneath read as one connected rectangle (no open curve). */
	.datajoint-solutions-pharma__tabs {
		border-bottom:1.5px solid #00a0df;
	}
	.datajoint-solutions-pharma__tab {
		border-radius:0;
		border-right-width:0;
		border-bottom-color:transparent; /* the wrapper draws the shared bottom line */
	}
	.datajoint-solutions-pharma__tab:last-child { border-right-width:1.5px; }
}
@media (min-width:1000px) {
	.datajoint-solutions-pharma__tab:first-child { border-top-left-radius:10px; }
	.datajoint-solutions-pharma__tab:last-child { border-top-right-radius:10px; }
}
.datajoint-solutions-pharma__tab:hover { background:rgba(0,160,223,.06); }
/* Active stage: solid blue fill with white text (Lovable parity), instead of the
   previous faint shade, so the selected stage is unmistakable. */
.datajoint-solutions-pharma__tab.is-active { background:#00a0df; }
.datajoint-solutions-pharma__tab.is-active .datajoint-solutions-pharma__tab-stage { color:#fff; }
.datajoint-solutions-pharma__tab.is-active .datajoint-solutions-pharma__tab-title { color:#fff; }
.datajoint-solutions-pharma__tab.is-active .datajoint-solutions-pharma__tab-short { color:rgba(255,255,255,.85); }
.datajoint-solutions-pharma__tab-stage { display:block; color:#00a0df; font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.08em; text-transform:uppercase; }
.datajoint-solutions-pharma__tab-title { display:block; margin-top:8px; color:#011627; font:700 15px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
.datajoint-solutions-pharma__tab-short { display:block; margin-top:6px; color:#4a5568; font:300 12px/1.3 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }

/* Mobile stage dropdown (deliberate deviation from Lovable's mobile tab row). */
.datajoint-solutions-pharma__select { display:none; position:relative; margin-bottom:16px; }
@media (max-width:767px) { .datajoint-solutions-pharma__select { display:block; } }
.datajoint-solutions-pharma__select-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1.5px solid #00a0df; border-radius:10px; background:#fff; cursor:pointer; text-align:left; }
.datajoint-solutions-pharma__select-current { display:flex; flex-direction:column; gap:4px; }
.datajoint-solutions-pharma__select-stage { color:#00a0df; font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.08em; text-transform:uppercase; }
.datajoint-solutions-pharma__select-name { color:#011627; font:700 15px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
.datajoint-solutions-pharma__select-chevron { color:#00a0df; }
.datajoint-solutions-pharma__select-menu { list-style:none; margin:8px 0 0; padding:8px; position:absolute; left:0; right:0; z-index:20; background:#fff; border:1.5px solid #e2e2e2; border-radius:10px; box-shadow:0 8px 24px rgba(1,22,39,.12); }
.datajoint-solutions-pharma__select-menu[hidden] { display:none; }
.datajoint-solutions-pharma__select-menu button { width:100%; text-align:left; border:0; background:none; padding:12px; border-radius:8px; cursor:pointer; display:flex; flex-direction:column; gap:4px; }
.datajoint-solutions-pharma__select-menu button:hover { background:rgba(0,160,223,.06); }
.datajoint-solutions-pharma__select-menu button span:first-child { color:#00a0df; font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.08em; text-transform:uppercase; }
.datajoint-solutions-pharma__select-menu button span:last-child { color:#011627; font:700 15px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
.datajoint-solutions-pharma__select-menu [aria-selected="true"] button { background:rgba(0,160,223,.08); }

/* Stage pager (mobile only) */
.datajoint-solutions-pharma__pager { display:none; margin-top:28px; padding-top:20px; border-top:1px solid #e2e2e2; align-items:center; justify-content:space-between; gap:12px; }
@media (max-width:767px) { .datajoint-solutions-pharma__pager { display:flex; } }
.datajoint-solutions-pharma__pager-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid #e2e2e2; border-radius:999px; background:#fff; cursor:pointer; color:#00a0df; font:700 18px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
.datajoint-solutions-pharma__pager-btn:hover { border-color:#00a0df; }
.datajoint-solutions-pharma__pager-count { color:#4a5568; font:700 12px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.06em; text-transform:uppercase; }

/* Panels — joined directly beneath the tab row (no gap) so the active tab and
   the panel read as one connected surface (client feedback). */
.datajoint-solutions-pharma__panels { margin-top:0; }
/* Square top corners so the panel sits flush under the tab row's bottom line as
   one rectangle (no open curve in the top-right). Only the bottom is rounded. */
.datajoint-solutions-pharma__panel { border:1.5px solid #00a0df; border-top:none; background:#fff; border-radius:0 0 16px 16px; padding:32px; display:grid; grid-template-columns:1fr; gap:48px; }
@media (max-width:767px) {
	/* No connected tabs on mobile (dropdown instead) — restore full rounding + top border. */
	.datajoint-solutions-pharma__panel { border-top:1.5px solid #00a0df; border-radius:16px; }
}
@media (min-width:1024px) { .datajoint-solutions-pharma__panel { grid-template-columns:1fr 1fr; padding:48px; gap:64px; } }
.datajoint-solutions-pharma__panel[hidden] { display:none; }
.datajoint-solutions-pharma__panel-index { margin:0; color:#00a0df; font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.08em; }
.datajoint-solutions-pharma__panel-title { margin:12px 0 0; font:700 32px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
@media (max-width:768px) { .datajoint-solutions-pharma__panel-title { font-size:24px; } }
.datajoint-solutions-pharma__panel-lead { margin:16px 0 0; color:#4a5568; font:300 18px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }

.datajoint-solutions-pharma__caps-label { margin:0 0 16px; color:#4a5568; font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.08em; text-transform:uppercase; }
.datajoint-solutions-pharma__caps-list { display:flex; flex-direction:column; gap:12px; }
.datajoint-solutions-pharma__cap { display:flex; gap:16px; align-items:flex-start; padding:20px; border:1px solid rgba(1,22,39,.12); border-radius:8px; background:#fff; transition:border-color 200ms ease, transform 200ms ease; }
.datajoint-solutions-pharma__cap:hover { border-color:#00a0df; transform:translateY(-2px); }
.datajoint-solutions-pharma__cap-icon { flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.datajoint-solutions-pharma__cap-name { margin:0; font:700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
.datajoint-solutions-pharma__cap-desc { margin:6px 0 0; color:#4a5568; font:300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }

.datajoint-solutions-pharma__proof { margin-top:24px; padding:16px 20px; border:1px solid rgba(0,160,223,.35); border-radius:8px; background:rgba(0,160,223,.06); }
.datajoint-solutions-pharma__proof-label { margin:0; color:#00a0df; font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.1em; text-transform:uppercase; }
.datajoint-solutions-pharma__proof-text { margin:8px 0 0; color:#011627; font:300 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }

/* Gold standard callout */
.datajoint-solutions-pharma__gold { margin-top:48px; padding-left:32px; border-left:3px solid #ff5113; display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px) { .datajoint-solutions-pharma__gold { grid-template-columns:3fr 2fr; gap:48px; padding-left:32px; } }
@media (max-width:768px) { .datajoint-solutions-pharma__gold { padding-left:20px; } }
.datajoint-solutions-pharma__gold-label { margin:0 0 14px; color:#ff5113; font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif); letter-spacing:.12em; text-transform:uppercase; }
.datajoint-solutions-pharma__gold-copy { margin:0; color:#011627; font:300 19px/1.55 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }
.datajoint-solutions-pharma__gold-note { margin:0 0 10px; color:#4a5568; font:italic 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif); }
.datajoint-solutions-pharma__gold-link { color:#ff5113; font:700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif); }
