/* ── Shared site chrome for the standalone marketing pages ──────────────────
   why.html · grow-closer.html · grow-closer-print.html

   Those three pages arrived self-contained, each with its own inline CSS and its
   own colour vocabulary (.btn, .cta, .row, .card, .foot, .brand all mean
   different things in each file). Loading the main styles.css into them would
   collide immediately, so this is a deliberately small, fully namespaced
   stylesheet: every selector is .qc-*, so it cannot touch page styles.

   It carries its own colours rather than inheriting, because it has to sit
   legibly on three different page backgrounds in both light and dark schemes.
   ------------------------------------------------------------------------- */

.qc-nav, .qc-foot {
  --qc-night: #12142A;
  --qc-night-2: #1B1E3A;
  --qc-gold: #F4B860;
  --qc-on: #EFEADD;
  --qc-soft: #B9B5A8;
  --qc-line: rgba(244, 184, 96, .18);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  box-sizing: border-box;
}
.qc-nav *, .qc-foot * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.qc-nav {
  background: var(--qc-night);
  border-bottom: 1px solid var(--qc-line);
  padding: 0 20px;
  width: 100%;
}
.qc-nav-in {
  max-width: 1080px;
  margin: 0 auto;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.qc-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--qc-on);
  margin-right: auto;
}
.qc-brand svg { width: 24px; height: 24px; flex-shrink: 0; }
.qc-brand b {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.qc-brand .qc-ar { color: var(--qc-gold); font-weight: 500; }

.qc-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.qc-links a {
  color: var(--qc-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}
.qc-links a:hover { color: var(--qc-gold); }
.qc-links a[aria-current="page"] { color: var(--qc-gold); }

.qc-cta {
  background: var(--qc-gold);
  color: #1C1608 !important;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 17px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
}
.qc-cta:hover { filter: brightness(1.06); }

@media (max-width: 560px) {
  .qc-nav-in { gap: 12px; min-height: 54px; }
  .qc-links { gap: 14px; order: 3; width: 100%; }
  .qc-links a { font-size: 13.5px; }
  .qc-brand b { font-size: 16px; }
  .qc-cta { padding: 8px 14px; font-size: 13.5px; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.qc-foot {
  background: var(--qc-night-2);
  border-top: 1px solid var(--qc-line);
  padding: 30px 20px 34px;
  width: 100%;
  margin-top: 48px;
}
.qc-foot-in { max-width: 1080px; margin: 0 auto; text-align: center; }
.qc-foot-links {
  display: flex;
  gap: 8px 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.qc-foot-links a {
  color: var(--qc-soft);
  font-size: 13.5px;
  text-decoration: none;
  transition: color .2s;
}
.qc-foot-links a:hover { color: var(--qc-gold); }
.qc-foot-note { color: #8B8879; font-size: 12px; line-height: 1.6; margin: 0; }
.qc-foot-note a { color: var(--qc-soft); text-decoration: none; }
.qc-foot-note a:hover { color: var(--qc-gold); }

/* The one-pager is designed to be printed; chrome must not appear on paper. */
@media print { .qc-nav, .qc-foot { display: none !important; } }

/* ── Layout guard ───────────────────────────────────────────────────────────
   The three marketing pages centre their content with `body { display:flex }`.
   Left alone, the injected header and footer become flex siblings of the page
   content — side-by-side on the row-direction pages. The content is wrapped in
   <main class="qc-main">, which carries the original body layout, and the body
   is neutralised here. `body.qc-page` (0,1,1) outranks a bare `body` (0,0,1),
   so this holds regardless of stylesheet order. Background, colour and font
   stay on the body so the page still fills the viewport.
   ------------------------------------------------------------------------- */
body.qc-page { display: block; padding: 0; margin: 0; }