/*
 * Landing page — mirrors the outliyr-dashboard's hero + stats + card + tbl
 * patterns so the bioage calculator feels like part of the same product.
 */

.bl-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}

/* ── Hero ── (matches dashboard .hero) */
.bl-hero {
  padding: clamp(30px, 5vw, 48px) clamp(20px, 4vw, 32px);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 900px) {
  .bl-hero { grid-template-columns: 1.3fr 0.9fr; align-items: end; }
}

.bl-hero__kicker {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-weight: 500;
}
.bl-hero__kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 153, 96, 0.18);
}

.bl-hero__left h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.04;
  color: var(--text);
}
.bl-hero__left h1 em {
  font-style: italic;
  color: var(--text-2);
  font-weight: 400;
  font-family: var(--serif);
}
.bl-hero__left h1 .accent { color: var(--blue); }

.bl-hero__left .lede {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
  max-width: 62ch;
}

/* Hero right — "next" panel (dashboard .next) */
.bl-next {
  position: relative;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--blue-soft), 0 8px 24px rgba(13, 27, 42, 0.06);
}
.bl-next::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 12px, var(--blue) 12px 13px);
}
.bl-next__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.bl-next__tag .dot {
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 0 10px var(--blue);
}
.bl-next__body {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.bl-next__body strong { color: var(--text); font-weight: 600; }
.bl-next__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px 12px;
  margin: 0;
}
.bl-next__meta dt { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.bl-next__meta dd { margin: 0; color: var(--text-2); }

/* ── Stats strip ── (dashboard .stats) */
.bl-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 600px) { .bl-stats { grid-template-columns: repeat(4, 1fr); } }
.bl-stat {
  background: var(--bg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.bl-stat__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.bl-stat__value {
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bl-stat__value--word {
  font-size: 28px;
  letter-spacing: -0.015em;
}
.bl-stat__unit {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 6px;
  letter-spacing: 0.06em;
}
.bl-stat__trend {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.04em;
}

/* ── Section scaffolding ── */
.bl-section { padding: 22px 24px 0; }
.bl-section:last-of-type { padding-bottom: 22px; }
.bl-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 14px;
}
.bl-section__head strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.bl-section__head small {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Quiz card (SPA frame) ── (dashboard .card) */
.bl-quiz {
  margin: 22px 24px 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}
.bl-quiz:hover { border-color: var(--border-2); }
.bl-quiz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.bl-quiz__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bl-quiz__title strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.bl-quiz__title small {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bl-quiz__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue-soft);
}
.bl-quiz__body { padding: 4px; }

/* ── Systems table ── (dashboard .tbl / .prow hybrid) */
.bl-systems {
  margin: 22px 24px 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.bl-systems__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.bl-systems__head strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.bl-systems__head strong em {
  font-style: italic;
  font-family: var(--serif);
  color: var(--blue);
  font-weight: 500;
  margin: 0 2px;
}
.bl-systems__head small {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bl-systems ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bl-systems li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
@media (min-width: 720px) {
  .bl-systems li { grid-template-columns: 44px minmax(180px, 220px) 1fr auto; gap: 18px; }
}
.bl-systems li:last-child { border-bottom: none; }
.bl-systems li:hover { background: var(--panel-2); }
.bl-systems__n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.bl-systems__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.bl-systems__inputs {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.bl-systems__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--panel);
  white-space: nowrap;
  text-transform: uppercase;
}
@media (max-width: 719px) {
  .bl-systems__tag { display: none; }
}

/* ── Methodology CTA row ── */
.bl-cta-row {
  margin: 22px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.bl-cta-row__text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bl-cta-row__text b { color: var(--text-2); font-weight: 600; }

/* ── Disclaimer ── */
.bl-disclaimer {
  margin: 22px 24px 24px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--panel);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.bl-disclaimer__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--yellow);
  border-radius: 3px;
  background: rgba(184, 148, 30, 0.08);
  align-self: start;
  white-space: nowrap;
}
.bl-disclaimer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.bl-disclaimer p + p { margin-top: 6px; }
.bl-disclaimer strong { color: var(--text); font-weight: 600; }

/* Ensure the React SPA's white background blends inside the dark card */
:root[data-theme="dark"] .bl-quiz__body #outliyr-bioage-root,
body[data-theme="dark"] .bl-quiz__body #outliyr-bioage-root {
  color: var(--text);
}

/* ── Quiz card: more breathing room ── */
.bl-quiz {
  margin: 32px 24px 0;
}
.bl-quiz__body {
  padding: clamp(24px, 4vw, 40px);
}

/* ── Sticky progress bar ── */
.bl-quiz__head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

/* ── SPA quiz shell ── */
.bioage-quiz-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px 8px;
}

