/* Components added by the rewrite of 17 Oct 2026: the home page sections,
   staged lists, quotations, data tables, the routine pages, the routine check,
   the pilot form's checkbox group, the blog's closing link and the footer.
   Colours and radii come from style.css's tokens, so both themes and "More
   contrast" apply. */

/* Header: seven links and the pilot button need more room than the old row,
   so the menu takes over below 1160px (style.css switches at 860px). */
/* The logo keeps its width at large browser text sizes (at 175% the links
   otherwise slid over the wordmark). */
.top .brand { flex-shrink: 0; }
@media (max-width: 1160px) {
  .nav > a:not(.nav-cta) { display: none; }
  .burger { display: inline-flex; }
  .nav { gap: 10px; }
}

/* Home */
.home-main .home-hero { grid-template-columns: 1fr; padding: 72px 0 40px; }
.home-main .home-hero .hero-copy { max-width: 860px; }
.home-main .hero h1.hero-claim { font-size: clamp(2.25rem, 5vw, 4rem); }
.home-main .lede { max-width: 760px; }
.hero-note { margin: 16px 0 0; color: var(--muted); }
.home-section { padding: 48px 0; border-top: 1px solid var(--line); }
.home-section > h2 { font-size: clamp(1.625rem, 3.4vw, 2.375rem); line-height: 1.12; margin: 0 0 14px; font-weight: 800; max-width: 860px; }
.section-lede { font-size: 1.0625rem; color: var(--ink-2); max-width: 760px; margin: 0 0 14px; }
.section-lede a, .home-section a:not(.btn-primary):not(.btn-ghost) { color: var(--cyan); }
.legs-row { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.legs-row li { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--panel); color: var(--ink-2); }
.legs-row strong { display: block; color: var(--ink); }
.home-example .bf-proof { max-width: 640px; }
.home-main .signup { margin-top: 24px; }

/* Numbered stages (home, How it works, Builders) */
.stage-list { padding-left: 1.4em; margin: 0 0 12px; display: grid; gap: 12px; max-width: 820px; }
.stage-list li { color: var(--ink-2); padding-left: 4px; }
.stage-list strong { color: var(--ink); }

/* Quotations (content/quotes.mjs) */
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quote { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: 14px; background: var(--panel); }
.quote-grid .quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: 1.0625rem; color: var(--ink); }
.quote figcaption { margin-top: 10px; font-size: 0.9062rem; color: var(--muted); }
.quote-name { color: var(--ink-2); font-weight: 650; }
.quote figcaption a { color: var(--cyan); }
.article .quote { max-width: 720px; }
.article pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }

/* Data tables, scrollable inside their own region on small screens */
.table-scroll { overflow-x: auto; max-width: 100%; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 14px; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.data-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9375rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.data-table thead th { color: var(--muted); font-weight: 650; font-size: 0.875rem; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody th { color: var(--ink); font-weight: 650; }
.data-table td { color: var(--ink-2); }
.compare-table { min-width: 860px; }
.compare-table .row-us > * { background: var(--panel-2); }
.content ul.spaced li { margin-bottom: 10px; }

/* Routines */
.routines-footer { margin-top: 18px; }
.legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.legs div { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--panel); }
.legs dt { font-weight: 650; color: var(--muted); font-size: 0.875rem; }
.legs dd { margin: 4px 0 0; color: var(--ink); }
.hidden-instruction { margin: 0 0 12px; padding: 14px 16px; border: 1px dashed var(--error); border-radius: 12px; color: var(--ink-2); max-width: 760px; }
.hidden-instruction p { margin: 0; }

/* Check a routine (/fit/) */
.fit-check { max-width: 760px; margin-top: 24px; }
.fit-q { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 12px; background: var(--panel); }
.fit-q legend { padding: 0 6px; font-weight: 650; color: var(--ink); }
.fit-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 0.875rem; margin-right: 6px; }
.fit-answers { display: flex; gap: 22px; margin-top: 10px; }
.fit-answers label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.fit-answers input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.fit-results { max-width: 760px; margin-top: 18px; }
.fit-results h2:focus { outline: none; }
.fit-results h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.fit-result-list { margin: 0; display: grid; gap: 10px; }
.fit-result-list div { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--panel); }
.fit-result-list dt { font-weight: 650; color: var(--muted); font-size: 0.875rem; }
.fit-result-list dd { margin: 4px 0 0; color: var(--ink); font-size: 1.0625rem; }

/* The pilot form's checkbox group (content/interest.mjs) */
.check-group { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.check-group legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.check-group .check { margin-top: 8px; }

/* About */
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 820px; }
.principles li { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--panel); color: var(--ink-2); }
.principles strong { color: var(--ink); }

/* Blog: every post ends with the demo */
.post-end { margin: 36px 0 8px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); max-width: 760px; }
.post-end h2 { margin: 0 0 8px; font-size: 1.25rem; }
.post-end p { margin: 0 0 12px; color: var(--ink-2); }
.post-end p:last-child { margin-bottom: 0; }
.page-end { margin-top: 32px; }

/* Footer */
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.site-footer .footer-legal { font-size: 0.8125rem; }

@media (max-width: 760px) {
  .legs-row, .legs, .quote-grid { grid-template-columns: 1fr; }
  .home-main .home-hero { padding-top: 44px; }
}