/**
 * Detail semantic DOM contract v1 presentation.
 *
 * One Theme-owned layer styles every migrated clinical-detail document. The
 * page document owns semantic content and section order only; it does not
 * carry a page-specific geometry island.
 */

body:has(.brb-detail[data-page-type="clinical-detail"]) .site-main {
	width: 100%;
	max-width: none;
}

.brb-detail[data-page-type="clinical-detail"] {
	--brb-detail-bg: #fbf8f3;
	--brb-detail-surface: #fffdf9;
	--brb-detail-soft: #f6efe6;
	--brb-detail-ink: #2c2926;
	--brb-detail-muted: #70665e;
	--brb-detail-line: #e7ddd1;
	--brb-detail-brand: #7d1a33;
	--brb-detail-brand-soft: #f5e9ec;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	background: var(--brb-detail-bg);
	color: var(--brb-detail-ink);
	font-family: var(--brb-font-body);
	line-height: 1.75;
	overflow-x: clip;
}

.brb-detail[data-page-type="clinical-detail"] :where(h1, h2, h3, p) {
	margin-block-start: 0;
}

.brb-detail[data-page-type="clinical-detail"] :where(a) {
	color: var(--brb-detail-brand);
}

.brb-detail[data-page-type="clinical-detail"] > .brb-internal-hero,
.brb-detail[data-page-type="clinical-detail"] > .detail-hero {
	width: 100%;
	margin: 0;
}

/* Exact-body documents keep this approved Hero outside their legacy main.
 * Match that same Hero without applying semantic BODY rules to legacy content. */
.brb-detail[data-page-type="clinical-detail"] > .detail-hero,
.site-main .detail-hero {
	--brb-detail-brand: #7d1a33;
	width: 100%;
	margin: 0;
	font-family: var(--brb-font-body);
	background:
		radial-gradient(circle at 77% 28%, rgba(125, 26, 51, 0.052), transparent 31%),
		linear-gradient(178deg, #fdfaf5 0%, #f7f0e6 100%);
	border-bottom: 1px solid #eee5da;
}

.brb-detail[data-page-type="clinical-detail"] .detail-hero-inner,
.site-main .detail-hero .detail-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(22.5rem, 0.88fr);
	align-items: end;
	gap: clamp(3.25rem, 7vw, 5.75rem);
	width: min(calc(100% - 2 * var(--brb-layout-padding-mobile)), var(--brb-layout-content));
	margin-inline: auto;
	padding-block: clamp(4.25rem, 7vw, 6rem) clamp(4.375rem, 7.5vw, 6.5rem);
}

.brb-detail[data-page-type="clinical-detail"] .hero-eyebrow,
.site-main .detail-hero .hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 31px;
	padding: 4px 11px;
	border: 1px solid #e3d7c6;
	border-radius: 9px;
	background: rgba(255, 253, 249, 0.76);
	color: #9b7a52;
	font-size: 11.5px;
	line-height: 1.8;
}

.brb-detail[data-page-type="clinical-detail"] .hero-eyebrow::before,
.site-main .detail-hero .hero-eyebrow::before {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--brb-detail-brand);
	content: "";
}

.brb-detail[data-page-type="clinical-detail"] .detail-hero h1,
.site-main .detail-hero h1 {
	font-family: var(--brb-font-display);
	max-width: 10.5em;
	margin: 23px 0 0;
	font-size: clamp(2.375rem, 4vw, 3.125rem);
	font-weight: 500;
	line-height: 1.34;
	letter-spacing: -0.042em;
}

.brb-detail[data-page-type="clinical-detail"] .detail-hero h1 :where(span, em),
.brb-detail[data-page-type="clinical-detail"] .detail-hero h1 > em,
.site-main .detail-hero h1 :where(span, em) {
	color: var(--brb-detail-brand);
	font-style: normal;
}

.brb-detail[data-page-type="clinical-detail"] .detail-hero-lead,
.site-main .detail-hero .detail-hero-lead {
	max-width: 39em;
	margin: 25px 0 0;
	color: #5f544c;
	font-size: 15px;
	line-height: 1.9;
}

.brb-detail[data-page-type="clinical-detail"] .detail-hero .doctor-note,
.site-main .detail-hero .doctor-note {
	position: relative;
	padding: 29px 29px 27px;
	border: 1px solid #e2d5c5;
	border-top: 2px solid var(--brb-detail-brand);
	border-radius: 6px;
	background: rgba(255, 253, 249, 0.82);
}

.brb-detail[data-page-type="clinical-detail"] .doctor-note-label,
.site-main .detail-hero .doctor-note-label {
	margin-bottom: 12px;
	color: var(--brb-detail-brand);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
}

