/* dna-platform — warm medical consultancy aesthetic
 * Inspired by the Medxtio Dribbble shot Kyle referenced.
 * Warm cream background, soft purple accent, generous whitespace,
 * rounded everything, friendly and inviting — not clinical-sterile.
 */

/* Self-hosted fonts (OFL; see /static/fonts/). Self-hosting cuts LCP on
 * first paint and lets us keep CSP tight — no fonts.googleapis.com or
 * fonts.gstatic.com in the allowlist. */
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/DMSans.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/DMSans-Italic.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('/static/fonts/DMSerifDisplay.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f0ea;             /* warm cream (Medxtio hero bg) */
  --surface: #ffffff;
  --surface-muted: #f0ebe4;  /* warm muted cream */
  --ink: #1a1a2e;            /* deep navy-charcoal */
  --ink-soft: #3d3d56;
  --ink-muted: #7a7a8f;
  --line: #e5e0d8;           /* warm separator */
  --accent: #7C6AE8;         /* soft purple (Medxtio primary) */
  --accent-deep: #5B4BC7;
  --accent-wash: #eeebfa;    /* lightest purple wash */
  --warn: #b45309;
  --warn-wash: #fdf3e4;
  --sale: #E0540A;           /* saturated warm orange — launch-price badge */
  --sale-deep: #B8430E;
  --sale-wash: #fff1e6;
  --danger: #b42318;
  --danger-wash: #fee4e2;
  --ok: #047857;
  --ok-wash: #dcfce7;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.05);
  --shadow-md: 0 12px 32px rgba(26, 26, 46, 0.08);
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", "Menlo", "Monaco", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--font-mono); }
code {
  background: var(--surface-muted);
  padding: 0.12em 0.38em;
  border-radius: 4px;
  font-size: 0.92em;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* -------------------------------------------------------------------- */
/* Header / footer                                                      */
/* -------------------------------------------------------------------- */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  background: var(--accent);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}
.site-nav {
  display: flex;
  gap: 28px;
}
.site-nav a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 15px;
}
.site-nav a:hover {
  color: var(--accent-deep);
  text-decoration: none;
}

.site-main {
  padding: 80px 0 120px;
  min-height: calc(100vh - 68px - 80px);
}

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 24px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.footer-links { margin-top: 6px; }
.footer-links a { color: var(--ink-muted); margin: 0 2px; }
.footer-links a:hover { color: var(--accent); }

/* -------------------------------------------------------------------- */
/* Typography + utility                                                 */
/* -------------------------------------------------------------------- */

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; }
h1 { font-family: var(--font-display); font-size: 38px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 28px; }
h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin: 0 0 20px; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }

.eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 12px;
  background: var(--accent-wash);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
}
.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 40px;
  max-width: 58ch;
}
.muted { color: var(--ink-muted); }
.micro { font-size: 13px; }
.mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

/* -------------------------------------------------------------------- */
/* Hero / upload form                                                   */
/* -------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: start;
  margin-bottom: 120px;
  position: relative;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 48px; margin-bottom: 80px; }
}

.hero-text, .upload-card { position: relative; z-index: 1; }
/* Hero heading: large with purple-to-warm gradient */
.hero-text h1 {
  font-size: 52px;
  line-height: 1.08;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 40%, #1a1a2e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 900px) { .hero-text h1 { font-size: 36px; } }

/* Trust chips */
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 48px;
}
.trust-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: var(--shadow-sm);
  min-width: 110px;
}
.trust-chip strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent-deep);
  line-height: 1;
  margin-bottom: 2px;
}
.trust-chip span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Sample finding preview card */
.preview-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
  max-width: 480px;
}
.preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 20px;
}
.preview-finding {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 4px 16px;
  align-items: center;
}
.preview-trait {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.preview-trait-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}
.preview-trait-group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 600;
}
.preview-percentile {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.preview-pct-value {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent-deep);
  line-height: 1;
}
.preview-pct-value sup {
  font-size: 14px;
  vertical-align: super;
}
.preview-pct-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
.preview-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 6px;
  background: var(--surface-muted);
  border-radius: 999px;
  margin: 12px 0 4px;
  position: relative;
}
.preview-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 999px;
  /* Sample-preview bar in the hero — fixed at 15% to mirror the ADHD    */
  /* example percentile. Previously set with inline style="width: 15%"  */
  /* but extracted to CSS so the CSP can stay strict on style-src.       */
  width: 15%;
}
.preview-bar-dot {
  position: absolute;
  top: 50%;
  left: 15%;                 /* matches .preview-bar-fill width (see note) */
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(124, 106, 232, 0.3);
}
.preview-direction {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Floating decorative dot scattered around the hero */
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* Larger warm dot, bottom-left area */
  bottom: -30px;
  left: 40%;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, rgba(232, 160, 106, 0.7) 0%, rgba(232, 160, 106, 0.2) 70%);
  filter: blur(2px);
}

