/* Calm, light medical-business presentation for the offline LabSheild page. */
:root {
  --ink: #17383b;
  --muted: #607a7d;
  --subtle: #8aa1a4;
  --black: #f8fcfc;
  --black-deep: #f8fcfc;
  --panel: #ffffff;
  --line: #d6e8e9;
  --line-bright: #bddbdd;
  --lime: #147b80;
  --aqua: #267f9c;
  --lavender: #557bb5;
  --yellow: #b97c2c;
  --heading: system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { background: #f8fcfc; }
body { background: #f8fcfc; color: var(--ink); }
.noise, .hero-lines { display: none; }
.shell { width: min(1140px, calc(100% - 48px)); }

.site-header {
  height: 74px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 3px 14px rgba(31, 78, 82, .06); }
.brand { color: #174d50; font-family: var(--font); font-weight: 800; letter-spacing: -.04em; }
.brand > span:last-child > span { color: #207c80; }
.brand-mark { border-color: #8fc6c8; background: #eef9f9; }
.brand-mark i { background: #207c80; }
.nav a { color: #557174; font-family: var(--font); font-size: .78rem; }
.nav a:hover { color: #147b80; }
.nav-action { border-color: #147b80; border-radius: 6px; color: #147b80; font-family: var(--font); font-weight: 700; }
.nav-action:hover { background: #eef8f8; }

.hero { min-height: auto; padding: 83px 0 78px; background: linear-gradient(180deg, #f2faf9, #f8fcfc); }
.hero::before { background: radial-gradient(circle at 80% 40%, rgba(53, 159, 164, .10), transparent 26%); }
.hero-layout { grid-template-columns: minmax(0, .9fr) minmax(420px, .8fr); gap: 64px; }
.overline { color: #267f9c; font-family: var(--font); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.hero h1 { color: #17474a; font-family: var(--heading); font-size: clamp(2.55rem, 4.7vw, 4.4rem); line-height: 1.08; letter-spacing: -.06em; }
.hero h1 em { color: #187f84; }
.hero-lede { color: #557174; font-size: 1rem; line-height: 1.75; }
.button { border-radius: 6px; font-family: var(--font); font-weight: 700; }
.button-main { background: #187f84; color: #fff; box-shadow: 0 9px 20px rgba(24, 127, 132, .16); }
.button-main:hover { background: #106e73; }
.text-link { color: #247b80; font-family: var(--font); font-weight: 700; }
.text-link span { color: inherit; }
.hero-foot { color: #789497; font-family: var(--font); font-weight: 700; letter-spacing: .07em; }
.hero-foot i { background: #b5d6d8; }

.product-visual {
  min-height: 425px;
  border: 1px solid #cee5e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(32, 85, 87, .10);
  transform: none;
  overflow: hidden;
}
.product-visual::before { display: none; }
.visual-topline { background: #f3faf9; border-color: #d9eceb; color: #668486; font-family: var(--font); font-weight: 700; }
.visual-topline b { background: #42af87; box-shadow: none; }
.visual-grid { min-height: 384px; }
.visual-rail { width: 54px; border-color: #e2eeee; background: #f8fcfc; }
.visual-rail strong { border-radius: 7px; background: #187f84; color: #fff; }
.visual-rail i { background: #d8e7e7; }
.visual-rail i.rail-active { background: #2a9ca0; box-shadow: none; }
.visual-body { padding: 26px 23px; }
.visual-title small, .metric-row small, .worklist-title { color: #779598; font-family: var(--font); font-weight: 800; }
.visual-title h2 { color: #1c4d50; font-family: var(--font); font-weight: 800; }
.online { color: #49868a; }
.online i { background: #42af87; }
.metric-row article { border-color: #dceaea; border-radius: 7px; background: #fbfefe; }
.metric-row b { color: #1b4d50; font-family: var(--font); }
.metric-row small, .metric-row span { color: #789396; }
.metric-row .aqua { color: #187f84; }
.worklist { border-color: #dceaea; border-radius: 7px; background: #fff; }
.worklist-title a { color: #207c80; }
.work-row b { color: #254f52; }.work-row small { color: #829da0; }
.patient.purple { background: #7c98c9; }.patient.yellow { background: #c59457; }.patient.teal { background: #49a59e; }
.in-progress { color: #b67825; }.pending { color: #779396; }.report-ready { color: #278861; }
.floating-card { display: none; }

.system-section { padding: 96px 0; border: 0; background: #fff; }
.section-head h2, .release-intro h2, .pricing-head h2, .faq-layout h2, .contact-wrap h2 { color: #1a494c; font-family: var(--heading); font-weight: 750; letter-spacing: -.055em; }
.section-head > p:last-child, .release-intro > p, .faq-layout > div:first-child > p:last-child { color: #607a7d; line-height: 1.75; }
.system-grid { gap: 22px; }
.system-card { min-height: 424px; padding: 31px; border: 1px solid #d9e9e9; border-radius: 10px; background: #fff; box-shadow: none; }
.system-card::after { display: none; }
.card-number { border-color: #b9dede; border-radius: 8px; color: #187f84; background: #eff9f9; font-family: var(--font); font-weight: 800; }
.report-card .card-number { border-color: #c8ddec; color: #39799a; background: #f0f7fb; }
.card-label { color: #568184; font-family: var(--font); font-weight: 800; }
.system-card h3 { color: #1d4c4f; font-family: var(--heading); font-weight: 750; }
.system-card > p:not(.card-label) { color: #617b7e; line-height: 1.7; }
.system-card li { color: #456366; }.system-card li::before, .plan li::before { color: #258a8f; }
.system-card > a { color: #187f84; font-family: var(--font); font-weight: 800; }.system-card > a span { color: inherit; }

.report-preview-section { padding: 100px 0; border-top: 1px solid #d9e9e9; border-bottom: 1px solid #d9e9e9; background: #f4fafa; }.report-preview-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(330px, .7fr); align-items: center; gap: 72px; }.report-preview-copy h2 { max-width: 570px; margin: 0; color: #1d4c4f; font-family: var(--heading); font-size: clamp(2.15rem, 3.8vw, 3.35rem); font-weight: 750; letter-spacing: -.065em; line-height: 1.08; }.report-preview-copy > p:not(.overline):not(.preview-disclaimer) { max-width: 510px; margin: 19px 0 0; color: #5f7d80; line-height: 1.7; }.report-preview-copy ul { display: grid; gap: 14px; margin: 27px 0 0; padding: 0; list-style: none; }.report-preview-copy li { position: relative; padding-left: 22px; color: #315f63; }.report-preview-copy li::before { content: '✓'; position: absolute; top: 0; left: 0; color: #188086; font-weight: 900; }.report-preview-copy li strong, .report-preview-copy li span { display: block; }.report-preview-copy li strong { font-size: .87rem; }.report-preview-copy li span { margin-top: 3px; color: #668285; font-size: .78rem; line-height: 1.55; }.preview-disclaimer { max-width: 500px; margin: 25px 0 0; color: #7a9598; font-size: .7rem; line-height: 1.55; }.report-preview-figure { width: min(100%, 470px); position: relative; justify-self: end; margin: 0; padding: 12px; border: 1px solid #cce1e1; border-radius: 10px; background: #fff; box-shadow: 0 18px 42px rgba(30, 93, 96, .13); }.report-preview-figure img { display: block; width: 100%; height: auto; border: 1px solid #e1ecec; }.report-preview-figure figcaption { margin: 9px 3px 0; color: #779397; font-size: .66rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }.report-callout { position: absolute; z-index: 1; display: grid; gap: 1px; padding: 8px 10px; border: 1px solid #99c9ca; border-radius: 6px; background: rgba(255,255,255,.96); box-shadow: 0 5px 14px rgba(25, 89, 92, .1); color: #19777c; white-space: nowrap; }.report-callout b { font-size: .7rem; }.report-callout small { color: #658287; font-size: .6rem; }.report-callout::after { content: ''; position: absolute; height: 1px; background: #4d9da1; }.barcode-callout { top: 15%; right: -118px; }.barcode-callout::after { top: 50%; right: 100%; width: 60px; }.qr-callout { top: 18%; left: -128px; }.qr-callout::after { top: 50%; left: 100%; width: 67px; }

.signal-section { padding: 25px 0; border-color: #d9e9e9; background: #f0f8f8; }
.signal-inner > p, .signal-steps { color: #527477; font-family: var(--font); font-weight: 800; }
.signal-steps i { border-color: #9fcecf; color: #187f84; }.signal-steps b { background: #c5dddd; }

.releases-section { padding: 96px 0; background: #f6fbfb; }
.release { min-height: 350px; border-color: #d8e8e8; border-radius: 10px; background: #fff; box-shadow: none; }
.release:hover { transform: translateY(-3px); border-color: #9fced0; }
.release.highlighted { border-color: #81bfc1; background: #fff; }
.release-cap { color: #668589; font-family: var(--font); font-weight: 800; }.release-cap b { color: #187f84; background: #edf8f8; }
.release h3 { color: #234f52; font-family: var(--heading); font-weight: 750; }.release > p { color: #637d80; }.release dl { border-color: #e2eeee; }.release dl div { border-color: #e2eeee; }.release dt { color: #779396; }.release dd { color: #395d60; }.release > a { color: #187f84; font-family: var(--font); font-weight: 800; }.release > a span { color: inherit; }.release-support { color: #6f8a8d; }.release-support a { color: #187f84; }

.pricing-section { padding: 96px 0; background: #fff; }.price-switch { flex-wrap: wrap; border-color: #cfdfdf; border-radius: 7px; background: #f5faf9; }.price-switch button { color: #668083; font-family: var(--font); font-weight: 700; }.price-switch button:focus-visible { outline: 2px solid #187f84; outline-offset: 2px; }.price-switch button.active { color: #187f84; background: #dff2f1; }.pricing-note { color: #718d90; }
.price-grid { gap: 20px; }.plan { min-height: 492px; border-color: #d9e9e9; border-radius: 10px; background: #fff; }.plan-featured { border-color: #79bfc0; background: #fff; box-shadow: 0 12px 28px rgba(33, 92, 94, .08); }.recommended { border-radius: 0 0 5px 5px; background: #187f84; color: #fff; }.plan-type { color: #267f9c; font-family: var(--font); font-weight: 800; }.plan-for, .price small { color: #759195; }.price-before { display: block; min-height: 1.25em; margin: 0 0 4px; color: #8ca3a5; font-size: .78rem; font-weight: 750; text-decoration-thickness: 1.5px; }.price-before[hidden] { display: none; }.price strong { color: #1d4b4e; font-family: var(--heading); font-size: 2.05rem; }.plan-summary { min-height: 0; color: #607a7d; line-height: 1.65; }.plan-support { min-height: 38px; margin: 10px 0 0; color: #187f84; font-size: .72rem; font-weight: 700; line-height: 1.45; }.plan ul { border-color: #e2eeee; }.plan li { color: #456568; }.plan > a { border-color: #b7d7d8; border-radius: 6px; color: #187f84; font-family: var(--font); font-weight: 800; }.plan > a:hover { border-color: #187f84; color: #12686c; }.plan-featured > a { background: #187f84; color: #fff; }.plan-featured > a:hover { background: #106e73; color: #fff; }

.faq-section { padding: 96px 0; border-color: #d9e9e9; background: #f6fbfb; }.faq-list { border-color: #d7e8e8; }.faq-list details { border-color: #d7e8e8; }.faq-list summary { color: #295458; font-family: var(--font); font-weight: 750; }.faq-list summary i::before, .faq-list summary i::after { background: #187f84; }.faq-list details p { color: #668184; }

.contact-section { padding: 78px 0; border: 0; background: #166f74; }.contact-section::after { display: none; }.contact-wrap h2 { color: #fff; }.contact-wrap p:not(.overline) { color: #d6eeee; }.contact-section .overline { color: #bde6e7; }.contact-section .button-main { background: #fff; color: #146d72; }.contact-section .button-main:hover { background: #eaf7f7; }.contact-buttons > a:not(.button) { color: #fff; font-family: var(--font); font-weight: 700; }.contact-buttons > a:not(.button):hover { color: #d8f2f2; }
footer { background: #eff7f7; }.footer-inner p, .footer-inner > span { color: #668184; }.footer-inner p a { color: #187f84; }.footer-inner p a:hover { color: #106e73; }

@media (max-width: 980px) {
  .hero-layout { grid-template-columns: 1fr; gap: 48px; }
  .product-visual { max-width: 550px; width: 100%; }
}

@media (max-width: 680px) {
  .site-header { background: rgba(255, 255, 255, .98); }
  .menu-toggle i { background: #1c5558; }
  .nav { background: #fff; border-color: #d6e8e8; }
  .nav a { border-color: #e4eeee; }
  .hero { padding: 60px 0; }
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3.25rem); }
  .product-visual { min-height: 340px; }
  .visual-grid { min-height: 299px; }
  .system-section, .releases-section, .pricing-section, .faq-section { padding: 70px 0; }
  .system-card, .plan { box-shadow: none; }
}

@media (max-width: 800px) { .report-preview-section { padding: 76px 0; }.report-preview-layout { grid-template-columns: 1fr; gap: 40px; }.report-preview-figure { justify-self: center; }.barcode-callout { right: -88px; }.barcode-callout::after { width: 35px; }.qr-callout { left: -94px; }.qr-callout::after { width: 38px; } }
@media (max-width: 560px) { .report-preview-section { padding: 66px 0; }.report-preview-copy h2 { font-size: 2rem; }.report-preview-figure { width: 100%; padding: 8px; }.report-callout { position: static; display: inline-grid; margin: 8px 4px 0 0; }.report-callout::after { display: none; } }