/* Chrome-free /app/biological-age-calculator — hide theme chrome so the quiz
 * is distraction-free. Added via body_class filter on the SPA page.
 * Keeping specificity low so individual themes can override if needed. */
body.bioage-chrome-free .site-header,
body.bioage-chrome-free .site-footer,
body.bioage-chrome-free #outliyr-bar,
body.bioage-chrome-free .entry-title,
body.bioage-chrome-free .generate-back-to-top,
body.bioage-chrome-free .inside-header,
body.bioage-chrome-free .gb-announcement-bar {
  display: none !important;
}
body.bioage-chrome-free .site-content,
body.bioage-chrome-free .entry-content {
  padding-top: 12px;
  padding-bottom: 0;
}
body.bioage-chrome-free .entry-content {
  max-width: 720px;
  margin: 0 auto;
}
.bioage-sticky-progress {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel, #fff);
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border, #dce1e8);
  margin: 0 -16px 24px;
}
@media (min-width: 640px) {
  .bioage-quiz-shell { padding: 0; }
  .bioage-sticky-progress { padding: 18px 0 14px; margin: 0 0 28px; }
}
.bioage-quiz-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Question card ──
 * Padding: 24px mobile, 32-40px desktop (spec). Inner gap lifted to 16px
 * so hint/question/choices breathe.
 */
