/* ============================================================================
   BreakAuditor — site.css
   Marketing component library (the "forensic ledger" system).
   Extracted from the landing page so every marketing page (home, pricing,
   features, blog index) shares the same header, hero, kickers, steps, ledgers,
   exhibits, KPI strips, pricing cards, FAQ, lead form, CTA band, and footer.
   Container: .wrap (max 1120px). Tokens live on :root and are shared with
   article.css. Use the variables; never hard-code hex.
   ========================================================================== */

:root {
  --paper: #FAF7F0;
  --paper-2: #F3EEE1;
  --ink: #161F33;
  --ink-soft: #44506A;
  --ink-faint: #6B7387;
  --signal: #8C2F1B;
  --signal-ink: #7C2917;
  --line: rgba(22, 31, 51, 0.18);
  --hairline: rgba(22, 31, 51, 0.12);
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* paper grain — gated so non-textured pages stay clean */
html[data-texture="ruled"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0 0 0.45em; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--signal-ink); }
strong { font-weight: 600; }
.num, .amount, td, .kpi-value { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--signal-ink);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.kicker .idx { color: var(--ink); }
.kicker::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); transform: translateY(-3px); }
h2 { font-size: clamp(30px, 3.6vw, 42px); max-width: 22ch; }
.lede { font-size: 18px; color: var(--ink-soft); max-width: 62ch; }

/* ---------- header ---------- */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 30;
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 14px; padding-bottom: 14px;
}
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.wordmark .mark { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.wordmark .name { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -0.01em; }
.wordmark .name em { font-style: normal; color: var(--signal-ink); }
.wordmark .tag { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); border-left: 1px solid var(--line); padding-left: 12px; align-self: center; }
nav.primary { display: flex; align-items: center; gap: 26px; }
nav.primary a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
nav.primary a:hover { color: var(--signal-ink); }
nav.primary a.nav-cta {
  color: var(--signal-ink); font-family: var(--font-mono); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid currentColor; padding: 8px 14px;
  transition: background 150ms ease, color 150ms ease;
}
nav.primary a.nav-cta:hover { background: var(--signal); color: var(--paper); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 15px 26px;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  text-decoration: none; border-radius: 2px; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.btn-primary { background: var(--signal); color: #FFF8EF; border-color: var(--signal); }
.btn-primary:hover { background: var(--signal-ink); }
.btn-secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

/* ---------- hero ---------- */
.hero { padding: 76px 0 84px; position: relative; overflow: hidden; }
html[data-texture="ruled"] .hero {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(22,31,51,0.05) 31px, rgba(22,31,51,0.05) 32px);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(38px, 4.6vw, 58px); font-weight: 500; max-width: 16ch; }
.hero .sub { font-size: 19px; color: var(--ink-soft); max-width: 52ch; margin-top: 18px; }
.hero .ctas { margin: 30px 0 18px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .note { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--ink-faint); max-width: 50ch; margin: 0; }

/* document stack (report-cover paper artifact) */
.doc-stage { margin: 0; position: relative; display: grid; justify-items: center; padding: 26px 10px; }
.doc {
  position: relative; width: min(400px, 100%); aspect-ratio: 17 / 22;
  background: #FFFDF7;
  border: 1px solid rgba(22,31,51,0.14);
  box-shadow: 0 1px 2px rgba(22,31,51,0.10), 0 24px 48px -12px rgba(22,31,51,0.28);
  padding: 9% 9% 7%;
  display: flex; flex-direction: column;
  transform: rotate(1.1deg);
}
.doc::before, .doc::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #FBF8F0; border: 1px solid rgba(22,31,51,0.12);
}
.doc::before { transform: rotate(-2.4deg) translate(-9px, 7px); }
.doc::after { transform: rotate(-0.6deg) translate(7px, 13px); box-shadow: 0 18px 36px -14px rgba(22,31,51,0.22); }
.doc .firm { border-bottom: 2px solid var(--ink); padding-bottom: 4.5%; }
.doc .firm .fname { font-family: var(--font-mono); font-size: clamp(10px, 1.15vw, 12.5px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.doc .firm .fsub { font-family: var(--font-body); font-size: clamp(8.5px, 0.95vw, 10.5px); color: var(--ink-faint); margin-top: 3px; }
.doc .doc-title { margin-top: 9%; }
.doc .doc-title .t { font-family: var(--font-display); font-size: clamp(21px, 2.5vw, 28px); line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }
.doc .doc-title .for { font-family: var(--font-body); font-size: clamp(10px, 1.1vw, 12.5px); color: var(--ink-soft); margin-top: 7px; }
.doc .brandline { height: 5px; background: var(--signal); margin-top: 4%; width: 38%; }
.doc .meta { margin-top: auto; border-top: 1px solid var(--hairline); }
.doc .meta .row {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--hairline); padding: 3.2% 0;
  font-size: clamp(8px, 0.92vw, 10.5px); line-height: 1.35;
}
.doc .meta .row .k { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.doc .meta .row .v { font-family: var(--font-mono); color: var(--ink); text-align: right; }
.doc .conf { font-size: clamp(6.5px, 0.78vw, 8.5px); color: var(--ink-faint); margin-top: 5%; line-height: 1.5; }
.doc .stamp {
  position: absolute; top: 33%; right: -4%;
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase;
  color: var(--signal); border: 2px solid var(--signal); border-radius: 3px;
  padding: 7px 14px; transform: rotate(8deg); opacity: 0.75;
}

/* ---------- sections ---------- */
section { padding: 78px 0; }
section + section { border-top: 1px solid var(--hairline); }
section.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.alt + section { border-top: none; }

/* page-head — intro band for standalone marketing pages (pricing, features, …) */
.page-head { padding: 72px 0 10px; }
.page-head h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 500; max-width: 20ch; }
.page-head .lede { margin-top: 18px; }
.page-head + section { border-top: none; }

/* supported exports */
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.badge {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink);
  border: 1px solid var(--line); background: #FFFDF7;
  padding: 11px 18px; border-radius: 2px;
  box-shadow: 0 1px 0 rgba(22,31,51,0.08);
}
.badge.req { border-style: dashed; background: transparent; color: var(--ink-soft); }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 2px solid var(--ink); }
.step { border-right: 1px solid var(--hairline); padding: 26px 24px 8px 0; margin-right: 24px; }
.step:last-child { border-right: none; margin-right: 0; }
.step .n { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--signal); display: block; }
.step h3 { font-size: 22px; margin: 14px 0 8px; }
.step p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* flags ledger */
.flag-ledger { margin: 36px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.flag-ledger li {
  display: flex; gap: 18px; align-items: baseline;
  border-bottom: 1px solid var(--hairline); padding: 15px 0;
  font-size: 15.5px; line-height: 1.5;
}
.flag-ledger .code { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--signal-ink); flex: 0 0 44px; }
.flag-ledger .gap-note .code { color: var(--ink-faint); }
.flag-ledger li span.txt { color: var(--ink); }