.brb-detail[data-page-type="clinical-detail"] .detail-hero .doctor-note p,
.site-main .detail-hero .doctor-note p {
	margin: 0;
	color: #473d37;
	font-family: var(--brb-font-display);
	font-size: 17px;
	line-height: 1.8;
}

.brb-detail-section {
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	background: var(--brb-detail-surface);
	border-bottom: 1px solid color-mix(in srgb, var(--brb-detail-line) 72%, transparent);
}

.brb-detail-section.is-soft {
	background: var(--brb-detail-soft);
}

.brb-detail-section.is-deep,
.brb-detail-section.is-clinical-advice {
	background: linear-gradient(135deg, #4c1223, #71172f 70%, #7d1a33);
	color: #fffaf5;
}

.brb-detail-section > :first-child {
	width: min(calc(100% - 36px), 1120px);
	margin-inline: auto;
}

.brb-detail-section :where(.section-head, .section-heading, .sec-head) {
	max-width: 760px;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.brb-detail-section :where(.section-head, .section-heading, .sec-head) > :where(span, .eyebrow, .section-eyebrow, .sec-k):first-child,
.brb-detail-section > :first-child > :where(span, .eyebrow, .section-eyebrow, .sec-k):first-child {
	display: inline-block;
	margin-bottom: 0.7rem;
	color: var(--brb-detail-brand);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.brb-detail-section h2 {
	max-width: 21em;
	margin-bottom: 0.75rem;
	font-size: clamp(1.75rem, 3.6vw, 2.55rem);
	font-weight: 500;
	line-height: 1.34;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.brb-detail-section :where(.section-head, .section-heading, .sec-head) p {
	max-width: 48em;
	color: var(--brb-detail-muted);
	font-size: 1rem;
	line-height: 1.8;
}

.brb-detail-section.is-deep :where(h2, h3, p, li),
.brb-detail-section.is-clinical-advice :where(h2, h3, p, li) {
	color: inherit;
}

.brb-detail-section.is-deep :where(.eyebrow, .section-eyebrow, .sec-k),
.brb-detail-section.is-clinical-advice :where(.eyebrow, .section-eyebrow, .sec-k) {
	color: #f0c8d1;
}

.brb-detail-section :where(.cards-4, .summary-grid, .fit-grid, .step-grid, .mini-grid, .care-grid, .check-grid) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.brb-detail-section :where(.card, .summary-item, .fit-box, .fit-card, .step, .step-card, .mini, .mini-card, .care, .care-card, .check-card, .layer-box, .design-explain, .text-box, .trust-card, .advice, .risk-callout, .deep-box) {
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	border: 1px solid var(--brb-detail-line);
	border-radius: 12px;
	background: rgba(255, 253, 249, 0.94);
	box-shadow: 0 4px 18px rgba(58, 43, 32, 0.045);
	color: var(--brb-detail-ink);
}

.brb-detail-section :where(.card, .summary-item, .fit-box, .fit-card, .step, .step-card, .mini, .mini-card, .care, .care-card, .check-card) h3 {
	margin-bottom: 0.55rem;
	font-size: 1.06rem;
	font-weight: 560;
	line-height: 1.45;
}

.brb-detail-section :where(.card, .summary-item, .fit-box, .fit-card, .step, .step-card, .mini, .mini-card, .care, .care-card, .check-card) p,
.brb-detail-section :where(.advice, .risk-callout, .deep-box, .design-explain, .text-box) p {
	margin-bottom: 0;
	color: var(--brb-detail-muted);
	font-size: 0.93rem;
	line-height: 1.72;
}

.brb-detail-section :where(.card, .summary-item, .step, .step-card) > :where(b, span):first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	margin-bottom: 0.7rem;
	padding-inline: 0.45rem;
	border-radius: 8px;
	background: var(--brb-detail-brand-soft);
	color: var(--brb-detail-brand);
	font-size: 0.72rem;
	font-weight: 700;
}

.brb-detail-section ul {
	margin: 0.85rem 0 0;
	padding-left: 1.25rem;
}

.brb-detail-section li + li {
	margin-top: 0.45rem;
}

.brb-detail-section :where(.compare-wrap, .cmp-scroll, .table-scroll) {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--brb-detail-line);
	border-radius: 10px;
	background: var(--brb-detail-surface);
	-webkit-overflow-scrolling: touch;
}

.brb-detail-section table {
	width: 100%;
	border-collapse: collapse;
	background: var(--brb-detail-surface);
}

.brb-detail-section :where(th, td) {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid var(--brb-detail-line);
	font-size: 0.88rem;
	line-height: 1.55;
	text-align: left;
	vertical-align: top;
}

.brb-detail-section th {
	color: #403630;
	font-weight: 620;
}

.brb-detail-section[data-section="pricing"] {
	font-variant-numeric: tabular-nums;
}

.brb-detail-section :where(.price-card, .price-component) {
	max-width: 860px;
	margin-inline: auto;
	padding: clamp(1.1rem, 3vw, 2rem);
	border: 1px solid var(--brb-detail-line);
	border-radius: 12px;
	background: var(--brb-detail-surface);
}

.brb-detail-section .price-group {
	margin: 1.35rem 0 0.45rem;
	color: #3f3530;
	font-weight: 650;
}

.brb-detail-section .price-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.4rem 0.75rem;
	align-items: baseline;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--brb-detail-line);
}

