/*
 * The public pages (home, pricing, how it works, terms, privacy; views/partials/page-header.ejs) in
 * the app's look, without changing their layout: the app's tokens (tokens.css) and Geist over
 * Bootstrap and the old theme.css. Loaded after both, so a rule here only has to match theirs;
 * !important is used only where theme.css or an inline style already uses it.
 * Like the product, these pages stay light (<html data-theme="light">).
 */
html body {
  font-family: var(--f-sans) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--f-sans); font-weight: 700 !important; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
b, strong { font-weight: 600; }
html body a { color: var(--brand) !important; }
html body a:hover { color: var(--brand-hover) !important; }
/* The top links, as the audit page's: quiet ink, the one that matters (Free audit) in brand blue. */
.site-nav a:not(.btn) { color: var(--ink-2) !important; font-weight: 500; }
.site-nav a:not(.btn):hover { color: var(--brand) !important; }
.site-nav a[href="/audit/new"] { color: var(--brand) !important; }
.text-muted { color: var(--muted) !important; }
::selection { background: var(--brand-soft); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The REPLYGUY wordmark: as in the app, Poppins capitals in the sidebar's blue. */
.rg-wordmark span { color: var(--sidebar) !important; }

/* Words picked out in a sentence ("best places", "perfect conversations"): the old slate box, in the
   app's blue. */
.hl { color: #fff; background: var(--sidebar); padding: .04em .28em .08em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Buttons. Green is the one next step, as in the app, with white text as the site has always had; blue is everything else. */
.btn { font-family: var(--f-sans); font-weight: 600; border-radius: var(--r-md) !important; }
.btn-primary-home { background: var(--live) !important; border-color: var(--live) !important; color: #fff !important; }
.btn-primary-home:hover, .btn-primary-home:focus { background: var(--live-hover) !important; border-color: var(--live-hover) !important; color: #fff !important; }
.btn-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }
/* The header's Login button: a quiet outlined pill in the page's blue, like the links beside it, so
   green stays the one bold step on the page. */
.site-nav .btn-primary { background: var(--surface) !important; color: var(--brand-ink) !important; border: 1px solid var(--line-strong) !important; box-shadow: none !important; }
.site-nav .btn-primary:hover, .site-nav .btn-primary:focus { background: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important; }

/* Inputs, as the audit's "Your website". */
.form-control { font-family: var(--f-sans); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-md) !important; background: var(--surface); }
.form-control:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--data-soft); }

/* Panels: plan cards, steps, FAQ. White on the page's blue-grey, one border and the app's shadow. */
.card { border: 1px solid var(--line); border-radius: var(--r-lg) !important; background: var(--surface); box-shadow: var(--shadow) !important; }
.card-header { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.price { color: var(--ink); font-weight: 700; font-size: 35px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fa-check-circle { color: var(--ok); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--brand-soft); color: var(--brand-ink) !important; }

/* Manual vs ReplyGuy: the app's soft red and soft green. */
.cmp-manual { background: var(--bad-soft); border: 1px solid #f6c9c9; }
.cmp-rg { background: var(--ok-soft); border: 1px solid #bfe9d6; }

/* On a phone the top links wrap as words, not letters (they used to break "How it Works" in three). */
@media (max-width: 575px) {
  .site-nav { flex-wrap: wrap; gap: 8px 18px; }
  .site-nav > * { margin: 0 !important; white-space: nowrap; }
}

.modal-content { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }

/* The login popup (home and pricing). theme.css paints every .btn steel blue with !important; these
   win by id. Google keeps its own white sign-in style; signing in by email is the one green step. */
#login .btn[href="/users/auth/google"] { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; box-shadow: none !important; }
#login .btn[href="/users/auth/google"]:hover, #login .btn[href="/users/auth/google"]:focus { background: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--ink) !important; }
#login form .btn[type="submit"] { background: var(--live) !important; border-color: var(--live) !important; color: #fff !important; }
#login form .btn[type="submit"]:hover, #login form .btn[type="submit"]:focus { background: var(--live-hover) !important; border-color: var(--live-hover) !important; color: #fff !important; }