/* exhibits (paper artifacts) */
.exhibit { background: #FFFDF7; border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 1px 2px rgba(22,31,51,0.07), 0 14px 30px -14px rgba(22,31,51,0.2); }
.exhibit-cap {
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-faint); padding: 12px 20px; border-bottom: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.exhibit-cap b { color: var(--signal-ink); font-weight: 600; }

.kpi-strip { margin-top: 48px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 22px 20px 18px; border-right: 1px solid var(--hairline); }
.kpi:last-child { border-right: none; }
.kpi .kpi-value { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 40px); line-height: 1; color: var(--ink); }
.kpi.alert .kpi-value { color: var(--signal); }
.kpi .kpi-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-top: 10px; line-height: 1.5; }
.kpi-foot { border-top: 1px solid var(--hairline); padding: 12px 20px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

/* report-is-product */
.money { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
.econ { border-top: 2px solid var(--ink); padding-top: 22px; }
.econ h3 { font-size: 24px; }
.econ .big { font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 44px); color: var(--signal); line-height: 1.1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.econ .big small { font-size: 0.42em; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.08em; }
.econ ul { margin: 18px 0 0; padding: 0; list-style: none; }
.econ li { border-top: 1px solid var(--hairline); padding: 12px 0; font-size: 15.5px; color: var(--ink-soft); display: flex; gap: 14px; }
.econ li::before { content: "—"; color: var(--signal-ink); }
.dl-note { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); line-height: 1.7; }

.ledger-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger-table th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ink);
}
.ledger-table td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); vertical-align: baseline; color: var(--ink); }
.ledger-table td.r, .ledger-table th.r { text-align: right; }
.ledger-table td.src { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.ledger-table td.cat { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; }
.ledger-table td.unpaid { color: var(--signal-ink); font-weight: 600; }
.ledger-table tfoot td { border-top: 3px double var(--ink); border-bottom: none; font-weight: 600; padding-top: 13px; }
.table-scroll { overflow-x: auto; }
.report-figure { margin: 44px 0 0; }

/* pricing */
.pilot-note { font-size: 16px; color: var(--ink-soft); max-width: 60ch; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; align-items: stretch; }
.price {
  background: #FFFDF7; border: 1px solid var(--line); border-radius: 2px;
  padding: 30px 28px; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(22,31,51,0.06);
}
.price .tier { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--signal-ink); }
.price .amount { font-family: var(--font-display); font-size: 44px; color: var(--ink); margin: 12px 0 2px; line-height: 1; }
.price .amount small { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); letter-spacing: 0.06em; }
.price ul { margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-soft); }
.price li { border-top: 1px solid var(--hairline); padding: 10px 0; }
.price.featured { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -16px rgba(22,31,51,0.45); position: relative; }
.price.featured .tier { color: #E8A18B; }
.price.featured .amount { color: var(--paper); }
.price.featured .amount small { color: rgba(250,247,240,0.6); }
.price.featured ul { color: rgba(250,247,240,0.82); }
.price.featured li { border-top-color: rgba(250,247,240,0.18); }
.price .flag-tab {
  position: absolute; top: -1px; right: 22px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--signal); color: #FFF8EF; padding: 6px 10px 7px;
}
.oneoff { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); margin-top: 26px; }

