/* The sample report: the report's own sections and voice, in the site's
   type register. One document, read top to bottom, with the report's tab
   bar as a jump list. */
.sample-page { background: #f5f7f8; color: var(--ink-deep); }
.sample-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sample-skip { position: fixed; top: 8px; left: 12px; z-index: 1000; padding: 12px 18px; background: #fff; color: #0d222e; transform: translateY(-160%); }
.sample-skip:focus { transform: none; }
.sample-page :is(a, button, [tabindex]):focus-visible { outline: 3px solid #1779a7; outline-offset: 4px; }

/* ---- Intro: clear of the fixed glass nav at every width ---- */
body.site-v6 main > section.sample-intro { background: var(--deep); color: #fff; padding: clamp(148px, 19vh, 184px) 0 clamp(44px, 5vw, 64px); }
.sample-eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--petrol-text, #1674a1); margin: 0; }
.sample-intro .sample-eyebrow { color: #a4d5ea; }
.sample-intro h1 { max-width: 14ch; font: 400 clamp(38px, 5vw, 62px)/1.06 var(--font-serif); letter-spacing: -.02em; margin: 14px 0 18px; color: #fff; }
.sample-intro-copy { max-width: 58ch; font-size: 17px; line-height: 1.65; color: #dae8ee; }
.sample-disclaimer { max-width: 60ch; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14px; line-height: 1.65; color: #cbdce4; }
.sample-disclaimer strong { color: #fff; font-weight: 600; }

/* ---- The report's tab bar, as a jump list ---- */
.sample-workspace { padding-top: 28px; padding-bottom: clamp(56px, 7vw, 88px); }
.sample-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; padding-bottom: 2px; border-bottom: 1px solid #dbe3e7; }
.sample-tabs::-webkit-scrollbar { display: none; }
.sample-tabs a { flex-shrink: 0; padding: 12px 14px; font-size: 14px; font-weight: 500; color: #4d5c66; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -3px; transition: color .15s ease, border-color .15s ease; }
.sample-tabs a:hover { color: var(--ink-deep); border-bottom-color: #b9cdd8; }
.sample-tabs a:first-child { color: var(--ink-deep); border-bottom-color: var(--petrol); }

/* ---- The document ---- */
.sample-document { background: #fff; border: 1px solid #dce4e7; border-radius: 16px; box-shadow: 0 12px 35px rgba(13, 34, 46, .04); overflow: clip; }
.sample-document-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 34px); border-bottom: 1px solid #e1e7ea; }
.sample-document-head h2 { font: 400 clamp(24px, 2.6vw, 32px)/1.2 var(--font-serif); margin: 8px 0 0; letter-spacing: -.015em; }
.sample-tag { flex-shrink: 0; margin: 0; padding: 6px 12px; border: 1px solid #f0c9b8; border-radius: 999px; background: #fdf3ee; color: #9a3f2f; font: 600 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sample-section { padding: clamp(24px, 3vw, 34px); border-bottom: 1px solid #e6ebee; scroll-margin-top: 104px; }
.sample-section:last-child { border-bottom: 0; }
.sample-section h3 { font: 400 clamp(23px, 2.2vw, 27px)/1.2 var(--font-serif); letter-spacing: -.01em; margin: 6px 0 0; }
.sample-section h4 { font: 600 16px/1.4 var(--font-sans); margin: 0 0 8px; color: var(--ink-deep); }
.sample-section p { font-size: 15px; line-height: 1.7; color: #4b5960; margin: 0; }
.sample-section p + p { margin-top: 10px; }
.sample-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sample-aside { font-size: 13px; color: #64737d; }
.sample-lede { max-width: 64ch; margin-bottom: 20px !important; }
.sample-footnote { font-size: 13px !important; color: #64737d !important; margin-top: 16px !important; }
.sample-signed { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-deep); }
.sample-signed svg { width: 16px; height: 16px; color: var(--petrol); }
.sample-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--petrol); text-decoration: none; }
.sample-link::after { content: " \203A"; }
.sample-link:hover { color: var(--ink-deep); }
.sample-good { color: #1f7a4d; }
.sample-flag { color: #a34a38; }

/* summary */
.sample-snapshot { display: grid; grid-template-columns: 148px minmax(0, 1fr) 200px; gap: 24px; align-items: center; padding: 22px; background: #f4f8fa; border-radius: 12px; }
.sample-ring { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.sample-ring svg { width: 100%; height: 100%; display: block; }
.sample-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sample-ring-label strong { font: 500 25px/1 var(--font-mono); color: var(--ink-deep); }
.sample-ring-label span { margin-top: 5px; max-width: 74px; font: 500 9.5px/1.25 var(--font-mono); letter-spacing: .02em; color: #64737d; }
.sample-status-line { font: 500 11px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--petrol) !important; }
.sample-snapshot-copy h4 { font-size: 18px; margin: 6px 0 8px; }
.sample-snapshot-copy > p:not(.sample-status-line) { font-size: 14px; }
.sample-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; border-left: 1px solid #dfe7eb; padding-left: 20px; }
.sample-counts div { text-align: center; }
.sample-counts dt { font-size: 11px; color: #64737d; }
.sample-counts dd { margin: 6px 0 0; font: 500 24px/1 var(--font-mono); color: var(--ink-deep); }
.sample-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 24px; }
.sample-insights > div + div { border-left: 1px solid #e2e9ed; padding-left: 28px; }
.sample-insight-list { list-style: none; margin: 10px 0 0; padding: 0; }
.sample-insight-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #edf1f3; }
.sample-insight-list li:first-child { border-top: 0; padding-top: 4px; }
.sample-insight-list strong { display: block; font: 400 17px/1.2 var(--font-serif); color: var(--ink-deep); }
.sample-insight-list span:not(.sample-mini-ring) { font-size: 12.5px; color: #64737d; }
.sample-mini-ring { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; border: 4px solid #d9e9f1; box-sizing: border-box; }
.sample-mini-ring--full { border-color: var(--petrol); }
.sample-mini-ring--focus { border-color: #e9c7bd; border-top-color: #b1503f; border-right-color: #b1503f; }
.sample-next { list-style: none; margin: 24px 0 0; padding: 0; border: 1px solid #e2e9ed; border-radius: 12px; overflow: hidden; }
.sample-next li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.sample-next li + li { border-top: 1px solid #e6ebee; }
.sample-next strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink-deep); }
.sample-next span:not(.sample-chip) { font-size: 13px; color: #64737d; }
.sample-chip { flex-shrink: 0; padding: 6px 12px; border: 1px solid #c9dbe4; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--petrol); white-space: nowrap; }

/* biomarkers */
.sample-filters { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sample-filters li { padding: 6px 11px; border: 1px solid #d9e1e5; border-radius: 999px; font-size: 12.5px; color: #4d5c66; background: #fff; }
.sample-filters li.is-on { border-color: var(--petrol); color: var(--petrol); background: #edf7fc; font-weight: 600; }
.sample-panel { border: 1px solid #e2e9ed; border-radius: 12px; padding: 20px 22px 18px; }
.sample-panel + .sample-panel { margin-top: 16px; }
.sample-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.sample-panel-head h4 { font: 400 21px/1.2 var(--font-serif); margin: 0 0 4px; }
.sample-panel-head p { font-size: 13.5px; }
.sample-pill { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #eef6ef; border: 1px solid #cfe5d5; color: #1f7a4d; font-size: 12px; font-weight: 600; }
.sample-pill--flag { background: #fbf0ec; border-color: #ecc9bf; color: #a34a38; }
.sample-table-wrap { overflow-x: auto; }
.sample-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.sample-table thead th { color: #617681; font: 500 10.5px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px 10px 0; border-bottom: 1px solid #dfe7eb; }
.sample-table td, .sample-table tbody th { padding: 13px 12px 13px 0; border-bottom: 1px solid #edf1f3; vertical-align: middle; }
.sample-table tbody tr:last-child > * { border-bottom: 0; }
.sample-table tbody th { font-weight: 600; color: var(--ink-deep); }
.sample-table td:nth-child(2) { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; color: var(--ink-deep); }
.sample-table td:nth-child(2) small { font-family: var(--font-sans); font-size: 11.5px; color: #64737d; margin-left: 2px; }
.sample-table td:nth-child(3) { font-family: var(--font-mono); font-size: 13px; color: #4b5960; white-space: nowrap; }
.sample-table td:nth-child(5) { font-size: 13px; color: #64737d; white-space: nowrap; }
.sample-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #eef6ef; color: #1f7a4d; font-size: 12px; font-weight: 600; }
.sample-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sample-status--out { background: #fbf0ec; color: #a34a38; }
.sample-comment { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--petrol); background: #f4f8fa; border-radius: 0 8px 8px 0; }
.sample-comment .sample-eyebrow { margin-bottom: 4px; }
.sample-comment p:not(.sample-eyebrow) { font-size: 14px; }

/* body measurements */
.sample-measurements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.sample-measurements > div { padding: 14px 16px; background: #f5f8f9; border-radius: 10px; }
.sample-measurements dt { font-size: 12.5px; color: #64737d; }
.sample-measurements dd { font: 500 22px/1.3 var(--font-mono); color: var(--ink-deep); margin: 6px 0 0; }
.sample-measurements small { font: 400 12px var(--font-sans); color: #64737d; }
.sample-category { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }

/* recommendations */
.sample-action { position: relative; border: 1px solid #e2e9ed; border-radius: 12px; padding: 22px 24px; overflow: hidden; }
.sample-action + .sample-action { margin-top: 14px; }
.sample-action--primary::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--petrol); }
.sample-action-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sample-index { font: 500 12px/1 var(--font-mono); color: #64737d; }
.sample-priority { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #64737d; }
.sample-priority::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.sample-priority--primary { color: var(--petrol); }
.sample-priority--primary::before { background: currentColor; }
.sample-action h4 { font-size: 18px; max-width: 34ch; }
.sample-action > p { max-width: 62ch; }
.sample-why { margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf1f3; }
.sample-why .sample-eyebrow { margin-bottom: 4px; }
.sample-why p:not(.sample-eyebrow) { max-width: 62ch; font-size: 14px; }
.sample-connects { margin-top: 14px !important; font: 500 11px/1.6 var(--font-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: #64737d !important; }

/* doctor's advice */
.sample-letter { border: 1px solid #e2e9ed; border-radius: 12px; padding: 22px 24px; }
.sample-letter + .sample-letter { margin-top: 14px; }
.sample-letter-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #e6ebee; }
.sample-letter-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #eaf3f8; color: var(--petrol); }
.sample-letter-icon svg { width: 22px; height: 22px; }
.sample-letter-signer { font-size: 16px; font-weight: 600; color: var(--ink-deep) !important; margin-top: 2px !important; }
.sample-letter-section { padding-top: 18px; }
.sample-letter-section + .sample-letter-section { margin-top: 18px; border-top: 1px solid #edf1f3; }
.sample-letter-section p { max-width: 68ch; }
.sample-letter--alert { position: relative; overflow: hidden; }
.sample-letter--alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #b1503f; }
.sample-letter--alert h4 { color: #a34a38; }
.sample-letter--alert p { max-width: 68ch; }

/* additional tests */
.sample-tests { list-style: none; margin: 0; padding: 0; border: 1px solid #e2e9ed; border-radius: 12px; overflow: hidden; }
.sample-tests li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.sample-tests li + li { border-top: 1px solid #e6ebee; }
.sample-tests strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink-deep); }
.sample-tests span:not(.sample-chip) { font-size: 13px; color: #64737d; }

/* about */
.sample-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sample-about-grid > div { padding: 18px 20px; background: #f5f8f9; border-radius: 10px; }
.sample-about-grid p { font-size: 14px; }

/* close */
.sample-close { margin-top: clamp(32px, 4vw, 48px); text-align: center; }
.sample-close p { max-width: 52ch; margin: 0 auto; font-size: 17px; line-height: 1.6; color: #4b5960; }
.sample-close-ctas { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 900px) {
  .sample-snapshot { grid-template-columns: 1fr; text-align: center; }
  .sample-snapshot-copy h4 { max-width: none; }
  .sample-counts { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid #dfe7eb; }
  .sample-insights { grid-template-columns: 1fr; gap: 20px; }
  .sample-insights > div + div { border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px solid #e2e9ed; }
  .sample-measurements { grid-template-columns: repeat(2, 1fr); }
  .sample-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sample-document-head { flex-direction: column; gap: 12px; }
  .sample-section h4 { font-size: 15.5px; }
  .sample-table { min-width: 560px; }
  .sample-measurements { grid-template-columns: 1fr; gap: 8px; }
  .sample-measurements > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
  .sample-measurements dd { margin: 0; font-size: 19px; }
  .sample-measurements .sample-category { flex-basis: 100%; }
  .sample-next li, .sample-tests li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sample-action, .sample-letter { padding: 18px 16px; }
  .sample-panel { padding: 16px; }
  .sample-panel-head { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .sample-page * { transition: none !important; animation: none !important; } }
@media print {
  .sample-page .nav, .sample-page .mobile-menu, .sample-page footer, .sample-tabs, .sample-close { display: none !important; }
  body.site-v6 main > section.sample-intro { padding: 20px 0; background: #fff; color: #000; }
  .sample-intro h1, .sample-intro p, .sample-intro strong { color: #000; }
  .sample-document { border: 0; box-shadow: none; }
  .sample-section { break-inside: avoid; }
}