.upload-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: var(--shadow-md);
}
.upload-card h2 { color: var(--accent-deep); font-size: 20px; margin-bottom: 28px; }

/* -------------------------------------------------------------------- */
/* Launch-pricing sale treatment                                        */
/* -------------------------------------------------------------------- */

/* Pill above the upload-card h2. Signals an active promo without      */
/* fake-urgency pressure tactics. Solid warm orange stands out against */
/* the cream bg + purple accents — the only non-purple CTA on-page.   */
.sale-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sale);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(224, 84, 10, 0.28);
}

/* Inline price-forward strikethrough: "$29 $49" where the live price  */
/* is the visual anchor and the crossed-out regular price sits smaller */
/* and lighter beside it.                                               */
.price-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.price-now {
  font-weight: 700;
  color: var(--accent-deep);
}
.price-was {
  color: var(--ink-muted);
  font-size: 0.82em;
  text-decoration: line-through;
  font-weight: 500;
}

/* Secondary label stacked inside a button ("$49 · launch price"). */
.btn-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.82;
  margin-top: 2px;
}
.btn-primary .btn-sub s {
  text-decoration: line-through;
}
/* Buttons wrap the sub-label on a second line; flex column keeps it    */
/* vertically centered instead of side-aligned.                         */
.btn-primary:has(.btn-sub) {
  flex-direction: column;
  line-height: 1.15;
  padding-top: 10px;
  padding-bottom: 10px;
}

.upload-form { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field-hint { font-size: 12px; color: var(--ink-muted); }
.field input[type="text"],
.field input[type="file"] {
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--ink);
  width: 100%;
}
.field input[type="text"]:focus,
.field input[type="file"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* -------------------------------------------------------------------- */
/* Buttons                                                              */
/* -------------------------------------------------------------------- */

.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  text-decoration: none;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-deep);
  text-decoration: none;
}
.btn-secondary {
  background: var(--surface);
  color: var(--accent-deep);
  border-color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent-wash);
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.btn-ghost:hover {
  background: var(--surface-muted);
  text-decoration: none;
}

