/* Shared shell for the standalone public pages (/welcome/ and /about/).
   Loaded after style.css, which supplies the --ds-* brand tokens plus the
   lockup (#dimeshooter-title), .ds-main-nav link colors, and .ds-public-cta.
   These pages do not load Bootstrap, so all layout lives here. Page-specific
   styles go in landing.css / about.css. */

:root {
  /* Marketing-page aliases derived from the brand tokens */
  --surface: var(--ds-light);
  --carbon: var(--ds-primary);
  --ink: var(--ds-ink);
  --brass: var(--ds-accent);               /* brass on dark backgrounds */
  --brass-deep: var(--ds-accent-on-light); /* brass text/marks on light surfaces */
  --muted: #6B6459;                        /* secondary text on the warm surface */
  --line: #DED8CD;                         /* hairlines on the warm surface */
  --white: var(--ds-white);
  --display: var(--ds-wordmark-font);      /* Space Grotesk display headings */
  --wrap: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--ds-body-font); line-height: 1.6; font-size: 17px;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
a { color: var(--brass-deep); }
h1, h2, h3 { font-family: var(--display); color: var(--carbon); line-height: 1.15; letter-spacing: -0.01em; }
section { padding: 64px 0; border-top: 1px solid var(--line); }
/* Anchored sections land just clear of the sticky header */
section[id] { scroll-margin-top: 96px; }

/* ---- Header ----
   The header is a site-wide component now: the sign-in, sign-up, Ballistics and
   Library pages render the same partial from base.html, and those pages do not
   load this file. Its rules therefore live in style.css, beside the other header
   rules, so one definition serves every page. */

/* ---- Buttons ---- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 13px 22px; border-radius: 7px; font-size: 16px;
  font-family: var(--ds-body-font); border: 0; cursor: pointer;
}
.btn-primary { background: var(--brass); color: var(--carbon); }
.btn-primary:hover { background: #B08D22; color: var(--carbon); } /* matches .ds-public-cta:hover */
.btn-outline { background: transparent; border: 1.5px solid var(--carbon); color: var(--carbon); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ---- Hero (carbon band at the top of each public page) ---- */
.pub-hero { background: var(--carbon); color: var(--surface); border-top: none; padding: 72px 0 76px; }
.pub-hero .eyebrow { color: var(--brass); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; margin: 0 0 18px; }
.pub-hero h1 { color: var(--surface); font-size: clamp(34px, 6vw, 56px); margin: 0; }
.pub-hero .btn-outline { border-color: var(--surface); color: var(--surface); }

/* ---- Section headings, cards ---- */
.section-head { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 8px; }
.section-sub { color: var(--muted); margin: 0 0 34px; font-size: 17px; }
.narrow { max-width: 760px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; }

/* ---- Final CTA band ---- */
.final { background: var(--carbon); color: var(--surface); text-align: center; }
.final h2 { color: var(--surface); font-size: clamp(26px, 4vw, 40px); margin: 0 0 8px; }
.final p { color: #D8D2C6; margin: 0 0 26px; }
.final .btn-outline { border-color: var(--surface); color: var(--surface); }
.final .btn-row { justify-content: center; }

/* ---- Footer ---- */
.pub-footer {
  background: var(--carbon); color: #8A857B; font-size: 13px;
  padding: 28px 0 40px; text-align: center; border-top: 1px solid #2A2B2D;
}
.pub-footer a { color: #CFC9BE; }
.pub-footer-lockup { margin-bottom: 8px; }
.pub-wordmark {
  font-family: var(--ds-wordmark-font); font-weight: 600; font-size: 18px;
  text-transform: lowercase; letter-spacing: -0.01em; color: var(--ds-light);
  display: inline-flex; align-items: center; text-decoration: none;
}
.pub-wordmark img { height: 1em; width: auto; display: block; margin-right: 0.24em; }

@media (max-width: 720px) {
  section { padding: 44px 0; }
  .pub-hero { padding: 52px 0 56px; }
}