/*
 * Outliyr Biological Age — shared public styles.
 * Matches the outliyr-dashboard design system (IBM Plex stack, 4px radius,
 * hairline grids, mono kickers, blue accent). Light theme by default to blend
 * into outliyr.com's light WP site; honours data-theme="dark" when set.
 */

/* Reserve layout space for the React SPA mount so hydration doesn't cause CLS. */
.outliyr-bioage-root {
  min-height: 600px;
  display: block;
}
@media (min-width: 768px) {
  .outliyr-bioage-root {
    min-height: 520px;
  }
}

.bioage-landing,
.bioage-methodology {
  --bg: #F7F8FA;
  --bg-2: #EEF1F6;
  --panel: #FFFFFF;
  --panel-2: #F4F6FA;
  --panel-3: #EBEFF5;
  --border: #DCE1E8;
  --border-2: #C5CCD6;
  --text: #0D1B2A;
  --text-2: #3A4555;
  --text-3: #6B7684;
  --text-4: #A0A9B4;
  --blue: #1E7FD2;
  --blue-dim: #0F5A9A;
  --blue-ink: #1B5E95;
  --blue-soft: rgba(30, 127, 210, 0.08);
  --green: #2F9960;
  --yellow: #B8941E;
  --orange: #C0631B;
  --red: #C2383A;
  --violet: #6B4FB8;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
  --radius: 4px;

  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  position: relative;
  isolation: isolate;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .bioage-landing,
:root[data-theme="dark"] .bioage-methodology,
body[data-theme="dark"] .bioage-landing,
body[data-theme="dark"] .bioage-methodology {
  --bg: #0A0B0D;
  --bg-2: #0F1114;
  --panel: #13161B;
  --panel-2: #181B22;
  --panel-3: #1D2129;
  --border: #22262F;
  --border-2: #2D323C;
  --text: #E8EBF0;
  --text-2: #AAB3BE;
  --text-3: #6E7684;
  --text-4: #4A5160;
  --blue: #3DA5FF;
  --blue-dim: #1E5C96;
  --blue-ink: #9DD0FF;
  --blue-soft: rgba(61, 165, 255, 0.10);
  --green: #4CCE8A;
  --yellow: #F2D046;
  --orange: #F08A3E;
  --red: #E85D5D;
  --violet: #B99CF0;
}

.bioage-landing::before,
.bioage-methodology::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1000px 500px at 90% -10%, var(--blue-soft), transparent 60%),
    radial-gradient(700px 450px at -10% 110%, rgba(184, 148, 30, 0.04), transparent 60%);
}
.bioage-landing > *,
.bioage-methodology > * { position: relative; z-index: 1; }

.bioage-landing *,
.bioage-methodology * { box-sizing: border-box; }

/* Hide WP theme chrome on bioage pages (the in-content hero supplies its own H1) */
body.page-id-74016 .entry-header,
body.page-id-74016 .entry-title,
body.page-id-74016 .breadcrumbs,
body.page-id-74016 .page-hero,
body.page-id-74017 .entry-header,
body.page-id-74017 .entry-title,
body.page-id-74017 .breadcrumbs,
body.page-id-74017 .page-hero { display: none !important; }

/* Match the article column width of a normal sidebar'd post (~960px) without
 * adding a sidebar widget. The page's no-sidebar layout otherwise renders
 * at the full 1200px page container, which is wider than the site's normal
 * post reading width.
 *
 * Apply at every level of the wrapper chain with !important to defeat any
 * inherited width / margin rules (e.g. .one-container.right-sidebar
 * .site-main { margin-right: 40px } and similar GeneratePress layout
 * variants that apply via cascade). */