/* faq */
.faq-list { margin-top: 36px; border-top: 2px solid var(--ink); max-width: 880px; }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  font-family: var(--font-display); font-size: 21px; font-weight: 500;
  cursor: pointer; padding: 20px 44px 20px 0; position: relative; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 20px; font-weight: 400; color: var(--signal-ink);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:hover { color: var(--signal-ink); }
.faq-list details p { margin: 0 0 22px; color: var(--ink-soft); max-width: 70ch; font-size: 16px; }

/* lead form (lives inside the CTA band) */
.lead-form { max-width: 480px; margin: 32px auto 0; text-align: left; display: grid; gap: 15px; }
.lead-form .field { display: grid; gap: 6px; }
.lead-form label { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(250,247,240,0.7); }
.lead-form label .req { color: #E8A18B; }
.lead-form input {
  font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
  background: #FFFDF7; border: 1px solid rgba(250,247,240,0.22); border-radius: 2px;
  padding: 12px 14px; width: 100%;
}
.lead-form input::placeholder { color: var(--ink-faint); }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form button { margin-top: 4px; width: 100%; }
.lead-form .form-note { font-family: var(--font-mono); font-size: 12px; color: rgba(250,247,240,0.55); text-align: center; margin: 6px 0 0; }
.lead-form .form-note a { color: #E8A18B; }
.form-success {
  max-width: 480px; margin: 32px auto 0; text-align: center;
  border: 1px solid rgba(250,247,240,0.3); border-radius: 2px; padding: 28px 24px;
}
.form-success .fs-h { font-family: var(--font-display); font-size: 24px; color: var(--paper); margin: 0 0 8px; }
.form-success p { color: rgba(250,247,240,0.75); margin: 0; font-size: 15px; }

/* closing band */
.cta-band { background: var(--ink); color: var(--paper); padding: 88px 0; border-top: 4px solid var(--signal); }
html[data-texture="ruled"] .cta-band {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(250,247,240,0.05) 31px, rgba(250,247,240,0.05) 32px);
}
.cta-band .wrap { max-width: 760px; text-align: center; }
.cta-band h2 { color: var(--paper); margin: 0 auto 0.4em; }
.cta-band p { color: rgba(250,247,240,0.75); max-width: 56ch; margin: 0 auto 30px; }
.cta-band .btn-primary { border-color: var(--signal); }
.cta-band .band-note { font-family: var(--font-mono); font-size: 12px; color: rgba(250,247,240,0.55); margin: 22px auto 0; }

/* footer */
footer.site { padding: 52px 0 64px; }
footer.site .cols { display: flex; justify-content: space-between; gap: 40px; align-items: baseline; flex-wrap: wrap; }
footer.site .fm { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
footer.site .fm em { font-style: normal; color: var(--signal-ink); }
footer.site nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer.site nav a { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); text-decoration: none; }
footer.site nav a:hover { color: var(--signal-ink); }
.disclaimer {
  margin-top: 26px; border-top: 3px double var(--ink); padding-top: 18px;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); max-width: 900px;
}
.disclaimer strong { color: var(--ink); }

/* skip link + focus */
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
a:focus-visible, summary:focus-visible, .btn:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
  .hero h1 { max-width: 20ch; }
  .doc-stage { padding: 12px 4px; }
  .steps { grid-template-columns: 1fr 1fr; border-top: none; }
  .step { border-top: 2px solid var(--ink); margin-right: 0; padding-right: 20px; }
  .step:nth-child(even) { border-right: none; }
  .money { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 800px) {
  .flag-ledger { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(2) { border-right: none; }
  .kpi:nth-child(1), .kpi:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  .price-grid { grid-template-columns: 1fr; }
  nav.primary a:not(.nav-cta) { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 58px 0; }
  .wrap { padding: 0 20px; }
  .hero { padding: 52px 0 64px; }
  .hero .ctas .btn { width: 100%; text-align: center; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; padding-right: 0; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi .kpi-value { font-size: 26px; }
  .wordmark .tag { display: none; }
  .doc .stamp { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}