/* ClearLab AI uses the Naked Compound light design system.
   Values and component proportions follow project/style.css and project/pages.css. */
:root {
  --bg: #f7f3ec;
  --bg-elev: #fdfbf6;
  --surface: #fff;
  --ink: #1a1714;
  --ink-soft: #3e3933;
  --ink-muted: #655e55;
  --line: #e6ddcf;
  --line-strong: #d6ccbb;
  --accent: #c96442;
  --accent-deep: #a64d2e;
  --accent-soft: #f4e2d8;
  --mint: #d8e6d5;
  --sky: #d7e3ec;
  --butter: #f4e5b8;
  --rose: #f0d4cb;
  --font-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --nav-h: 64px;
  --muted: var(--ink-muted);
  --red: var(--accent);
  --red-hover: var(--accent-deep);
  --red-pale: var(--accent-soft);
  --teal-pale: var(--mint);
  --amber-pale: var(--butter);
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
}
p { color: var(--ink-soft); }
:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, label:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.shell { width: min(100% - 48px, 1200px); }

/* Shared Naked Compound header and action proportions. */
.site-header {
  height: var(--nav-h);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { gap: var(--s-4); }
.brand img { width: 225px; }
.site-header nav { gap: 2px; font-size: 14px; font-weight: 500; }
.site-header nav a {
  border-radius: var(--r-pill);
  padding: 8px 13px;
  color: var(--ink-soft);
}
.site-header nav a:hover { background: var(--bg-elev); color: var(--ink); }
.skip-link { position: fixed; z-index: 70; top: 8px; left: 8px; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: var(--r-sm); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.clearlab-header.site-header { position: sticky; top: 0; z-index: 50; height: auto; padding-top: env(safe-area-inset-top, 0px); }
.clearlab-header .header-inner { height: var(--nav-h); gap: 16px; }
.header-brands, .header-tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-brands { flex: 0 0 auto; }
.nc-wordmark, .tool-wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); white-space: nowrap; line-height: 1; }
.nc-wordmark { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.nc-wordmark img { display: block; width: 30px; height: 30px; border-radius: 8px; }
.nc-wordmark em, .tool-wordmark em { color: var(--accent); font-style: normal; font-weight: 400; }
.brand-divider { width: 1px; height: 25px; margin-inline: 4px; background: var(--line-strong); }
.tool-wordmark { font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.tool-wordmark img { display: block; width: 28px; height: 28px; }
.clearlab-header .header-nav { display: flex; gap: 2px; margin-left: auto; }
.clearlab-header .header-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--r-pill); color: var(--ink-soft); white-space: nowrap; font-size: 14px; font-weight: 500; }
.clearlab-header .header-nav a:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.clearlab-header .header-action { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; }
.header-menu { display: none; position: relative; }
.header-menu summary { display: flex; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; list-style: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 500; transition: background .18s ease, border-color .18s ease; }
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu summary span { display: none; }
.header-menu summary svg { width: 20px; height: 20px; }
.header-menu summary .close-icon { display: none; }
.header-menu[open] summary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.header-menu[open] summary .menu-icon { display: none; }
.header-menu[open] summary .close-icon { display: block; }
.header-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.clearlab-header .header-menu nav { position: absolute; top: calc(100% + 10px); right: 0; display: flex; flex-direction: column; gap: 2px; width: min(320px, calc(100vw - 32px)); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 8px 16px rgba(26, 23, 20, .1); }
.clearlab-header .header-menu:not([open]) nav { display: none; }
.clearlab-header .header-menu nav a { display: flex; align-items: center; min-height: 44px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.clearlab-header .header-menu nav a:hover { background: var(--bg-elev); color: var(--ink); }
.header-action, .button, .small-button, .filter, .category-button {
  font-family: var(--font-sans);
  font-weight: 500;
}
.header-action, .button { border-radius: var(--r-pill); }
.header-action { padding: 9px 16px; font-size: 13.5px; }
.button { padding: 12px 20px; font-size: 14px; }
.button:hover { transform: none; }
.button:active, .header-action:active { transform: scale(.97); }
.button-primary { background: var(--ink); color: var(--bg); }
.button-primary:hover, .header-action:hover, .button-quiet:hover {
  background: var(--accent);
  color: #fff;
}
.text-link { font-size: 14px; font-weight: 500; border-color: var(--line-strong); }
.text-link:hover { border-color: var(--accent); }

/* Landing page hierarchy. */
.hero { gap: var(--s-8); padding-block: var(--s-9) var(--s-8); }
.eyebrow, .section-index, .report-mode, .preview-top,
.preview-heading small, .reading-index, .guides-grid span,
.process-grid article > span {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .08em;
}
.eyebrow, .section-index, .report-mode { font-size: 12px; }
.eyebrow { margin-bottom: var(--s-4); }
.eyebrow-line { height: 1px; width: 24px; }
.hero h1 {
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin-bottom: var(--s-5);
}
.hero h1 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.02em;
}
.hero-copy > p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; margin-bottom: var(--s-6); }
.hero-actions { gap: var(--s-3); }
.hero-actions .button { padding: 14px 24px; font-size: 15px; }
.trust-line { margin-top: var(--s-6); color: var(--ink-muted); font-size: 13px; font-weight: 400; }
.hero-visual {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px rgba(26, 23, 20, .09), 0 4px 12px rgba(26, 23, 20, .05);
  padding: var(--s-6);
}
.preview-heading { padding: var(--s-5) 0; }
.preview-heading strong { font-weight: 500; letter-spacing: -.02em; }
.preview-reading > div, .preview-reading > strong { font-weight: 500; }
.reading-index { border-radius: var(--r-sm); background: var(--bg-elev); }
.range-track { margin-top: var(--s-5); background: linear-gradient(90deg, var(--mint) 0 47%, var(--butter) 47% 78%, var(--rose) 78%); }
.range-labels { margin-bottom: var(--s-2); }
.preview-range-context { margin: 0 0 var(--s-5); color: var(--ink-muted); font-size: 11px; line-height: 1.45; }
.preview-note { border-radius: var(--r-sm); background: var(--butter); font-weight: 500; }
.preview-question { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.preview-question > span { color: var(--accent-deep); font: 500 10px var(--font-mono); letter-spacing: .06em; }
.preview-question p { margin: var(--s-2) 0 0; max-width: 38ch; color: var(--ink); font-size: 14px; line-height: 1.45; }
.preview-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); text-align: left; }
.preview-foot a { color: var(--accent-deep); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.preview-foot a:hover { color: var(--ink); }
.preview-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.upload-band, .process-section, .report-section, .guides-section { padding-block: var(--s-9); }
.upload-band { background: var(--ink); }
.upload-intro h2, .section-heading h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  max-width: 22ch;
}
.upload-intro h2 { margin: var(--s-4) 0 var(--s-5); }
.upload-intro p { color: #e0d7c9; font-size: 17px; }
.upload-intro ul { margin-top: var(--s-6); gap: var(--s-3); }
.upload-intro li { font-weight: 500; }
.upload-panel { background: var(--surface); border-radius: var(--r-md); padding: var(--s-5); }
.dropzone {
  background: var(--bg-elev);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  min-height: 184px;
}
.dropzone:hover, .dropzone.drag-over { background: var(--accent-soft); border-color: var(--accent); }
.dropzone strong { font-weight: 500; }
.upload-symbol { border-radius: var(--r-sm); }
.button-quiet { background: var(--ink); }
.privacy-note { color: var(--ink-muted); }

/* Consent stays with the upload action; the notice stays with the readout. */
#privacy-note { margin: 12px 0 18px; font-size: 12px; line-height: 1.5; }
.clearlab-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  color: var(--ink-soft);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.clearlab-consent input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent-deep);
}
.analyze-btn { width: 100%; margin-top: 14px; }
.analyze-btn:disabled,
.analyze-btn:disabled:hover {
  background: var(--line-strong);
  color: var(--ink-muted);
  cursor: not-allowed;
  transform: none;
}
.clearlab-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: var(--s-4);
  padding: 17px 20px;
  color: #433512;
  background: #f8efda;
  border: 1px solid #d8c78f;
  border-radius: var(--r-sm);
}
.clearlab-disclaimer svg { flex: 0 0 22px; margin-top: 1px; }
.clearlab-disclaimer p { margin: 0; color: inherit; font-size: 14px; line-height: 1.55; }
.clearlab-disclaimer strong { font-weight: 700; }
[data-theme="dark"] .clearlab-consent { color: #f3eee6; background: #29231d; border-color: #5a5044; }
[data-theme="dark"] .clearlab-disclaimer { color: #f8edcf; background: #38311f; border-color: #75643b; }

.section-heading { margin-bottom: var(--s-7); gap: var(--s-6); }
.section-heading h2 { margin-top: var(--s-3); }
.section-heading p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.report-app { border-radius: var(--r-md); background: var(--surface); }
.report-toolbar { padding: var(--s-5) var(--s-6); }
.report-toolbar h3 { font-size: 21px; font-weight: 500; }
.small-button { border-color: var(--line-strong); border-radius: var(--r-pill); padding: 8px 12px; }
.summary-strip, .report-aside { background: var(--bg-elev); }
.summary-item { padding: var(--s-4) var(--s-6); }
.summary-item strong, .result-value { font-weight: 500; }
.summary-item span { font-weight: 400; }
.report-aside { padding: var(--s-5) var(--s-4); }
.report-aside h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
}
.category-button { border-radius: var(--r-sm); color: var(--ink-soft); }
.category-button.active, .category-button:hover { background: var(--surface); }
.report-main { padding: var(--s-5) var(--s-6); }
.filter { border-radius: var(--r-pill); color: var(--ink-soft); }
.result-row { padding: var(--s-6) 0; }
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.result-identity { min-width: 0; }
.result-title { font-weight: 500; font-size: 19px; line-height: 1.2; }
.result-plain { color: var(--ink-soft); font-size: 13px; line-height: 1.45; margin: 5px 0 0; }
.result-value small { color: var(--ink-muted); }
.badge { border-radius: var(--r-pill); font: 500 11px var(--font-mono); }
.badge.in-range { background: var(--mint); color: #2d5c3d; }
.badge.out-of-range { background: var(--butter); color: #6b4e0f; }
.badge.unverified { background: var(--bg-elev); color: var(--ink-soft); }
.result-measure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); }
.result-measure > div { min-width: 0; padding: var(--s-3) var(--s-4); }
.result-measure > div + div { border-left: 1px solid var(--line); }
.result-kicker { display: block; margin-bottom: 5px; color: var(--ink-muted); font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.result-value { display: block; color: var(--ink); font-size: 28px; line-height: 1.2; white-space: normal; }
.result-value small { font-size: 13px; font-weight: 400; white-space: nowrap; }
.result-range { display: block; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.result-explanation { margin: var(--s-3) 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.result-questions { margin-top: var(--s-4); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
.result-questions strong { font: 500 11px var(--font-mono); color: var(--accent-deep); }
.result-questions p { margin-top: 5px; font-size: 14px; line-height: 1.45; }
.result-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: var(--s-3); color: var(--ink-muted); font-size: 12px; }
.result-foot a { color: var(--accent-deep); font-weight: 500; white-space: nowrap; }
.result-foot a:hover { text-decoration: underline; }
.doctor-questions { padding: var(--s-6); border-top: 1px solid var(--line); background: var(--bg-elev); }
.doctor-questions[hidden] { display: none; }
.doctor-questions-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); }
.doctor-questions h3 { margin: 5px 0 0; font-size: 23px; font-weight: 500; }
.doctor-questions-heading p { max-width: 34ch; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.doctor-questions ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; list-style: none; counter-reset: questions; }
.doctor-questions li { min-width: 0; counter-increment: questions; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.doctor-questions li::before { content: counter(questions, decimal-leading-zero); display: block; margin-bottom: var(--s-4); color: var(--accent-deep); font: 500 11px var(--font-mono); }
.doctor-questions li strong { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.doctor-questions li span { display: block; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.add-result { border-radius: var(--r-sm); font-weight: 500; }
.manual-entry { background: var(--bg-elev); padding: var(--s-5); border-radius: var(--r-sm); }
.manual-entry label { font-weight: 500; }
.manual-entry input, .manual-entry select { border-color: var(--line-strong); border-radius: var(--r-sm); padding: 8px 12px; }
.manual-entry button { justify-content: center; }

.process-section { background: var(--bg-elev); }
.process-grid { gap: var(--s-6); margin-top: var(--s-7); }
.process-grid article { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.process-grid h3 { font-size: 20px; margin: var(--s-5) 0 var(--s-3); }
.process-grid p { color: var(--ink-soft); }
.reader-answers { padding-block: var(--s-9); }
.reader-answers .section-heading { margin-bottom: var(--s-5); }
.reader-answers-list { border-top: 1px solid var(--line-strong); }
.reader-answers-list article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-6); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.reader-answers-list h3 { margin: 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.2; font-weight: 600; }
.reader-answers-list p { margin: 0; max-width: 62ch; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.guides-grid { gap: var(--s-4); }
.guides-grid a {
  min-height: 264px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.guides-grid h3 { font-size: 20px; font-weight: 500; margin: var(--s-6) 0 var(--s-3); }
.guides-grid b { font-weight: 500; }
.guides-grid .guide-coming-card {
  min-height: 264px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.guide-coming-card h3 { font-size: 20px; font-weight: 500; margin: var(--s-6) 0 var(--s-3); }
.guide-coming-card p { color: var(--ink-soft); }
.guide-coming-card b { margin-top: auto; color: var(--accent-deep); font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.coming-soon-hero { min-height: min(610px, 72vh); display: flex; align-items: center; }
.coming-soon-hero .shell { width: min(100% - 48px, 1200px); }
.coming-soon-actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-6); }

.footer { background: var(--bg-elev); border-top: 1px solid var(--line); color: var(--ink); }
.footer-top { padding-block: var(--s-8); gap: var(--s-8); }
.footer .brand img { width: 225px; }
.footer p { color: var(--ink-muted); }
.footer-top strong { font: 500 12px var(--font-mono); letter-spacing: .05em; }
.parent-link { color: var(--accent-deep); font-weight: 500; }
.footer-bottom { color: var(--ink-muted); border-color: var(--line); }
.affiliation-note { padding: 0 0 var(--s-5); font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.clearlab-footer.footer { padding-top: var(--s-8); }
.clearlab-footer .footer-top { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1.8fr); gap: var(--s-8); padding: 0 0 var(--s-7); }
.clearlab-footer .footer-brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-width: 0; }
.clearlab-footer .footer-brand-block > strong { margin-top: var(--s-3); font: 500 20px/1.2 var(--font-sans); letter-spacing: -.02em; }
.clearlab-footer .footer-brand-block p { max-width: 36ch; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.clearlab-footer .footer-link-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.clearlab-footer .footer-link-groups > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.clearlab-footer .footer-link-groups h2 { margin: 0 0 6px; color: var(--ink-muted); font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.clearlab-footer .footer-link-groups a { color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.clearlab-footer .footer-link-groups a:hover, .clearlab-footer .footer-bottom a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.clearlab-footer .footer-medical-note { max-width: none; margin: 0 0 var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.clearlab-footer .footer-medical-note strong { color: var(--ink); font-weight: 600; }
.clearlab-footer .footer-bottom { padding: 0 0 var(--s-3); border: 0; font-size: 13px; }
.clearlab-footer .affiliation-note { margin: 0; padding: 0 0 var(--s-6); font-size: 12px; }

/* Guides use the same page header and reading measure as Naked Compound docs. */
.guide-hero {
  padding: calc(var(--s-8) + var(--s-4)) 0 var(--s-7);
  background: radial-gradient(900px 360px at 80% -20%, color-mix(in oklab, var(--accent-soft) 60%, transparent), transparent 70%),
              linear-gradient(180deg, var(--bg-elev), var(--bg) 85%);
}
.guide-hero .shell { max-width: 1200px; }
.breadcrumb {
  font: 400 12px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.guide-hero h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 500;
  line-height: 1.02;
  max-width: 22ch;
  margin: var(--s-4) 0;
}
.guide-hero p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; max-width: 58ch; }
.guide-main { width: min(100% - 48px, 1200px); margin: var(--s-8) auto var(--s-9); grid-template-columns: minmax(0, 68ch) 240px; gap: var(--s-8); }
.guide-body { color: var(--ink-soft); }
.guide-body h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; margin: 2.4em 0 var(--s-4); }
.guide-body p, .guide-body li { color: var(--ink-soft); }
.guide-body a { color: var(--accent-deep); }
.guide-callout { background: var(--bg-elev); border-left-color: var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-5); }
.guide-table th { font: 500 12px var(--font-mono); color: var(--ink-muted); }
.guide-hero .guide-byline { margin: var(--s-5) 0 0; color: var(--ink-muted); font: 500 12px/1.5 var(--font-mono); }
.guide-answer { margin-bottom: var(--s-7); padding: var(--s-5); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm); }
.guide-body .guide-answer h2 { margin: 0 0 var(--s-3); font-size: clamp(22px, 2.5vw, 29px); line-height: 1.2; }
.guide-body .guide-answer p { margin: 0; font-size: 17px; line-height: 1.55; }
.guide-aside { border-top: 2px solid var(--accent); top: calc(var(--nav-h) + var(--s-5)); }
.guide-aside strong { font-weight: 500; font-size: 14px; }
.guide-aside .button { justify-content: center; }

@media (max-width: 900px) {
  .hero { gap: var(--s-7); padding-block: var(--s-8); }
  .guide-main { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s-6); }
  .clearlab-header .header-nav { display: none; }
  .header-menu { display: block; }
  .header-tools { margin-left: auto; }
  .clearlab-footer .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 760px) {
  .guide-main { grid-template-columns: 1fr; }
  .guide-aside { position: static; }
}
@media (max-width: 620px) {
  :root { --nav-h: 60px; }
  .shell, .guide-main { width: min(100% - 32px, 1200px); }
  .brand img { width: 190px; }
  .header-action { padding: 8px 12px; font-size: 12px; }
  .hero { padding-block: var(--s-8); }
  .hero h1 { font-size: clamp(42px, 11vw, 64px); }
  .hero-visual { padding: var(--s-5); box-shadow: 0 8px 24px rgba(26, 23, 20, .08); }
  .upload-band, .process-section, .report-section, .reader-answers, .guides-section { padding-block: var(--s-8); }
  .section-heading { margin-bottom: var(--s-6); }
  .report-toolbar { padding: var(--s-4); }
  .report-main { padding: var(--s-4); }
  .summary-item { padding: var(--s-4) var(--s-3); }
  .guides-grid a { min-height: 220px; }
  .footer .brand img { width: 225px; }
  .clearlab-header .header-action { display: none; }
  .header-brands { gap: 9px; }
  .brand-divider { margin-inline: 1px; }
  .nc-wordmark { font-size: 15px; }
  .tool-wordmark { font-size: 16px; }
  .clearlab-header .tool-wordmark img { display: none; }
  .clearlab-footer.footer { padding-top: var(--s-7); }
  .clearlab-footer .footer-top { gap: var(--s-7); }
  .clearlab-footer .footer-link-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .clearlab-footer .footer-medical-note { margin-bottom: var(--s-4); }
  .guide-hero { padding: var(--s-8) 0 var(--s-7); }
  .guide-main { margin-top: var(--s-7); }
}

/* On phones, the reader is the focus. Keep its controls and values inside the card. */
@media (max-width: 620px) {
  #upload, #sample, #how-it-works, #guides { scroll-margin-top: calc(var(--nav-h) + 12px); }
  .hero { padding-block: 46px 48px; }
  .hero h1 { max-width: 12ch; font-size: clamp(38px, 10.5vw, 48px); }
  .hero-copy > p { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { min-height: 48px; }
  .trust-line { margin-top: 24px; }
  .hero-visual { display: none; }

  .upload-band, .process-section, .report-section, .reader-answers, .guides-section { padding-block: 48px; }
  .reader-answers-list article { grid-template-columns: 1fr; gap: 9px; padding-block: 22px; }
  .reader-answers-list p { font-size: 15px; }
  .upload-grid { gap: 22px; }
  .upload-intro h2 { font-size: 32px; margin: 12px 0 14px; }
  .upload-intro p { font-size: 15px; line-height: 1.5; margin-bottom: 0; }
  .upload-intro ul { display: none; }
  .dropzone { min-height: 150px; padding: 16px; }
  .clearlab-disclaimer { padding: 14px; gap: 10px; }
  .clearlab-disclaimer p { font-size: 13px; }

  .report-layout { grid-template-columns: minmax(0, 1fr); }
  .report-aside, .report-main { min-width: 0; }
  .report-toolbar { gap: 12px; }
  .report-toolbar > div:first-child { min-width: 0; }
  .report-toolbar-actions { flex: 0 0 auto; }
  .report-toolbar-actions .small-button { min-height: 44px; white-space: nowrap; }
  .summary-item { min-width: 0; padding: 13px 10px; }
  .summary-item strong { font-size: 23px; }
  .summary-item span { display: block; font-size: 11px; line-height: 1.25; }

  .report-aside { padding: 16px 0 8px; }
  .report-aside h4 { padding: 0 16px; margin-bottom: 10px; }
  #category-list {
    display: flex;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }
  #category-list::-webkit-scrollbar { display: none; }
  .category-button { flex: 0 0 auto; gap: 9px; min-height: 44px; border: 1px solid var(--line); }
  .category-button.active { box-shadow: none; background: var(--ink); border-color: var(--ink); color: #fff; }
  .report-main { padding: 16px; }
  .result-bar { flex-wrap: wrap; }
  .filter { min-height: 44px; }
  .result-bar > span { margin-left: auto; }
  .result-head { gap: 8px 10px; }
  .result-head > div:first-child { min-width: 0; }
  .result-measure { grid-template-columns: minmax(0, 1fr); }
  .result-measure > div { padding: 12px 14px; }
  .result-measure > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .result-value { font-size: 26px; }
  .result-questions { overflow-wrap: anywhere; }
  .doctor-questions { padding: 20px 16px; }
  .doctor-questions-heading { display: block; }
  .doctor-questions h3 { font-size: 21px; }
  .doctor-questions-heading p { margin-top: 7px; }
  .doctor-questions ol { grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 16px; }
  .doctor-questions li { padding: 14px; }
  .doctor-questions li::before { margin-bottom: 9px; }
  .add-result { min-height: 44px; }
  .manual-entry { padding: 16px; }
  .manual-entry input, .manual-entry select { min-height: 44px; font-size: 16px; }
}

@media (max-width: 360px) {
  .clearlab-header .header-inner { gap: 8px; }
  .clearlab-header .header-brands { gap: 8px; }
  .brand img { width: 160px; }
  .header-action { padding: 8px 10px; font-size: 11px; }
  .hero h1 { font-size: 37px; }
  .report-toolbar { flex-direction: column; align-items: stretch; }
  .report-toolbar-actions { display: flex; }
  .summary-item { padding-inline: 8px; }
}

@media (max-width: 480px) {
  .clearlab-header .nc-wordmark span { display: none; }
}