body.page-id-74016 .grid-container.container,
body.page-id-74016 #content,
body.page-id-74016 #primary,
body.page-id-74016 main#main,
body.page-id-74016 article#post-74016,
body.page-id-74016 .inside-article,
body.page-id-74016 .entry-content {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  /* Without explicit width:auto + min-width:0 on mobile, the editorial body
   * children (especially the comparison <figure>) push the parent wider than
   * the viewport, silently clipping every paragraph because body has
   * overflow-x:hidden. Lock the chain to viewport width on narrow screens. */
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Mobile-only constraint — every editorial child of .entry-content on the
 * landing page must respect the parent width. The hero `.wp-block-group`
 * is intentionally excluded so its inline-styled card layout still works. */
@media (max-width: 600px) {
  body.page-id-74016 .entry-content,
  body.page-id-74016 .entry-content > *:not(.wp-block-group):not(#outliyr-bioage-root) {
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
  body.page-id-74016 .entry-content figure.wp-block-table,
  body.page-id-74016 .entry-content table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }
}

/* Reserve the post-hydrate height on the SPA root so the skeleton-to-app
 * collapse doesn't trigger a second LCP entry on mobile (LCP was firing
 * twice — first on the lede paragraph, again on .ssr-skeleton__lede during
 * hydration). Setting min-height to match the live quiz height holds the
 * layout firm. */
body.page-id-74016 #outliyr-bioage-root {
  min-height: 620px;
}

/* Don't render-block on the React app's CSS — but it's only 2KB so we
 * accept the small block to keep the markup simple. (If perf budget gets
 * tighter later, switch to `media="print"` + onload swap in class-assets.php
 * enqueue.) */

.bioage-landing h1, .bioage-landing h2, .bioage-landing h3, .bioage-landing h4,
.bioage-landing p, .bioage-landing a, .bioage-landing li, .bioage-landing span,
.bioage-landing strong, .bioage-landing em, .bioage-landing dt, .bioage-landing dd,
.bioage-methodology h1, .bioage-methodology h2, .bioage-methodology h3, .bioage-methodology h4,
.bioage-methodology p, .bioage-methodology a, .bioage-methodology li, .bioage-methodology span,
.bioage-methodology strong, .bioage-methodology em, .bioage-methodology dt, .bioage-methodology dd {
  color: inherit;
}
.bioage-landing a, .bioage-methodology a { text-decoration: none; }
.bioage-landing h1, .bioage-landing h2, .bioage-landing h3, .bioage-landing p, .bioage-landing ul, .bioage-landing ol, .bioage-landing dl,
.bioage-methodology h1, .bioage-methodology h2, .bioage-methodology h3, .bioage-methodology p, .bioage-methodology ul, .bioage-methodology ol, .bioage-methodology dl {
  margin: 0;
}

/* Button — matches dashboard .od-btn */
.bio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
.bio-btn:hover:not(:disabled) { filter: brightness(1.08); }
.bio-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bio-btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.bio-btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--border-2);
  filter: none;
}

/* Kicker — dashboard .hero__kicker pattern */
.bio-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;
  font-weight: 500;
}
.bio-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 153, 96, 0.18);
}