/* Link-style button: looks like a text link, used as a secondary action */
.btn-link {
  background: none;
  border: none;
  color: var(--accent-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px;
  margin-top: 4px;
  display: block;
  width: 100%;
  text-align: center;
}
.btn-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* -------------------------------------------------------------------- */
/* Panels / sections                                                    */
/* -------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px;
  margin-bottom: 56px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .panel { padding: 36px 28px; } }
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}
.panel.disclaimer {
  background: var(--warn-wash);
  border-color: #f5dfa8;
}
.panel.disclaimer h2 { color: #7a3f00; }
.panel.disclaimer p { color: #5a340b; margin: 0; }

/* Section heading: large centered serif heading used above multiple sections */
.section-heading {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  margin: 0 0 56px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (max-width: 700px) {
  .section-heading { font-size: 30px; margin-bottom: 40px; }
}

/* Traits grid — links to the 13 per-trait landing pages */
.traits-section { margin-bottom: 96px; }
.section-lede {
  text-align: center;
  color: var(--ink-soft);
  max-width: 640px;
  margin: -32px auto 40px;
  line-height: 1.6;
}
.traits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .traits-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .traits-grid { grid-template-columns: repeat(2, 1fr); } }
.trait-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(124, 106, 232, 0.18);
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.trait-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 106, 232, 0.18);
}
.trait-chip-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}
.trait-chip-group {
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* How it works — stepped flow */
.steps-section {
  margin-bottom: 96px;
}
.features-section {
  margin-bottom: 96px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; gap: 20px; } }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
}
.step h3 {
  margin: 0 0 12px;
  font-size: 17px;
  color: var(--ink);
}
.step p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
/* Highlight the paid step with a subtle accent border */
.step:last-child {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.step:last-child .step-num {
  background: var(--accent);
  color: #fff;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px;
}
@media (max-width: 700px) { .feature-grid { grid-template-columns: 1fr; gap: 32px; } }
.feature p { margin: 0; color: var(--ink-soft); line-height: 1.65; }

/* -------------------------------------------------------------------- */
/* Status / processing page                                             */
/* -------------------------------------------------------------------- */

.status-panel { max-width: 720px; margin: 0 auto; }
.status-panel h1 { font-size: 28px; }

.status-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.status-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  margin: 0 0 24px;
}
.status-meta div { display: flex; flex-direction: column; gap: 4px; }
.status-meta dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
.status-meta dd { margin: 0; font-size: 15px; color: var(--ink); }

.progress-message {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 16px;
  min-height: 1.5em;
  transition: opacity 0.2s ease;
}

.spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--accent-wash);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
  margin: 24px auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------- */
/* Failed-upload page                                                    */
/* --------------------------------------------------------------------- */

/* Warm amber panel instead of alarmist red. Most failures here are just */
/* "that wasn't an AncestryDNA file" — shouldn't feel like a crash.      */
.error-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-md);
  max-width: 640px;
  margin: 0 auto;
}
.error-message {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 24px;
  font-weight: 500;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.error-help {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--warn-wash);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0 0 20px;
}
.error-help code {
  background: rgba(180, 83, 9, 0.12);
  color: #7a3f00;
  padding: 0.08em 0.35em;
}
.error-details {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}
.error-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 0;
  user-select: none;
}
.error-details summary:hover { color: var(--accent-deep); }
.error-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin: 12px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.error-meta div { display: flex; flex-direction: column; gap: 2px; }
.error-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
.error-meta dd { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* -------------------------------------------------------------------- */
/* Upload list table                                                    */
/* -------------------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th, .data-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.data-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
.data-table td { color: var(--ink-soft); }
.row-actions { text-align: right; }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.status-pending   { background: var(--surface-muted); color: var(--ink-soft); }
.status-analyzing { background: var(--accent-wash);  color: var(--accent); }
.status-complete  { background: var(--ok-wash);      color: var(--ok); }
.status-failed    { background: var(--danger-wash);  color: var(--danger); }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-muted);
}

/* -------------------------------------------------------------------- */
/* Report viewer                                                         */
/* -------------------------------------------------------------------- */

.report {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 700px) { .report { padding: 32px 24px; } }

.report-header { margin-bottom: 36px; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.report-header h1 { font-size: 32px; margin-bottom: 20px; }

/* Report footer — rendered dynamically by report.html so copy edits
   don't require re-rendering stored markdown. Soft warm-tan panel
   anchors the end of the report; the tan band sits inside the white
   .report card as a distinct "wrap-up" zone, not a stray italic.    */
.report-footer {
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  text-align: center;
}
.report-footer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.report-footer a {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: none;
}
.report-footer a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .report-footer { margin-top: 40px; padding: 22px 24px; }
}

.report-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 24px;
  margin: 0 0 24px;
}
.report-meta div { display: flex; flex-direction: column; gap: 4px; }
.report-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
}
.report-meta dd { margin: 0; font-size: 14px; color: var(--ink); }

