/*
 * AadiFit Tool Shell — canonical single-column page layout
 * Every tool page body gets class="tool-page"
 * This file enforces the Codex page order:
 *   breadcrumb → eyebrow → h1 → hero-p → quick-answer → trust-row
 *   → prog-wrap/form → output → pricing → learn → faq → footer
 */

/* Body base */
body.tool-page {
  background: var(--af-bg);
  color: var(--af-text);
  font-family: var(--af-font-base);
  padding-top: var(--af-nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Canonical content shell */
.tool-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px 80px;
  box-sizing: border-box;
}

/* Eyebrow */
.tool-page .rd-eyebrow {
  color: var(--af-red);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 10px;
}

/* H1 */
.tool-page .rd-h1 {
  font-size: clamp(1.9rem,4.5vw,2.6rem);
  font-weight: 800; line-height: 1.1;
  color: #fff; margin: 0 0 14px;
}

/* Hero paragraph */
.tool-page .rd-sub {
  font-size: 16.5px; line-height: 1.55;
  color: var(--af-muted); margin: 0 0 16px; max-width: 680px;
}

/* Breadcrumb */
.tool-page nav.breadcrumb,
.tool-page .breadcrumb {
  font-size: 12.5px; color: var(--af-dim);
  margin-bottom: 22px;
}
.tool-page nav.breadcrumb a,
.tool-page .breadcrumb a { color: var(--af-muted); text-decoration: none; }

/* Hide OLD legacy nav fragments that some pages have above the hero */
.tool-page .tsb-6,
.tool-page .tsb-7,
.tool-page .tsb-8 { display: none !important; }

/* Unhide any hero container that global-nav.js might kill */
.tool-page header.hdr,
.tool-page header.hdr.rd-hero,
.tool-page header.header.rd-hero,
.tool-page div.header.rd-hero,
.tool-page .rd-hero { display: block !important; }
.tool-page header.hdr .page-wrap,
.tool-page header.hdr.rd-hero .page-wrap,
.tool-page header.header.rd-hero .page-wrap,
.tool-page div.header.rd-hero .page-wrap { padding-top: 8px; }
/* Prevent global-nav.js from hiding tool form containers */
.tool-page .tool-header { display: block !important; }
.tool-page .tool-header > * { visibility: visible !important; }

/* Footer */
.tool-page .footer {
  text-align: center;
  padding: 24px 16px;
  border-top: 1px solid var(--af-border);
  color: var(--af-dim); font-size: 13px;
}

@media(max-width:640px) {
  .tool-shell { padding: 16px 16px 60px; }
  .tool-page .rd-h1 { font-size: 1.85rem; }
}