/*
 * Billsift public site: the few rules app.css does not have.
 * Source: site/assets/site.css. npm run build:site copies it to public/site.css.
 * app.css is loaded first and is not edited here; everything here is scoped to body.site
 * unless it only adds a new class.
 */

/* ---- accent: deep green. White on #15803d is 5.0:1, on #166534 7.1:1 ---- */

.site {
  --accent: #15803d;
  --accent-hover: #166534;
  --accent-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --focus: #86efac;
    --focus-ring: 0 0 0 3px rgba(134, 239, 172, 0.4);
    --wash-1: rgba(34, 197, 94, 0.16);
  }
}

/* ---- brand mark (the letter C) and the closing band: green family only ---- */

.site .logo {
  background: linear-gradient(140deg, #15803d 0%, #14532d 100%);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.site .cta-band {
  background: radial-gradient(600px 240px at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(140deg, #14532d 0%, #15803d 100%);
}

.site .cta-band p {
  color: rgba(255, 255, 255, 0.94);
}

.site .cta-band a:not(.btn) {
  color: #ffffff;
}

.site .cta-band .btn.primary {
  --btn-bg: #ffffff;
  --btn-fg: #14532d;
  --btn-line: #ffffff;
}

.site .cta-band .btn.primary:hover {
  --btn-bg: #f0fdf4;
}

.site .cta-band .btn {
  white-space: normal;
  text-align: center;
}

/* ---- staging band under the header: only in the staging build ---- */

.staging-band {
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  color: var(--text);
}

.staging-band p {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---- breadcrumb above a guide ---- */

.crumb {
  margin: 0 0 var(--s4);
  font-size: var(--fs-sm);
}

.crumb a {
  color: var(--text-dim);
}

/* ---- four-step process (connect, preview, check, apply) ---- */

.steps4 {
  counter-reset: step;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps4 li {
  counter-increment: step;
  flex: 1 1 calc(25% - var(--s4));
  min-width: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s5);
  box-shadow: var(--shadow-xs);
}

.steps4 li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 650;
  font-size: var(--fs-sm);
  margin-bottom: var(--s3);
}

.steps4 strong {
  display: block;
  font-size: var(--fs-md);
  margin-bottom: 4px;
}

.steps4 p {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---- amount shown struck through in the example table ---- */

.was {
  color: var(--text-dim);
  text-decoration: line-through;
  font-size: 0.92em;
}

.site .sitefoot .brand {
  color: var(--text);
}

/* ---- long words never push the page sideways ---- */

.legal,
.guide,
.mwrap .card,
.mwrap .plan {
  overflow-wrap: anywhere;
}

.sitefoot-brand p {
  overflow-wrap: anywhere;
}

/* API paths in the guides are long; on a phone they wrap instead of pushing the page sideways. */
.guide code,
.mwrap .card code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---- guides: the numbered how-to reads as steps ---- */

.guide ol[data-howto] {
  padding-left: 1.4rem;
}

.guide ol[data-howto] li {
  padding-left: 4px;
}

/* ---- the hero note and consent line stay readable on the wash ---- */

.hero-note.consent {
  margin-top: var(--s2);
}

@media (max-width: 1000px) {
  .steps4 li {
    flex-basis: calc(50% - var(--s4));
  }
}

@media (max-width: 720px) {
  .steps4 li {
    flex-basis: 100%;
  }

  .mock-body {
    padding: var(--s4);
  }

  .site .cta-band .row .btn {
    width: 100%;
  }
}

.tracking-example{margin:24px 0}.tracking-example>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--border)}.tracking-example .pill{white-space:normal;max-width:100%;font-size:.65rem}.tracking-example>div>span:first-child{font-weight:600}.site pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}.guidecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:30px 0}.site .mock h2{font-size:1.45rem}.site .mock{margin:0}@media(max-width:650px){.tracking-example>div{align-items:start;flex-direction:column;gap:8px}.guidecards{display:grid;grid-template-columns:minmax(0,1fr)}.site .mock-body{padding:20px}}

.site .legal code{white-space:normal;overflow-wrap:anywhere}

.site .cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}.site .cards3>*{min-width:0}.site .hero{display:block;max-width:900px}.site .price{font-size:1.75rem;font-weight:650}.site .cta-row{display:flex;flex-wrap:wrap;gap:12px}.site .pagehead{display:block}@media(max-width:650px){.site .cards3{display:grid;grid-template-columns:minmax(0,1fr)}}

/* v3: a card that opens with a kicker keeps its heading close to it. */
.site .card > .kicker + h2 {
  margin-top: 6px;
}

/* v3: the page header on pricing and the guides index sits clear of the site bar. */
.site .mwrap > .pagehead {
  margin-top: 32px;
}

/* Founding offer line (FOUNDING40), removed by /assets/founding.js after 30 Nov 2026 */
.founding { margin: 6px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--accent); }
.lp-price [data-founding] { font-weight: 600; }

/* Answer page comparison table (site/geo.ts, 30 Oct 2026): left-aligned, tool names never split mid-word */
table.pc.answer-table { min-width: 760px; font-size: 0.9rem; }
table.pc.answer-table th,
table.pc.answer-table td { text-align: left; vertical-align: top; }
table.pc.answer-table tbody th { width: 9.5rem; overflow-wrap: normal; word-break: normal; hyphens: manual; }