/* Clone Screening — Product #1 landing page.
   Founder Decision #022 / DR-0017 (Consultation-First Strategy) · Step 9 refactor.

   Reuses the MatrixBioservices approved design tokens (index.html): same palette (dark navy +
   green accent), same fonts. No redesign.

   Scope: this stylesheet serves the product landing page only. Every rule below is used by
   `index.html`; the rules belonging to the retired public demonstration were removed in Step 9,
   and the class vocabulary was renamed to product-page terms. The rename table and the removal
   list are recorded in `Product_Page_Refactoring_Report.md`. The pre-Step 9 stylesheet is
   preserved at `History/Website/clone-screening-styles__v1.0__2026-08-10__pre-Step9.css`. */

:root {
  --bg: #070b10; --panel: #0f151d; --line: #1f2a36;
  --text: #cbd5df; --muted: #8593a1; --heading: #eaf2f8;
  --green: #00ff66; --green-2: #35d17e; --green-soft: rgba(0,255,102,0.10); --green-line: rgba(0,255,102,0.32);
  --amber: #ffcc55;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Apple SD Gothic Neo","Pretendard","Malgun Gothic","Noto Sans KR",sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* --- Top bar -------------------------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(7,11,16,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 16px; height: 58px; }
.logo { font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--heading); letter-spacing: 0.02em; }
.logo .g { color: var(--green); }
/* SPRINT-008 §2 — RESTORED. These two rules existed through commit a7f2b89 and were dropped by the
   SPRINT-006 Preview commit, leaving `.back` unstyled (a default blue hyperlink). Restored byte-for-
   byte from a7f2b89:clone-screening/styles.css lines 21–22. The destination (`href="../"`) is
   unchanged; only the styling is restored. The 560px override below already assumed these rules. */
.back { font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; border: 1px solid var(--line); padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.back:hover { color: var(--green-2); border-color: var(--green-line); }
/* Product tier badge in the top bar. */
.product-tag { font-family: var(--mono); font-size: 11.5px; color: var(--green-2); border: 1px solid var(--green-line); background: var(--green-soft); padding: 3px 10px; border-radius: 6px; }
.langsw { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.langsw button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 7px; font-size: 11.5px; font-weight: 700; padding: 4px 8px; cursor: pointer; font-family: var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.langsw button:hover { color: var(--green-2); border-color: var(--green-line); }
.langsw button.on { color: #04140b; background: var(--green); border-color: var(--green); }
@media (max-width: 560px) { .langsw button { font-size: 10px; padding: 3px 6px; } .product-tag { display: none; } }

/* --- Hero ----------------------------------------------------------------------------------- */
.hero { padding: 48px 0 24px; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--green); margin-bottom: 12px; }
.hero h1 { font-size: 30px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; margin-bottom: 14px; word-break: keep-all; }
.hero .lede { color: var(--muted); max-width: 700px; margin-bottom: 16px; }
.stage-note { font-family: var(--mono); font-size: 12px; color: var(--amber); border: 1px solid rgba(255,204,85,0.3); background: rgba(255,204,85,0.06); padding: 8px 12px; border-radius: 8px; }

/* --- Section cards -------------------------------------------------------------------------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; margin: 20px 0; }
/* Every section heading on the page uses this. */
.section-title { color: var(--heading); font-size: 19px; letter-spacing: 0.01em; margin-bottom: 16px; }
/* Sub-heading inside a section card (roadmap tiers). */
.subsection-title { color: var(--heading); font-size: 13px; font-family: var(--mono); letter-spacing: 0.02em; margin-top: 18px; margin-bottom: 10px; }
/* Qualifying / honesty note under a section body. */
.note { color: var(--muted); font-size: 12px; margin-top: 12px; }
code { font-family: var(--mono); font-size: 12px; color: var(--green-2); }

/* --- Lists ---------------------------------------------------------------------------------- */
/* Value statement (Founder QA #007 wording, unchanged). */
.value-props { list-style: none; display: grid; gap: 8px; }
.value-props li { position: relative; padding-left: 22px; color: var(--heading); font-size: 14.5px; }
.value-props li::before { content: "→"; position: absolute; left: 0; color: var(--green); font-family: var(--mono); }
@media (max-width: 640px) { .value-props li { font-size: 13.5px; } }

/* Unordered enumerations — inputs, deliverables, roadmap entries. */
.check-list { list-style: none; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--heading); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-size: 12px; }

/* Ordered sequences — the scientific workflow and the consultation process, which are steps in
   order and are therefore marked up as <ol>. */
.step-list { list-style: none; counter-reset: step; display: grid; gap: 10px; }
.step-list li { position: relative; padding-left: 30px; font-size: 13.5px; color: var(--heading); counter-increment: step; }
.step-list li::before { content: counter(step); position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--green);
  border: 1px solid var(--green-line); background: var(--green-soft); }

/* --- Scientific Limitations ------------------------------------------------------------------ */
/* Amber left accent and tinted background, matching the language the hero maturity badge uses for
   honesty statements. WORDING IS UNCHANGED. */
.limitations-card { border-color: rgba(255,204,85,0.34); background: rgba(255,204,85,0.05);
  border-left: 3px solid var(--amber); }
.limitations-card .section-title { color: var(--amber); letter-spacing: 0; margin-bottom: 14px; }
.limitations-card .limitation-list, .limitations-card .disclaimer-list { list-style: none; display: grid; gap: 10px; }
.limitations-card .limitation-list { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,204,85,0.22); }
.limitations-card li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.65; color: var(--text); }
.limitations-card li::before { content: "•"; position: absolute; left: 4px; color: var(--amber); }
.limitations-card .limitation-list li { color: var(--heading); font-size: 13.5px; }

/* --- Consultation call to action -------------------------------------------------------------- */
.cta-row { display: flex; margin-top: 18px; }
.btn { font: inherit; font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--green); color: #04140b; box-shadow: 0 6px 20px rgba(0,255,102,0.22); }
.cta-row .btn { text-decoration: none; text-align: center; }

/* --- Footer ---------------------------------------------------------------------------------- */
.foot { padding: 40px 24px 60px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); margin-top: 40px; }

/* --- Small screens ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero h1 { font-size: 24px; }
  /* PM #013-HF — header wraps so logo + badge (+ Back button when present) fit small screens without horizontal overflow */
  .topbar .bar { flex-wrap: wrap; gap: 8px 10px; height: auto; padding: 9px 14px; }
  .logo { font-size: 15px; }
  .product-tag { font-size: 10.5px; }
  .back { font-size: 11px; padding: 3px 8px; }
}
@media (max-width: 559px) {
  .cta-row { width: 100%; }
  .cta-row .btn { width: 100%; }
}