.report-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Markdown prose */
.prose { color: var(--ink); font-size: 16px; line-height: 1.7; }
.prose h1 { font-size: 28px; margin-top: 40px; }
.prose h2 {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.prose h3 { font-size: 18px; margin-top: 28px; margin-bottom: 8px; }
.prose h4 { font-size: 15px; margin-top: 20px; margin-bottom: 6px; color: var(--ink-soft); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose blockquote {
  margin: 16px 0;
  padding: 14px 22px;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  color: var(--ink-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
  /* Default: auto layout lets columns size to content. The exec-
     summary table below overrides with fixed + width: 30% on the
     first column so the trait name gets prominence. */
}
.prose th, .prose td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  word-wrap: break-word;
}
.prose th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: var(--surface-muted);
  font-weight: 600;
  white-space: nowrap;
}
/* Numeric columns (3rd col onward): right-align + monospace + no wrap */
.prose td:nth-child(n+3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}
.prose th:nth-child(n+3) {
  text-align: right;
}
/* Methodology key-value tables (2-col) shouldn't get the numeric treatment */
.prose table:has(td:nth-child(2):last-child) td {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14px;
  white-space: normal;
}

/* Exec summary (6-col) — trait name column gets 30% for prominence. */
.prose table:has(th:nth-child(6)):not(:has(th:nth-child(7))) {
  table-layout: fixed;
}
.prose table:has(th:nth-child(6)):not(:has(th:nth-child(7))) th:first-child,
.prose table:has(th:nth-child(6)):not(:has(th:nth-child(7))) td:first-child {
  width: 30%;
}

/* Top Contributing Variants (9-col): state icon, rsID, chr:pos,
   genotype, effect allele, dosage, log(OR), p-value, contribution.
   Tighter padding and a narrow state column so rsID and chr:pos
   don't wrap. */
.prose table:has(th:nth-child(9)) {
  font-size: 13px;
}
.prose table:has(th:nth-child(9)) th,
.prose table:has(th:nth-child(9)) td {
  padding: 10px 10px;
}
/* Column 1 (state): narrow, centered; data cells bump up the font size
   so the emoji icon reads clearly. The header stays at the generic
   .prose th size (11px uppercase) so it matches the other column
   labels — applying font-size to both cells is what caused STATE to
   render larger than the other headings. */
.prose table:has(th:nth-child(9)) th:first-child,
.prose table:has(th:nth-child(9)) td:first-child {
  width: 36px;
  text-align: center;
  line-height: 1;
  padding-left: 8px;
  padding-right: 6px;
}
.prose table:has(th:nth-child(9)) td:first-child {
  font-size: 16px;
}
/* Column 2 (rsID): monospace, no wrap, left-aligned. */
.prose table:has(th:nth-child(9)) td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
}
.prose table:has(th:nth-child(9)) th:nth-child(2) {
  text-align: left;
}
/* Column 3 (chr:pos): monospace, no wrap, left-aligned. Overrides
   the numeric-column right-align from the generic rule above. */
.prose table:has(th:nth-child(9)) td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
}
.prose table:has(th:nth-child(9)) th:nth-child(3) {
  text-align: left;
}
/* Columns 4-5 (your genotype, effect allele): center these single
   characters for a cleaner look. */
.prose table:has(th:nth-child(9)) td:nth-child(4),
.prose table:has(th:nth-child(9)) td:nth-child(5) {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}
.prose table:has(th:nth-child(9)) th:nth-child(4),
.prose table:has(th:nth-child(9)) th:nth-child(5) {
  text-align: center;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}
.prose code {
  background: var(--surface-muted);
  color: var(--ink);
}
.prose pre {
  background: var(--surface-muted);
  padding: 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 13px;
}
.prose pre code { background: transparent; padding: 0; }
.prose a { color: var(--accent-deep); text-decoration: underline; }

