/* ================================================================
   ATSVerse — shared marketing-site chrome
   Used by every page except builder.html (which keeps its own
   self-contained styles). Pairs with the Tailwind CDN + navy config
   block repeated at the top of each page.
   ================================================================ */

body { font-family: 'Inter', system-ui, 'Segoe UI', sans-serif; background: #fff; color: #1e293b; }

/* ---------- nav ---------- */
#siteNav { transition: box-shadow .2s ease, border-color .2s ease; }
#siteNav.is-scrolled { box-shadow: 0 1px 2px rgba(15,32,56,.06), 0 8px 24px -12px rgba(15,32,56,.18); }
.nav-link { position: relative; padding-bottom: 2px; }
.nav-link[aria-current="page"] { color: #16304f; font-weight: 600; }
.nav-link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: #265087; }

.btn-cta {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .8125rem;
  background: #16304f; color: #fff; border-radius: .55rem; padding: .55rem 1rem; transition: .14s;
  white-space: nowrap;
}
.btn-cta:hover { background: #1f416d; }
.btn-cta-lg { font-size: .9375rem; padding: .75rem 1.4rem; border-radius: .65rem; }
.btn-outline {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9375rem;
  color: #16304f; border: 1.5px solid #cbd5e1; border-radius: .65rem; padding: .75rem 1.4rem; transition: .14s;
}
.btn-outline:hover { border-color: #16304f; background: #f8fafc; }

/* ---------- hero decoration ---------- */
.hero-bg {
  background:
    radial-gradient(700px 400px at 85% -10%, rgba(38,80,135,.10), transparent 60%),
    radial-gradient(600px 380px at -5% 10%, rgba(38,80,135,.07), transparent 55%);
}

/* ---------- feature / info cards ---------- */
.feat-card { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; transition: .16s; }
.feat-card:hover { border-color: #c2d4ea; box-shadow: 0 10px 30px -14px rgba(15,32,56,.22); transform: translateY(-2px); }

/* ---------- blog cards ---------- */
.blog-card { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; transition: .16s; overflow: hidden; }
.blog-card:hover { border-color: #c2d4ea; box-shadow: 0 12px 32px -16px rgba(15,32,56,.25); transform: translateY(-2px); }

/* ---------- FAQ accordion (native <details>) ---------- */
.faq-item { border: 1px solid #e2e8f0; border-radius: .85rem; background: #fff; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { transition: transform .18s ease; flex: none; color: #64748b; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid #eef2f7; }

/* ---------- article / prose ---------- */
.article-body { color: #263548; line-height: 1.75; font-size: 1.0625rem; }
.article-body p { margin: 0 0 1.15em; }
.article-body h2 { font-size: 1.375rem; font-weight: 700; color: #16304f; margin: 1.8em 0 .6em; letter-spacing: -.01em; }
.article-body h3 { font-size: 1.125rem; font-weight: 700; color: #101b29; margin: 1.4em 0 .5em; }
.article-body ul, .article-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.article-body li { margin-bottom: .45em; }
.article-body ul li::marker { color: #265087; }
.article-body strong { color: #101b29; font-weight: 700; }
.article-body a { color: #1f416d; font-weight: 600; text-decoration: underline; text-decoration-color: #c2d4ea; text-underline-offset: 2px; }
.article-body a:hover { text-decoration-color: #1f416d; }
.article-callout {
  border: 1px solid #d3e0f0; background: #f2f6fb; border-radius: .85rem;
  padding: 1rem 1.2rem; margin: 1.4em 0; font-size: .95em;
}
.article-callout strong { color: #16304f; }

/* ---------- misc ---------- */
.step-num {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; background: #16304f; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem; flex: none;
}
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #265087; }

@media (max-width: 640px) {
  .article-body { font-size: 1rem; }
}