/* Card — dashboard .card */
.bio-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bio-card:hover { border-color: var(--border-2); }
.bio-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.bio-card__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bio-card__title strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.bio-card__title small {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bio-card__body { padding: 16px; }

@media print {
  .bioage-landing::before,
  .bioage-methodology::before { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * SSR skeleton (inside #outliyr-bioage-root[data-ssr-skeleton])
 *
 * Server-rendered fallback that's visible BEFORE React hydrates. Purpose:
 *   1. LLM crawlers (ClaudeBot, GPTBot, PerplexityBot, CCBot, Amazonbot)
 *      see real content instead of an empty div.
 *   2. Prevents CLS — reserves ~620px until the SPA mounts.
 *   3. Shows humans a helpful "this is what the tool does" preview while
 *      the bundle is being fetched / lazy-hydrated.
 *
 * React's mount() clears these children — styles only need to render the
 * static markup, never animate or interact.
 * ───────────────────────────────────────────────────────────────────────── */
.bioage-ssr-skeleton {
  font-family: var(--sans, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif);
  color: var(--text, #0D1B2A);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  max-width: 960px;
  margin: 0 auto;
}

.bioage-ssr-skeleton__intro { display: flex; flex-direction: column; gap: 14px; }

.bioage-ssr-skeleton__kicker {
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #6B7684);
  margin: 0;
  font-weight: 500;
}

.bioage-ssr-skeleton__title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text, #0D1B2A);
  margin: 0;
}

.bioage-ssr-skeleton__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2, #3A4555);
  margin: 0;
  max-width: 72ch;
}

.bioage-ssr-skeleton__section-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text, #0D1B2A);
  margin: 0 0 14px;
}

.bioage-ssr-skeleton__systems { display: block; }

.bioage-ssr-skeleton__system-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 700px) {
  .bioage-ssr-skeleton__system-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

.bioage-ssr-skeleton__system {
  background: var(--panel, #FFFFFF);
  border: 1px solid var(--border, #DCE1E8);
  border-radius: var(--radius, 4px);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bioage-ssr-skeleton__system-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #0D1B2A);
  margin: 0;
  line-height: 1.3;
}

.bioage-ssr-skeleton__system-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2, #3A4555);
  margin: 0;
}

.bioage-ssr-skeleton__system-q {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3, #6B7684);
  margin: 0;
}
.bioage-ssr-skeleton__q-label {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3, #6B7684);
  margin-right: 4px;
}

.bioage-ssr-skeleton__result-card {
  background: var(--panel-2, #F4F6FA);
  border: 1px solid var(--border, #DCE1E8);
  border-radius: var(--radius, 4px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bioage-ssr-skeleton__result-line {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2, #3A4555);
  margin: 0;
}
.bioage-ssr-skeleton__result-line strong {
  color: var(--text, #0D1B2A);
  font-weight: 600;
}

.bioage-ssr-skeleton__cta {
  font-size: 13px;
  color: var(--text-3, #6B7684);
  text-align: center;
  margin: 0;
  padding: 8px 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Focus-visible rings — applied across all interactive bioage controls.
 * WCAG 2.4.7 + 2.4.11 (focus-not-obscured). 3px outline in brand orange
 * with offset so it reads against both panel + blue-soft backgrounds.
 * ───────────────────────────────────────────────────────────────────────── */
.bioage-landing .bioage-btn:focus-visible,
.bioage-landing .bioage-choice:focus-within,
.bioage-landing .bioage-input-number:focus-visible,
.bioage-landing .bioage-slider:focus-visible,
.bioage-landing .bioage-q-skip:focus-visible,
.bioage-landing .bioage-q-ext-link:focus-visible,
.outliyr-bioage-root .bioage-btn:focus-visible,
.outliyr-bioage-root .bioage-choice:focus-within,
.outliyr-bioage-root .bioage-input-number:focus-visible,
.outliyr-bioage-root .bioage-slider:focus-visible,
.outliyr-bioage-root .bioage-q-skip:focus-visible,
.outliyr-bioage-root .bioage-q-ext-link:focus-visible {
  outline: 3px solid #F0AB1C;           /* Outliyr brand orange */
  outline-offset: 2px;
  border-color: #F0AB1C;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Editorial content typography inside .bioage-landing
 *
 * The .bioage-landing wrapper sets font-size:14px on the whole article and
 * zeroes margins on direct headings/paragraphs (see rules above at lines
 * 48 and 137-140). Those constraints were built for the minimal SPA shell
 * but leave editorial post_content H2/H3/p/lists/tables looking like body
 * text. These rules restore proper heading/body/list/table typography for
 * the long-form SEO landing content rendered below/around the quiz.
 *
 * Specificity: all selectors pin to `.bioage-landing` + element + class so
 * they win over the `margin: 0` reset without needing !important.
 * ────────────────────────────────────────────────────────────────────────── */

.bioage-landing h2.wp-block-heading,
.bioage-methodology h2.wp-block-heading,
body.page-id-74016 .entry-content h2,
body.page-id-74016 .entry-content h2.wp-block-heading {
  font-family: var(--sans);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 48px 0 16px;
  padding-top: 0;
  border-top: 0;
}

.bioage-landing h3.wp-block-heading,
.bioage-methodology h3.wp-block-heading,
body.page-id-74016 .entry-content h3,
body.page-id-74016 .entry-content h3.wp-block-heading {
  font-family: var(--sans);
  font-size: clamp(20px, 2.3vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin: 32px 0 12px;
}

/* Paragraphs rendered inside the editorial article (not the hero/SPA). */
.bioage-landing article.bioage-landing,
.bioage-landing .entry-content > p,
body.page-id-74016 .entry-content > article p,
body.page-id-74016 .entry-content p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 18px;
}

/* Lists — typography + restore bullets/numbers (the React app's Tailwind
 * preflight applies `ol, ul, menu { list-style: none }` globally, which
 * strips bullets from the editorial body lists). */
body.page-id-74016 .entry-content ul.wp-block-list,
body.page-id-74016 .entry-content ol.wp-block-list {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
  margin-top: 0;
  margin-bottom: 22px;
  padding-left: 1.5em;
}
body.page-id-74016 .entry-content ul.wp-block-list { list-style: disc; }
body.page-id-74016 .entry-content ol.wp-block-list { list-style: decimal; }
body.page-id-74016 .entry-content ul.wp-block-list li,
body.page-id-74016 .entry-content ol.wp-block-list li { display: list-item; }
/* (li margin handled with longhand below) */

/* Comparison and data tables */
body.page-id-74016 .entry-content .wp-block-table {
  margin: 24px 0 32px;
  font-size: 15px;
  overflow-x: auto;
}
body.page-id-74016 .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
body.page-id-74016 .entry-content .wp-block-table th,
body.page-id-74016 .entry-content .wp-block-table td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
body.page-id-74016 .entry-content .wp-block-table th {
  background: var(--panel-2);
  font-weight: 600;
  color: var(--text);
}

/* Editorial links — exclude buttons and the CTA */
body.page-id-74016 .entry-content a:not(.wp-block-button__link):not(.bioage-cta):not(.outliyr-author-bio__name a) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.page-id-74016 .entry-content a:not(.wp-block-button__link):not(.bioage-cta):hover {
  color: var(--blue-dim);
}

/* CTA button — beat .has-vivid-cyan-blue-background-color !important + button defaults */
body.page-id-74016 .entry-content a.bioage-cta,
body.page-id-74016 .entry-content a.wp-block-button__link.bioage-cta {
  background-color: #0277BD !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* Center the button itself within its flex container — `.wp-block-button`
 * was left-aligning inside `.wp-block-buttons.is-content-justification-center`
 * because the layout's justify-content rule wasn't reaching the button block. */
body.page-id-74016 .entry-content .wp-block-button {
  margin-left: auto;
  margin-right: auto;
}
body.page-id-74016 .entry-content a.bioage-cta:hover,
body.page-id-74016 .entry-content a.wp-block-button__link.bioage-cta:hover {
  background-color: #015D94 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* <strong> inside editorial content */
body.page-id-74016 .entry-content strong {
  font-weight: 600;
  color: var(--text);
}

/* RankMath FAQ blocks render as div.rank-math-block; restore spacing */
body.page-id-74016 #rank-math-faq .rank-math-list-item {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}
body.page-id-74016 #rank-math-faq .rank-math-question {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}
body.page-id-74016 #rank-math-faq .rank-math-answer {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Author bio reusable block (aside.outliyr-author-bio) already has inline
 * styles; ensure it isn't squashed by the margin:0 parent reset.
 * Use longhand top/bottom only — left/right handled by column-center rule. */
body.page-id-74016 .entry-content aside.outliyr-author-bio {
  margin-top: 32px;
  margin-bottom: 32px;
  /* Strengthen the card edge — the inline border (#e5e7eb 1px) is barely
   * visible against the inline background (#f8f9fb). !important is needed
   * to beat the inline styles from the reusable block source. */
  border: 1px solid #94a3b8 !important;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06), 0 1px 2px rgba(13, 27, 42, 0.04);
}

/* Mobile: the reusable block hard-codes flex-direction:row inline, which
 * crushes the text into a narrow column next to the 128px headshot below
 * ~600px wide. Stack vertically on mobile. */
@media (max-width: 700px) {
  body.page-id-74016 .entry-content aside.outliyr-author-bio {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  body.page-id-74016 .entry-content aside.outliyr-author-bio img {
    width: 96px !important;
    height: auto !important;
  }
}

/* Medical disclaimer callout */
body.page-id-74016 .entry-content .bioage-disclaimer-callout {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* List items inside lists — also use longhand */
body.page-id-74016 .entry-content ul.wp-block-list li,
body.page-id-74016 .entry-content ol.wp-block-list li {
  margin-top: 0;
  margin-bottom: 8px;
}

/* Mobile: scale down the section spacing */
@media (max-width: 760px) {
  .bioage-landing h2.wp-block-heading {
    font-size: 24px;
    margin: 36px 0 12px;
  }
  .bioage-landing h3.wp-block-heading {
    font-size: 19px;
    margin: 24px 0 10px;
  }
  body.page-id-74016 .entry-content p,
  body.page-id-74016 .entry-content ul.wp-block-list,
  body.page-id-74016 .entry-content ol.wp-block-list {
    font-size: 16px;
  }
  body.page-id-74016 .entry-content .wp-block-table {
    font-size: 13px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Editorial content column constraint
 *
 * .bioage-landing is a full-viewport-width wrapper (see lines 53-57) so
 * the hero + SPA can go full-bleed. But editorial post_content (H2, P,
 * lists, tables, FAQ, author bio, disclaimer) should read inside a normal
 * centered content column like every other blog post on the site — not
 * stretch edge-to-edge.
 *
 * Constrain direct editorial children of .bioage-landing to a 760px column
 * with side padding. The hero group (.wp-block-group) and SPA wrapper
 * (.outliyr-bioage-root, .bioage-native) are intentionally excluded so
 * they keep their full-bleed behavior.
 * ────────────────────────────────────────────────────────────────────────── */

body.page-id-74016 article.bioage-landing > h2,
body.page-id-74016 article.bioage-landing > h3,
body.page-id-74016 article.bioage-landing > p,
body.page-id-74016 article.bioage-landing > ul,
body.page-id-74016 article.bioage-landing > ol,
body.page-id-74016 article.bioage-landing > figure.wp-block-table,
body.page-id-74016 article.bioage-landing > aside,
body.page-id-74016 article.bioage-landing > .bioage-disclaimer-callout,
body.page-id-74016 article.bioage-landing > #rank-math-faq,
body.page-id-74016 article.bioage-landing > .wp-block-spacer {
  max-width: 760px;
  /* !important to beat any 2-value margin shorthand from earlier rules
   * (e.g. margin: 48px 0 → margin-left/right:0) without fighting them
   * one by one. Layout-level override on a single page scope. */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Spacers inside the editorial column should still span the column */
body.page-id-74016 article.bioage-landing > .wp-block-spacer {
  padding-left: 0;
  padding-right: 0;
}

/* Tables sometimes overflow 760px; allow horizontal scroll inside the column */
body.page-id-74016 article.bioage-landing > figure.wp-block-table {
  overflow-x: auto;
}

/* Author bio aside already has its own internal padding; only constrain width */
body.page-id-74016 article.bioage-landing > aside.outliyr-author-bio {
  padding-left: 20px;
  padding-right: 20px;
}

/* The first H2 of the editorial section needs extra top margin to separate
 * it from the hero group that precedes it */
body.page-id-74016 article.bioage-landing > h2:first-of-type {
  margin-top: 56px;
}