/* -------------------------------------------------------------------- */
/* Gradient blobs (decorative, kbw.dev style)                           */
/* -------------------------------------------------------------------- */

.gradient-blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.blob-left {
  bottom: -100px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124, 106, 232, 0.36) 0%, rgba(124, 106, 232, 0.12) 40%, transparent 70%);
  filter: blur(50px);
}
.blob-right {
  top: -50px;
  right: -100px;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(232, 160, 106, 0.30) 0%, rgba(232, 160, 106, 0.10) 40%, transparent 70%);
  filter: blur(50px);
}
/* Keep blobs behind everything */
.site-header, .site-main, .site-footer { position: relative; z-index: 1; }

/* DNA helix illustration in hero                                       */
/* -------------------------------------------------------------------- */

.hero-helix {
  margin-top: 24px;
  opacity: 0.7;
  animation: helix-float 6s ease-in-out infinite;
}
@keyframes helix-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* -------------------------------------------------------------------- */
/* Unlock / payment banner                                              */
/* -------------------------------------------------------------------- */

.unlock-banner {
  background: var(--accent-wash);
  border: 1px solid rgba(124, 106, 232, 0.2);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Sticky below the 68px site header so the upgrade CTA stays in
     view while the user scrolls through their preview. z-index sits
     above report content (z:1) but under the site header (z:10).    */
  position: sticky;
  top: 68px;
  z-index: 5;
  box-shadow: 0 8px 24px -6px rgba(124, 106, 232, 0.28);
}
.unlock-banner p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.unlock-banner .btn-primary {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .unlock-banner {
    flex-direction: column;
    text-align: center;
  }
}

/* -------------------------------------------------------------------- */
/* Phase 4a: free/paid paywall + polished touches                       */
/* -------------------------------------------------------------------- */

/* Lock icon rows in exec summary */
.prose td:has(🔒) { color: var(--ink-muted); }

/* Paywall CTA block (rendered as a blockquote starting with 🔓) */
.prose blockquote:has(strong:first-child) {
  border-left-color: var(--accent);
  background: var(--accent-wash);
}

/* Token display on processing page */
.token-display {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Better table hover */
.prose tr:hover td,
.data-table tbody tr:hover td {
  background: var(--surface-muted);
}

/* Trait group headings in the report */
.prose h3 {
  color: var(--accent);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 32px;
  margin-bottom: 12px;
}

/* Make the report header more prominent */
.report-header h1 {
  font-family: var(--font-display);
  color: var(--accent-deep);
}

/* Print-friendly: hide nav + footer, expand report to full width */
@media print {
  .site-header, .site-footer, .site-nav, .report-actions, .unlock-banner { display: none !important; }
  .report { box-shadow: none; border: none; padding: 24px; }
  .site-main { padding: 0; }
  .wrap { max-width: 100%; }
}

/* ---------------------------------------------------------------
 * v2 landing page — structural blocks built for AI-citation density
 * (140-word answer sections, comparison table, explicit FAQ).
 * Classes scoped so they can coexist with the original landing page.
 * --------------------------------------------------------------- */

.answer-block {
  max-width: 760px;
  margin: 72px auto;
  padding: 0 12px;
}
.answer-block .lead-claim {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  margin: 16px 0 20px;
}
.answer-block p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 14px 0;
}

.compare-section {
  max-width: 1040px;
  margin: 72px auto;
  padding: 0 12px;
}
.compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-top: 20px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 720px;
}
.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  background: var(--surface-muted);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table .col-us {
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 500;
}
.compare-table td.cell-yes {
  color: var(--ok);
  font-weight: 600;
}
.compare-table td.cell-no {
  color: var(--ink-muted);
}
.compare-table th:first-child {
  color: var(--ink-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--bg);
}