.brb-detail-section .price-row .name {
	grid-column: 1 / -1;
	font-weight: 560;
}

.brb-detail-section .price-row :where(.ev-label, .nm-label) {
	color: var(--brb-detail-muted);
	font-size: 0.75rem;
}

.brb-detail-section .price-row :where(.event, .normal) {
	color: var(--brb-detail-brand);
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.brb-detail-section :where(.price-note, .price-conditions) {
	max-width: 860px;
	margin: 1rem auto 0;
	padding: 0.85rem 1rem;
	border: 1px solid #eadcc9;
	border-radius: 9px;
	background: #fff9ef;
	color: #655950;
	font-size: 0.82rem;
	line-height: 1.65;
}

.brb-detail-section :where(.faq, .faq-list) {
	display: grid;
	gap: 9px;
}

.brb-detail-section details,
.brb-detail-section .faq-item {
	border: 1px solid var(--brb-detail-line);
	border-radius: 10px;
	background: var(--brb-detail-surface);
	overflow: clip;
}

.brb-detail-section summary,
.brb-detail-section .faq-item > :first-child {
	display: block;
	position: relative;
	padding: 1rem 3rem 1rem 1.1rem;
	color: #403630;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
}

.brb-detail-section details > :not(summary),
.brb-detail-section .faq-a {
	padding: 0 1.1rem 1.1rem;
	color: var(--brb-detail-muted);
}

.brb-detail-section .blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.brb-detail-section .blog-card {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem;
	border: 1px solid var(--brb-detail-line);
	border-radius: 10px;
	background: var(--brb-detail-surface);
	text-decoration: none;
}

.brb-detail-section .blog-ic {
	display: inline-flex;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 9px;
	background: var(--brb-detail-brand);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

@media ( min-width: 42.5625rem ) {
	.brb-detail-section > :first-child {
		width: min(calc(100% - 48px), 1120px);
	}

	.brb-detail-section :where(.cards-4, .summary-grid, .mini-grid, .care-grid, .check-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.brb-detail-section :where(.fit-grid, .step-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.brb-detail-section .blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.brb-detail-section .price-row {
		grid-template-columns: minmax(0, 1fr) auto minmax(90px, auto) auto minmax(90px, auto);
	}

	.brb-detail-section .price-row .name {
		grid-column: auto;
	}
}

@media ( min-width: 64rem ) {
	.brb-detail-section :where(.cards-4, .summary-grid, .mini-grid) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.brb-detail-section .care-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.brb-detail-section .blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media ( max-width: 47.5rem ) {
	.brb-detail[data-page-type="clinical-detail"] .detail-hero-inner,
	.site-main .detail-hero .detail-hero-inner {
		grid-template-columns: 1fr;
		gap: 1.4rem;
		width: min(calc(100% - 36px), var(--brb-layout-content));
		padding-block: 2.5rem 3rem;
	}

	.brb-detail[data-page-type="clinical-detail"] .hero-eyebrow,
	.site-main .detail-hero .hero-eyebrow {
		display: none;
	}

	.brb-detail[data-page-type="clinical-detail"] .detail-hero h1,
	.site-main .detail-hero h1 {
		margin-top: 0;
		font-size: 31px;
		line-height: 1.43;
	}

	.brb-detail[data-page-type="clinical-detail"] .detail-hero-lead,
	.site-main .detail-hero .detail-hero-lead {
		margin-top: 19px;
		font-size: 14px;
		line-height: 1.86;
	}

	.brb-detail[data-page-type="clinical-detail"] .detail-hero .doctor-note,
	.site-main .detail-hero .doctor-note {
		padding: 20px 18px;
	}

	.brb-detail-section :where(th, td) {
		padding: 0.72rem 0.55rem;
		font-size: 0.78rem;
		word-break: keep-all;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.brb-detail[data-page-type="clinical-detail"] * {
		scroll-behavior: auto !important;
	}
}