/* Shared styles for the pingback-crm.com static pages.
 *
 * Extracted from four inline <style> blocks on 2026-08-27 so the site's CSP
 * no longer needs style-src 'unsafe-inline', which ZAP reported as a Medium
 * (rule 10055) against every page. 'unsafe-inline' defeats a meaningful part
 * of what a CSP is for — with it, injected markup can carry its own styling,
 * which is the basis of CSS-based exfiltration and UI-redress tricks. The
 * pages had no inline style="..." attributes either, so moving the blocks to
 * one file removed the need for the directive completely rather than merely
 * reducing it.
 *
 * One file for all four pages, deliberately: they share almost every rule,
 * and a per-page split would have meant four near-identical files drifting
 * apart. Rules that apply to only one page (.meta, table, .icon) are
 * harmless where unused.
 */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  line-height: 1.6;
  color: #1a1a1a;
  /* Explicit, rather than inherited from the browser default. Without it the
   * pages render dark text on whatever ground the browser supplies, which is
   * unreadable anywhere a dark default applies (Chrome's Auto Dark Mode, some
   * embedded webviews, several mobile readers). These pages are a deliberate
   * light design — there is no dark palette to switch to — so the safe thing
   * is to state the background they were designed against instead of hoping
   * for it. Caught on the landing page, fixed here because the privacy policy
   * and billing return pages had the same latent problem.
   */
  background: #fff;
}

h1 {
  font-size: 2rem;
  margin-bottom: 4px;
}

/* The privacy policy is a long document rather than a landing page, so its
 * title sits a step smaller. Preserved exactly as it was before extraction —
 * this refactor is not the place to change how anything looks.
 */
body.doc h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.25rem;
  margin-top: 2.2em;
  border-top: 1px solid #ddd;
  padding-top: 1em;
}

.tagline {
  color: #555;
  font-size: 1.1rem;
  margin-bottom: 2em;
}

.meta {
  color: #555;
  font-size: 0.9rem;
  margin-bottom: 2em;
}

.icon {
  font-size: 2.5rem;
  margin-bottom: 0.2em;
}

ul {
  padding-left: 1.3em;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
}

th {
  background: #f5f5f5;
}

code {
  background: #f2f2f2;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

a {
  color: #0645ad;
}

.cta {
  margin: 1.5em 0;
}

.cta a {
  display: inline-block;
  padding: 10px 20px;
  background: #4f46e5;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

footer {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid #ddd;
  color: #555;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
 * Landing page (2026-09-01, docs/marketing/campaign-plan.md §6.5).
 *
 * Added when index.html stopped being a compliance page and became the
 * campaign's entry point. Everything here is scoped to .home or to elements
 * that only the landing page and thank-you page use, so the privacy policy
 * and billing return pages render exactly as they did before.
 *
 * No JavaScript anywhere on this site, by design: deploy/_headers sets
 * default-src 'none' with no script-src at all. The signup form is a plain
 * HTML POST to the API, which 303s back to /thanks/. That is why there is no
 * client-side validation styling here — the browser's own required/type=email
 * handling is the whole of it.
 * ------------------------------------------------------------------- */

.home {
  max-width: 720px;
}

.home h1 {
  font-size: 2.1rem;
  line-height: 1.25;
  margin-bottom: 0.3em;
}

/* The landing page's section rules are heavier than the documents' — it is
 * scanned, not read, so the breaks need to be findable at a glance.
 */
.home h2 {
  font-size: 1.35rem;
  margin-top: 2.6em;
}

.lede {
  font-size: 1.15rem;
  color: #333;
  margin-bottom: 1.6em;
}

/* Signup form. Stacks on narrow screens, sits on one line above ~520px. */
.signup {
  background: #f7f7fb;
  border: 1px solid #e2e2ee;
  border-radius: 8px;
  padding: 20px;
  margin: 1.8em 0;
}

.signup form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}

.signup input[type="email"] {
  flex: 1 1 240px;
  padding: 11px 12px;
  border: 1px solid #bbb;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  color: #1a1a1a;
  background: #fff;
}

.signup button {
  padding: 11px 22px;
  background: #4f46e5;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.signup button:hover {
  background: #4338ca;
}

/* Visible focus ring: the form is keyboard-operable and there is no script to
 * manage focus, so the default must not be removed.
 */
.signup input[type="email"]:focus-visible,
.signup button:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
}

.signup .fine {
  font-size: 0.88rem;
  color: #555;
  margin: 0;
}

/* "What it doesn't do" — the negative claims carry the trust load on a page
 * with no reviews yet, so each one gets its own visible boundary.
 */
.nots p {
  border-left: 3px solid #d8d8e4;
  padding-left: 14px;
  margin: 1em 0;
}

.nots strong {
  color: #1a1a1a;
}

.faq h3 {
  font-size: 1rem;
  margin-bottom: 0.3em;
  margin-top: 1.8em;
}

.faq p {
  margin-top: 0;
  color: #333;
}

.fit {
  margin: 1em 0;
}

.note {
  font-size: 0.92rem;
  color: #555;
}

/* Thank-you page: one short confirmation, centred, nothing else on it. */
.thanks {
  text-align: center;
  padding-top: 60px;
}

.thanks .position {
  font-size: 2.6rem;
  font-weight: 700;
  color: #4f46e5;
  margin: 0.2em 0;
}

/* Quoted clauses in the account-risk piece. The whole point of that page is
 * that the reader can tell our words from LinkedIn's, so the boundary has to
 * be visible rather than implied by punctuation alone.
 */
blockquote {
  margin: 1.2em 0;
  padding: 12px 18px;
  border-left: 4px solid #4f46e5;
  background: #f7f7fb;
  font-size: 0.95rem;
  color: #333;
}