.faq-section {
  max-width: 820px;
  margin: 72px auto;
  padding: 0 12px;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-item h3 {
  font-family: var(--font-sans);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.faq-item p {
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

.byline {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 0 12px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}
.byline strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.byline .byline-sep {
  opacity: 0.4;
}

/* ---------------------------------------------------------------
 * Trait pages — editorial data-journalism aesthetic.
 * Hairline rules, tabular numerals, serif display at two sizes,
 * one drop cap per page, gradient percentile strip.
 * --------------------------------------------------------------- */

.trait-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px;
}

.trait-crumbs {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin: 32px 0 24px;
}
.trait-crumbs a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
.trait-crumbs a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}
.trait-crumbs .sep { margin: 0 8px; opacity: 0.5; }

.trait-hero { padding: 12px 0 8px; }
.trait-hero .eyebrow-caps {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 14px;
}
.trait-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.8vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 10px;
  color: var(--ink);
}
.trait-hero .trait-subtitle {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
  margin: 0 0 26px;
}
.trait-hero .trait-orient {
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 660px;
  margin: 0;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 36px 0 12px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.stat-strip .stat-cell {
  padding: 0 18px;
  border-right: 1px solid var(--line);
}
.stat-strip .stat-cell:last-child { border-right: none; }
.stat-strip .stat-cell:first-child { padding-left: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.05;
  color: var(--ink);
  display: block;
}
.stat-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .stat-strip .stat-cell:nth-child(2) { border-right: none; }
  .stat-strip .stat-cell:nth-child(-n+2) { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .stat-strip .stat-cell:nth-child(n+3) { padding-top: 4px; }
}

.trait-block {
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.trait-block:last-of-type { border-bottom: none; }
.trait-block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin: 0 0 18px;
  color: var(--ink);
}
.trait-block p {
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 680px;
}
.trait-block p:last-child { margin-bottom: 0; }
.trait-block a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-wash);
  transition: border-color 0.15s ease;
}
.trait-block a:hover { border-bottom-color: var(--accent); }

.drop-cap > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.88;
  float: left;
  margin: 8px 12px -4px 0;
  color: var(--accent-deep);
}

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.38;
  color: var(--ink);
  padding: 8px 0 8px 22px;
  margin: 32px 0;
  max-width: 680px;
  border-left: 3px solid var(--accent);
  position: relative;
}
.pull-quote::before {
  content: "\201C";
  position: absolute;
  left: 6px;
  top: -8px;
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}

.percentile-strip { margin: 10px 0 28px; }
.percentile-bar {
  position: relative;
  height: 68px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, #f0ebe4 0%, #e5dff2 45%, #c7b9f2 80%, #7C6AE8 100%);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 46, 0.06);
}
.percentile-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, transparent calc(25% - 1px), rgba(26, 26, 46, 0.18) calc(25% - 1px) 25%, transparent 25%),
    linear-gradient(to right, transparent calc(50% - 1px), rgba(26, 26, 46, 0.24) calc(50% - 1px) 50%, transparent 50%),
    linear-gradient(to right, transparent calc(75% - 1px), rgba(26, 26, 46, 0.18) calc(75% - 1px) 75%, transparent 75%);
}
.percentile-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.percentile-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.percentile-zone {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.percentile-zone h4 {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.percentile-zone p {
  font-size: 0.93rem;
  margin: 0;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .percentile-zones { grid-template-columns: 1fr; }
}

.related-traits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.related-trait-card {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.related-trait-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.related-trait-card .rtc-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.2;
  margin: 0 0 4px;
}
.related-trait-card .rtc-note {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.trait-cta {
  margin: 44px 0 16px;
  padding: 28px 30px;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
}
.trait-cta h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 10px;
  color: var(--ink);
}
.trait-cta p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 560px;
}

.source-list {
  margin: 16px 0 8px;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.source-list li {
  padding-left: 22px;
  text-indent: -22px;
  line-height: 1.55;
  margin-bottom: 10px;
}
.source-list li::before {
  content: "—";
  color: var(--ink-muted);
  margin-right: 10px;
}
.source-list a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-wash);
  word-break: break-word;
}
.source-list a:hover { border-bottom-color: var(--accent); }