/* Shared design system for pingback-crm.com — 2026-09-03.
 *
 * Every page links this file first, then exactly one of:
 *   /home.css  the landing page
 *   /doc.css   long-form documents, confirmation pages, billing returns
 *
 * It holds only what is genuinely common: tokens, the reset, the body
 * ground, the nav pill, buttons and the footer. Anything used by one page
 * family lives in that family's file — the previous single styles.css ended
 * up carrying .thanks, .icon and table rules that most pages never used, and
 * the comment at its top already admitted it.
 *
 * The CSP in deploy/_headers is default-src 'none' with style-src 'self',
 * img-src 'self' data: and font-src 'self'. So: no JavaScript, no hosted
 * images, no webfonts, and no inline style="..." attributes anywhere in the
 * HTML — an inline style is silently dropped, it does not warn. If you need
 * one, add a class here instead.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #0a0a0f;
  --ink-2: #121219;
  --paper: #faf8f5;
  --paper-2: #f0ece6;
  --line-dark: #23232f;
  --line-light: #ddd6cc;
  --fg-dark: #f4f2ef;
  --fg-dark-dim: #a2a0ac;
  --fg-light: #16161c;
  --fg-light-dim: #5d5a55;
  --brand: #4f46e5;
  --brand-soft: #a5b4fc;
  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --chapter: clamp(6rem, 13vw, 11rem);
  --radius: 18px;
  --font: Geist, "Geist Sans", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--ink);
  color: var(--fg-dark);
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

main { overflow-x: hidden; width: 100%; max-width: 100%; }

h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.04; margin: 0; font-weight: 600; }
p { margin: 0 0 1.1em; }
a { color: inherit; }
em { font-style: normal; color: var(--brand-soft); }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.chapter { padding: var(--chapter) 0; position: relative; }
.light { background: var(--paper); color: var(--fg-light); }
.light em { color: var(--brand); }

.kicker {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-soft); margin-bottom: 20px;
}
.light .kicker { color: var(--brand); }

/* Ambient ground: a grain sheet over whatever the section paints. Inline
 * data: URI because img-src forbids any external host. */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 14px; z-index: 60;
  display: flex; justify-content: center;
  padding: 14px var(--gutter) 0;
  pointer-events: none;
}

.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 34px);
  width: 100%; max-width: 860px;
  padding: 9px 9px 9px 20px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(14,14,20,0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 50px -28px rgba(0,0,0,0.9);
}

.wordmark {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -0.03em; font-size: 1.02rem;
  text-decoration: none; margin-right: auto;
}
/* The rail: the product is a slim bar on the right edge of a profile page.
 * It is the identity mark, so it appears in the wordmark too. */
.rail-mark {
  width: 7px; height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-soft), var(--brand));
  box-shadow: 0 0 16px -2px var(--brand);
}

/* Placeholder in the pill on pages that show no nav links, so the markup
 * shape stays identical across every page. */
.nav-spacer { flex: 1 1 auto; }

.nav-links { display: flex; gap: 22px; font-size: 0.9rem; color: var(--fg-dark-dim); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--fg-dark); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* --------------------------------------------------------------- CTAs */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600; font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background-color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
/* Contrast is stated on both sides of every pair: solid brand carries white
 * text, outline carries the surface's own foreground. Never inherited. */
.btn-primary { background: var(--brand); color: #ffffff; }
.btn-primary:hover { background: #4338ca; }
.nav .btn-primary { padding: 11px 20px; font-size: 0.9rem; }
.btn-ghost { color: var(--fg-dark); border-color: rgba(255,255,255,0.22); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.light .btn-ghost { color: var(--fg-light); border-color: rgba(0,0,0,0.18); }
.light .btn-ghost:hover { border-color: rgba(0,0,0,0.42); background: rgba(0,0,0,0.04); }
.btn-invert { background: var(--paper); color: var(--ink); }
.btn-invert:hover { background: #ffffff; }

a:focus-visible, summary:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------- footer */

footer { border-top: 1px solid var(--line-dark); padding: 44px 0 60px; color: var(--fg-dark-dim); font-size: 0.9rem; }
.foot { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: baseline; }
.foot p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
footer a:hover { color: var(--fg-dark); border-color: var(--brand-soft); }

/* Scroll-reveal, shared by every page that opts in with .reveal.
 * Range is entry-relative on BOTH ends on purpose: an end expressed in
 * `cover` is proportional to the subject's own height, so a tall block sat
 * at opacity 0 for hundreds of pixels of scroll after it was already on
 * screen. Entry-to-entry finishes as the block finishes arriving. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}