@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&display=swap");

/*
  GenomQC public interface
  A quiet, evidence-led system: one functional accent, real product surfaces,
  and no decorative type treatment standing in for product substance.
*/
:root {
  --paper: #f7f9fc;
  --paper-deep: #eef3f8;
  --white: #ffffff;
  --ink: #132833;
  --ink-soft: #61727d;
  --line: #dbe4ec;
  --blue: #315cdd;
  --orange: #315cdd;
  --cyan: #315cdd;
  --font-body: "IBM Plex Sans", "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans Condensed", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Sans", "Aptos", "Segoe UI", sans-serif;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.site-header,
.pro-nav {
  min-height: 68px;
  padding: 12px max(24px, calc((100vw - 1240px) / 2));
  gap: 28px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.site-header .brand,
.pro-nav .brand {
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
}

.site-header .brand .brand-logo-frame,
.pro-nav .brand .brand-logo-frame {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #10242c;
}

.site-header .brand .brand-wordmark,
.pro-nav .brand .brand-wordmark {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.pro-nav .brand strong {
  color: #768287;
  font: 500 11px/1.2 var(--font-body);
  letter-spacing: .04em;
}

.site-header nav,
.pro-nav nav { gap: 22px; }

.site-header nav a,
.pro-nav nav a {
  color: #56646a;
  font-size: 14px;
  font-weight: 520;
}

.site-header nav a:hover,
.pro-nav nav a:hover { color: var(--ink); }

.nav-github,
.nav-button {
  padding: 8px 11px;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.hero,
.pro-hero {
  width: min(1240px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(70px, 9vw, 132px) max(24px, calc((100vw - 1240px) / 2));
  gap: clamp(48px, 7vw, 96px);
  background: transparent;
}

.hero { grid-template-columns: minmax(0, .95fr) minmax(400px, .85fr); }
.pro-hero { grid-template-columns: minmax(0, .9fr) minmax(450px, 1fr); }
.pro-hero { min-height: 0; }

.eyebrow,
.section-index,
.card-kicker,
.overall-label,
.plan-name,
.kicker {
  color: #6c787c;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

.hero h1,
.pro-hero h1,
.pricing-intro h2,
.pilot-copy h2,
.section-title h2,
.workflow h2,
.license-card h2,
.setup-offer h2 {
  color: var(--ink);
  font-family: var(--font-display) !important;
  font-weight: 650 !important;
  font-style: normal;
  letter-spacing: -.045em;
}

.hero h1 { font-size: clamp(48px, 5.5vw, 76px); line-height: 1.04; }
.pro-hero h1 { font-size: clamp(48px, 5.4vw, 74px); line-height: 1.05; }
.hero h1 em,
.pro-hero h1 em { color: inherit; font-style: normal; font-weight: 650 !important; }

.lede { color: #526166; font-size: 18px; line-height: 1.7; }
.trust-row { gap: 10px 18px; }
.trust-row span { color: #5d6a6e; font-size: 14px; font-weight: 500; }
.trust-row span::before { content: "•"; margin-right: 7px; color: #8e999b; }
.hero-pilot-link { color: var(--blue); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.upload-card,
.product-window {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(20, 35, 41, .06);
  transform: none;
}

.upload-card { background: var(--white); }
.card-topline h2 { font-size: 21px; font-weight: 620; letter-spacing: -.02em; }
.drop-zone { min-height: 218px; border: 1px dashed #b9c3c4; border-radius: 7px; background: #fbfcfb; }
.upload-icon { border-color: #abb7b9; }
.local-pill,
.demo-pill { border-radius: 5px; }

.button,
.btn {
  min-height: 44px;
  border-radius: 6px;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
}

.button-primary,
.primary { background: var(--blue); border-color: var(--blue); }
.button-ghost,
.secondary { border-color: var(--line); }

.method-section,
.pricing-section,
.pilot-section,
.report-section,
.features,
.workflow,
.faq { padding-block: clamp(72px, 9vw, 118px); }

.method-section,
.pricing-section,
.pilot-section { padding-inline: max(24px, calc((100vw - 1240px) / 2)); }

.method-grid,
.feature-grid { gap: 16px; border: 0; }

.method-grid article,
.feature-grid article {
  min-height: 0;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.method-grid article:last-child { border-right: 1px solid var(--line); }
.method-grid article span,
.feature-grid article > span { color: #859195; font-size: 13px; }
.method-grid h3,
.feature-grid h3 { margin-top: 32px; font-weight: 620; letter-spacing: -.025em; }
.method-grid p,
.feature-grid p { color: #647176; font-size: 15px; }

.case-strip {
  margin-top: 28px;
  padding: 24px 26px;
  background: #f0f2f0;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pricing-section,
.faq { background: #eef3f8; }
.price-card,
.license-card { border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.price-card { padding: 26px; background: var(--white); }
.featured-price { border-color: #aebabc; box-shadow: 0 8px 30px rgba(20,35,41,.045); }
.soon-label { position: static; width: fit-content; margin-bottom: 16px; border-radius: 4px; background: #e9efff; color: #4e6283; }
.price strong { font-size: 38px; }

/* Pro should feel like a product workspace, not a campaign landing page. */
.proof-strip {
  padding: 16px max(24px, calc((100vw - 1240px) / 2));
  background: #fff;
  color: #59676b;
  border-block: 1px solid var(--line);
  font: 550 14px/1.5 var(--font-body);
  letter-spacing: 0;
}
.proof-strip span::before { content: "•"; margin-right: 7px; color: #9ba6a7; }
.feature-grid article > span { display: none; }
.feature-grid h3 { margin-top: 0; }
.workflow { background: #1b343d; }
.workflow .kicker { color: #a9babc; }
.workflow h2 { color: #f8fbfc; }
.workflow li strong { color: #fff; font-weight: 620; }
.workflow li span { color: #c5d0d2; }
.license-card {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.license-card .kicker { color: #6c787c; }
.license-card .button { color: #fff; }
.setup-offer {
  background: #eef3f8;
  color: var(--ink);
  border-color: var(--line);
}
.setup-offer .kicker,
.setup-offer ul,
.setup-offer .setup-price > span,
.setup-offer .setup-price small { color: #5f6d71; }
.setup-offer .button { color: #fff; }
.faq { background: #fff; }
.faq details { border-color: var(--line); }
.faq details p { color: #59676b; }

.pilot-section { background: #183142; }
.pilot-copy h2,
.pilot-copy p { color: #f8faf9; }
.pilot-copy .section-index { color: #a4b4b6; }
.pilot-panel { padding: 8px 0 0; background: transparent; border: 0; }
.pilot-steps { gap: 0; background: transparent; border: 1px solid rgba(235,244,244,.16); border-radius: 8px; }
.pilot-steps > div { padding: 24px; background: transparent; }
.pilot-steps > div + div { border-left-color: rgba(235,244,244,.16); }
.pilot-steps span { color: #91a8ac; }
.pilot-steps strong { font-weight: 620; }
.pilot-note { color: #b7c7c9; }

.report-section { background: #183142; }
.decision-gate,
.insight-card,
.policy-panel,
.review-item,
.report-upgrade,
.table-wrap,
.evidence-panel { border-radius: 8px; }

.product-window { background: var(--white); }
.product-window .window-bar { background: #17313a; }

/* The public workspace is the product. Give it a light, research-tool surface
   instead of a dark, generic SaaS dashboard. */
#top { background: #f5f8fb; }
#top .hero {
  width: min(1240px, calc(100% - 48px));
  margin: 24px auto 0;
  padding: clamp(52px, 7vw, 96px);
  grid-template-columns: minmax(320px, .82fr) minmax(460px, 1.18fr);
  gap: clamp(44px, 7vw, 90px);
  align-items: center;
  background: #fff;
  border: 1px solid #dbe5ef;
  border-radius: 16px;
}
#top .hero-copy { max-width: 560px; }
#top .hero h1 { max-width: 520px; margin-block: 16px 20px; font-size: clamp(46px, 5vw, 68px); line-height: 1.03; }
#top .hero .lede { max-width: 500px; font-size: 17px; }
#top .upload-card { padding: 26px; border-color: #cedbe7; border-radius: 12px; box-shadow: 0 10px 26px rgba(20,35,41,.05); }
#top .drop-zone { min-height: 190px; margin-top: 22px; }
#top .hero-pilot-link { margin-top: 18px; }

#top .report-section {
  padding: clamp(72px, 9vw, 120px) max(24px, calc((100vw - 1240px) / 2));
  background: #f2f6fa;
  color: var(--ink);
}
#top .report-section .section-index,
#top .report-section .card-kicker { color: #597087; }
#top .report-section .section-heading h2,
#top .report-section .subsection-heading h3,
#top .report-section .policy-panel h3,
#top .report-section .report-upgrade h3 { color: var(--ink); font-family: var(--font-display); font-weight: 650; }
#top .report-section .report-provenance p { color: #60758a; }
#top .report-section .report-provenance p + p::before { color: #a6b5c2; }
#top .report-section .demo-pill { border-color: #cbd8e5; color: #526a82; background: #fff; }
#top .report-section .button-light { background: var(--blue); color: #fff; border-color: var(--blue); }
#top .report-section .button-outline-light { background: #fff; color: var(--ink); border-color: #c7d1d2; }
#top .report-section .report-status { margin-top: 36px; padding: 22px 0; border-color: #d7e1ea; }
#top .report-section .overall-label { color: #60758a; }
#top .report-section .status-pass { color: #1d7652; background: #e2f2e8; }
#top .report-section .status-warn { color: #8a621d; background: #fff2d9; }
#top .report-section .status-fail { color: #9a4038; background: #f9e4e2; }
#top .report-section .metric-grid { gap: 10px; background: transparent; }
#top .report-section .metric { padding: 18px; background: #fff; border: 1px solid #d7e1ea; border-radius: 8px; }
#top .report-section .metric strong { color: var(--ink); font-family: var(--font-display); font-weight: 650; }
#top .report-section .metric span { color: #60758a; letter-spacing: .02em; text-transform: none; }
#top .report-section .decision-gate,
#top .report-section .decision-gate.is-warn { border-color: #e0c288; background: #fffaf0; }
#top .report-section .decision-gate.is-pass { border-color: #b6dfc9; background: #f1fbf5; }
#top .report-section .decision-gate.is-fail { border-color: #e6b3ae; background: #fff5f4; }
#top .report-section .decision-gate .card-kicker,
#top .report-section .decision-gate.is-pass .card-kicker,
#top .report-section .decision-gate.is-fail .card-kicker { color: #68777a; }
#top .report-section .decision-gate > p,
#top .report-section .gate-meta span { color: #5d6d71; text-transform: none; letter-spacing: 0; }
#top .report-section .gate-meta b { color: var(--ink); font-family: var(--font-display); font-weight: 650; }
#top .report-section .evidence-panel { border-color: #d5dede; background: #fff; color: var(--ink); }
#top .report-section .evidence-panel > p { color: #5d6d71; }
#top .report-section .insight-card { min-height: 0; background: #fff; border-color: #d5dede; }
#top .report-section .insight-card ul,
#top .report-section .insight-card ol { color: #304449; }
#top .report-section .accent-card { background: #edf4ff; border-color: #c6d7f6; }
#top .report-section .accent-card .card-kicker,
#top .report-section .accent-card ol { color: #304449; }
#top .report-section .sample-toolbar label,
#top .report-section .sample-toolbar p { color: #5d6d71; }
#top .report-section .sample-toolbar input,
#top .report-section .sample-toolbar select { background: #fff; border-color: #cbd6d7; color: var(--ink); }
#top .report-section .sample-toolbar input::placeholder { color: #8d999b; }
#top .report-section .table-wrap { background: #fff; border-color: #d5dede; }
#top .report-section th,
#top .report-section td { border-color: #e3e9e9; }
#top .report-section th { color: #68777a; letter-spacing: .02em; text-transform: none; }
#top .report-section tbody tr:hover { background: #f6f9f9; }
#top .report-section .value-muted { color: #718084; }
#top .report-section .subsection-heading > p,
#top .report-section .policy-intro > p:last-child { color: #5d6d71; }
#top .report-section .review-item { background: #fff; border-color: #d5dede; }
#top .report-section .review-item h5 { color: #6d7b7f; letter-spacing: .02em; text-transform: none; }
#top .report-section .review-item ul,
#top .report-section .review-action { color: #42565b; border-color: #e3e9e9; }
#top .report-section .review-action strong { color: #2b61db; }
#top .report-section .policy-panel { background: #fff; border-color: #d5dede; }
#top .report-section .threshold-grid { gap: 10px; background: transparent; }
#top .report-section .threshold-rule { background: #f7f9f9; border: 1px solid #dfe6e6; border-radius: 6px; }
#top .report-section .threshold-rule dt { color: #6b7a7d; letter-spacing: .02em; text-transform: none; }
#top .report-section .threshold-rule dd { color: var(--ink); }
#top .report-section .report-upgrade { border: 1px solid #c6d7f6; background: #edf4ff; }

#top .method-section { background: #fff; }
#top .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 42px; border: 1px solid #d5dede; border-radius: 10px; overflow: hidden; }
#top .method-grid article { padding: 30px; background: #fff; border: 0; border-right: 1px solid #d5dede; border-radius: 0; }
#top .method-grid article:last-child { border-right: 0; }
#top .method-grid article > span { display: none; }
#top .method-grid h3 { margin-top: 0; }
#top .case-strip { background: #f5f8f8; }

footer {
  padding: 30px max(24px, calc((100vw - 1240px) / 2));
  background: #183142;
}
footer span,
footer a { color: #b9c7ca; }

/* Documentation / policy pages use the same calm, product-level chrome. */
body.policy-page header {
  min-height: 68px;
  padding: 12px max(24px, calc((100vw - 1100px) / 2));
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
body.policy-page header a.legal-brand { color: var(--ink); }
body.policy-page header a.legal-brand::before {
  content: "";
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 6px;
  background: #10242c url("./genomqc-logo.png") center / 184% no-repeat;
}
body.policy-page header a img { display: none; }
body.policy-page header .legal-wordmark { color: var(--ink); font-size: 17px; font-weight: 650; }
body.policy-page header .page-label { color: #7a878b; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
body.policy-page > main { width: min(900px, calc(100% - 40px)); margin: clamp(40px, 7vw, 82px) auto; padding: clamp(28px, 5vw, 56px); background: #fff; border: 1px solid var(--line); box-shadow: none; }
body.policy-page > main h1 { margin: 12px 0 12px; font-family: var(--font-display); font-size: clamp(40px, 5vw, 62px); font-weight: 650; letter-spacing: -.04em; }
body.policy-page > main h2 { font-weight: 650; letter-spacing: -.02em; }

@media (max-width: 980px) {
  .site-header,
  .pro-nav { padding-inline: 24px; }
  .hero,
  .pro-hero { grid-template-columns: 1fr; padding-inline: 24px; }
  #top .hero { width: min(100% - 48px, 1240px); grid-template-columns: 1fr; padding: 56px 40px; }
  .hero-copy { max-width: 680px; }
}

@media (max-width: 700px) {
  .site-header,
  .pro-nav { padding: 14px 20px; gap: 14px; }
  .site-header nav,
  .pro-nav nav { width: 100%; order: 3; margin: 0; gap: 15px; }
  .site-header nav a,
  .pro-nav nav a { font-size: 13px; }
  .hero,
  .pro-hero { padding: 54px 20px 64px; }
  #top .hero { width: min(100% - 32px, 1240px); padding: 42px 24px 48px; }
  .hero h1,
  .pro-hero h1 { font-size: clamp(42px, 12vw, 60px); }
  .method-section,
  .pricing-section,
  .pilot-section,
  .report-section,
  .features,
  .workflow,
  .faq { padding-block: 54px; }
  .method-section,
  .pricing-section,
  .pilot-section { padding-inline: 20px; }
  .pilot-steps { display: block; }
  .pilot-steps > div + div { border-left: 0; border-top: 1px solid rgba(235,244,244,.16); }
  body.policy-page > main { width: min(100% - 32px, 900px); margin-block: 28px; padding: 26px 22px; }
}