.bioage-question-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #dce1e8);
  border-radius: 4px;
  padding: clamp(24px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Question label: 18-20px, 1.4 line-height for readability. */
.bioage-q-prompt {
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 600;
  color: var(--text, #0d1b2a);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Help/hint text: 15px */
.bioage-q-hint {
  font-size: 15px;
  color: var(--text-3, #6b7684);
  line-height: 1.5;
  margin: 0;
}
.bioage-q-hint summary {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2, #3a4555);
}
.bioage-q-hint p {
  font-size: 15px;
  margin-top: 6px;
}

/* Units label */
.bioage-q-units {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  color: var(--text-3, #6b7684);
  letter-spacing: 0.04em;
}

/* External assessment link */
.bioage-q-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--blue, #1e7fd2);
  text-decoration: underline;
  font-weight: 500;
}
.bioage-q-ext-link:hover {
  color: var(--blue-dim, #0f5a9a);
}

/* Skip link for clinical assessments */
.bioage-q-skip {
  align-self: flex-start;
  font-size: 14px;
  color: var(--text-3, #6b7684);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.bioage-q-skip:hover { color: var(--text-2, #3a4555); }

/* Proxy prompt */
.bioage-q-proxy-prompt {
  font-size: 16px;
  font-weight: 500;
  color: var(--text, #0d1b2a);
  margin: 0;
}

/* Number input: 18px for mobile usability */
.bioage-input-number {
  display: block;
  width: 100%;
  font-size: 18px;
  border: 1px solid var(--border, #dce1e8);
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--text, #0d1b2a);
  background: var(--panel, #fff);
  transition: border-color 0.12s;
}
.bioage-input-number:focus {
  outline: none;
  border-color: var(--blue, #1e7fd2);
}

/* Radio chips: squared (4px), not pills. 12-16px inter-option gap,
 * minimum 48px tap target, 1.5 line-height for multi-line labels. */
.bioage-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.bioage-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text, #0d1b2a);
  cursor: pointer;
  border: 1px solid var(--border, #dce1e8);
  border-radius: 4px;
  padding: 14px 18px;
  min-height: 52px;               /* >= 48px WCAG 2.2 / iOS tap-target */
  background: var(--panel, #fff);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  user-select: none;
}
.bioage-choice:hover {
  border-color: var(--blue, #1e7fd2);
  background: var(--blue-soft, rgba(30, 127, 210, 0.06));
}
.bioage-choice--selected {
  border-color: var(--blue, #1e7fd2);
  background: var(--blue-soft, rgba(30, 127, 210, 0.08));
  color: var(--text, #0d1b2a);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--blue, #1e7fd2);
}

/* Slider */
.bioage-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bioage-slider-value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue, #1e7fd2);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}
.bioage-slider-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bioage-slider {
  flex: 1;
  accent-color: var(--blue, #1e7fd2);
  height: 6px;
  cursor: pointer;
  min-height: 48px;                 /* WCAG tap-target — expands hit area on mobile */
  -webkit-appearance: none;
  background: linear-gradient(to right, transparent, transparent);
}
.bioage-slider-bound {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-3, #6b7684);
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Quiz nav buttons — sticky to viewport bottom on mobile. 16px side padding
 * keeps content away from viewport edges (mobile safe). 12-16px button gap. */
.bioage-quiz-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  position: sticky;
  bottom: 0;
  background: var(--panel, #fff);
  border-top: 1px solid var(--border, #dce1e8);
  margin: 20px -16px 0;             /* pull edges flush with .bioage-quiz-shell padding */
  z-index: 10;
}
@media (min-width: 640px) {
  .bioage-quiz-nav {
    position: static;
    padding: 8px 0 0;
    background: transparent;
    border-top: none;
    margin: 4px 0 0;
    gap: 16px;
  }
}
.bioage-btn {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 20px;
  min-height: 48px;                 /* WCAG 2.2 / iOS tap-target minimum */
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.12s, background 0.12s, border-color 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bioage-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bioage-btn--primary {
  background: var(--blue, #1e7fd2);
  color: #fff;
  border-color: var(--blue, #1e7fd2);
}
.bioage-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
.bioage-btn--ghost {
  background: transparent;
  color: var(--text-2, #3a4555);
  border-color: var(--border, #dce1e8);
}
.bioage-btn--ghost:hover:not(:disabled) {
  background: var(--panel-2, #f4f6fa);
  border-color: var(--border-2, #c5ccd6);
}

/* Progress bar — 6px track with breathing room above/below enforced by
 * .bioage-sticky-progress padding. Don't let the track hug the edges. */
.bioage-progress-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0;
}
.bioage-progress-track {
  flex: 1;
  height: 6px;
  background: var(--border, #dce1e8);
  border-radius: 4px;
  overflow: hidden;
}
.bioage-progress-fill {
  height: 100%;
  background: var(--blue, #1e7fd2);
  border-radius: 4px;
  transition: width 0.25s ease;
}
.bioage-progress-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-3, #6b7684);
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Recovery banner */
.bioage-recovery-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--blue-soft, rgba(30, 127, 210, 0.08));
  border: 1px solid var(--blue, #1e7fd2);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-2, #3a4555);
  margin-bottom: 16px;
}
.bioage-recovery-banner__link {
  font-weight: 600;
  color: var(--blue, #1e7fd2);
  text-decoration: underline;
  white-space: nowrap;
}

/* Dark theme overrides for SPA components */
:root[data-theme="dark"] .bioage-question-card,
body[data-theme="dark"] .bioage-question-card {
  background: var(--panel);
  border-color: var(--border);
}
:root[data-theme="dark"] .bioage-choice,
body[data-theme="dark"] .bioage-choice {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .bioage-choice--selected,
body[data-theme="dark"] .bioage-choice--selected {
  background: var(--blue-soft);
  border-color: var(--blue);
}
:root[data-theme="dark"] .bioage-input-number,
body[data-theme="dark"] .bioage-input-number {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .bioage-sticky-progress,
body[data-theme="dark"] .bioage-sticky-progress {
  background: var(--panel);
  border-bottom-color: var(--border);
}

/*
 * ── Native WP Gutenberg landing (v0.2.0+) ──
 * When landing content lives in wp post_content wrapped in .bioage-landing,
 * standard Gutenberg blocks pick up dashboard design tokens.
 */

.bioage-landing {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
}

.bioage-landing > .bioage-native {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px 64px;
  font-size: 16px;
  line-height: 1.65;
}

.bioage-landing .bioage-native .wp-block-heading,
.bioage-landing .bioage-native h1,
.bioage-landing .bioage-native h2,
.bioage-landing .bioage-native h3 {
  font-family: var(--sans);
  color: var(--text);
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 36px 0 14px;
}

.bioage-landing .bioage-native h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin: 0 0 14px;
}

.bioage-landing .bioage-native h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

.bioage-landing .bioage-native h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bioage-landing .bioage-native h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 10px;
}

.bioage-landing .bioage-native p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 25px;
}

.bioage-landing .bioage-native .has-text-align-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.bioage-landing .bioage-native strong {
  color: var(--text);
  font-weight: 600;
}

.bioage-landing .bioage-native a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--blue-soft);
  text-underline-offset: 2px;
}
.bioage-landing .bioage-native a:hover {
  color: var(--blue-dim);
  text-decoration-color: var(--blue);
}

/* Override Tailwind Preflight from the React SPA bundle which sets
 * ol,ul,menu{list-style:none} globally. Restore bullets/numbers on the
 * native WP landing lists only. */
.bioage-landing .bioage-native ul {
  list-style: disc;
  color: var(--text-2);
  padding-left: 24px;
  margin: 8px 0 25px;
}
.bioage-landing .bioage-native ol {
  list-style: decimal;
  color: var(--text-2);
  padding-left: 24px;
  margin: 8px 0 25px;
}
.bioage-landing .bioage-native ul li,
.bioage-landing .bioage-native ol li {
  margin-bottom: 8px;
  line-height: 1.65;
  display: list-item;
}

/* Hero group: full-bleed panel */
.bioage-landing .bioage-native > .wp-block-group.has-background {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(13, 27, 42, 0.02);
  margin-bottom: 32px;
}

.bioage-landing .bioage-native > .wp-block-group.has-background h1 {
  font-family: var(--sans);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.022em;
  line-height: 1.05;
}

/* CTA button */
.bioage-landing .bioage-native .wp-block-button__link,
.bioage-landing .bioage-native .wp-element-button {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  padding: 14px 32px !important;
  box-shadow: 0 1px 0 rgba(13, 27, 42, 0.04);
  transition: background 140ms ease, transform 140ms ease;
}
.bioage-landing .bioage-native .wp-block-button__link:hover,
.bioage-landing .bioage-native .wp-element-button:hover {
  background: var(--blue-dim) !important;
  transform: translateY(-1px);
}

/* Center buttons group */
.bioage-landing .bioage-native .wp-block-buttons.is-content-justification-center {
  justify-content: center;
  display: flex;
}

/* FAQ block inside .bioage-native (RankMath FAQ block styling) */
.bioage-landing .bioage-native .rank-math-list-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  background: var(--panel);
}
.bioage-landing .bioage-native .rank-math-question {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.bioage-landing .bioage-native .rank-math-answer p {
  color: var(--text-2);
  margin: 6px 0 0;
}

/* Kicker: short uppercase label above H1 */
.bioage-landing .bioage-native p.has-text-align-center[style*="text-transform:uppercase"] {
  font-family: var(--mono);
  color: var(--text-3);
  font-size: 11px !important;
  letter-spacing: 0.14em;
}

/* Inline quiz mount section */
.bioage-landing .bioage-native #outliyr-bioage-root {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 24px;
}

@media (max-width: 640px) {
  .bioage-landing .bioage-native {
    padding: 28px 16px 48px;
  }
  .bioage-landing .bioage-native h1 { font-size: 28px; }
  .bioage-landing .bioage-native h2 { font-size: 22px; margin-top: 28px; padding-top: 10px; }
  .bioage-landing .bioage-native p { font-size: 15px; margin-bottom: 18px; }
  .bioage-landing .bioage-native ul,
  .bioage-landing .bioage-native ol { margin-bottom: 18px; }
  .bioage-landing .bioage-native .wp-block-button__link,
  .bioage-landing .bioage-native .wp-element-button {
    font-size: 16px;
    padding: 13px 24px !important;
  }
}

/* Start page (SPA-only) — narrow container so the quiz centers on desktop */
.bioage-start-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}