/*
  Supracited marketing site. One stylesheet, no framework.
  Palette, type and spacing per site/DESIGN-SPEC.md. Hex codes only, no CSS
  custom-property aliasing of colour names that would hide the actual value
  from a reviewer: the four approved colours appear as literal hex below and
  nowhere else in the file.
*/

/* ---------- Fonts (self-hosted, subsetted to latin) ---------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-500.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Base ---------- */

html {
  font-size: 100%;
}

body {
  background: #F6F4EC;
  color: #14130F;
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17px -> 19px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #1B3DFF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-underline-offset 150ms cubic-bezier(0.2, 0, 0, 1),
              border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

a:hover { text-underline-offset: 4px; }

a.quiet {
  color: #14130F;
}

:focus-visible {
  outline: 2px solid #14130F;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Type scale ---------- */

h1, h2, h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: #14130F;
}

.hero-title {
  font-size: clamp(2.75rem, 2.1rem + 3.2vw, 5.5rem); /* 44px -> 88px */
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.section-title {
  font-size: clamp(2rem, 1.6rem + 2vw, 3.5rem); /* 32px -> 56px */
  line-height: 1.05;
}

.section-title--sm {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  line-height: 1.1;
}

/* v2: prevent a lone orphan word on its own line in any headline */
.hero-title, .section-title, .section-title--sm {
  text-wrap: balance;
}

/* v2: readable measure for body paragraphs that are not the intro lede */
main p:not(.lede) {
  max-width: 68ch;
}

em, .em-word {
  font-style: italic;
}

.eyebrow {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #14130F;
  display: block;
  margin-bottom: 16px;
}

.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.mono-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: #14130F;
}

p + p { margin-top: 16px; }

.lede {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  max-width: 56ch;
}

/* ---------- Layout ---------- */

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 640px) {
  .container { padding-inline: 40px; }
}

@media (min-width: 1024px) {
  .container { padding-inline: 64px; }
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

@media (max-width: 1023px) {
  .grid-12 { grid-template-columns: 1fr; }
}

section, .block {
  padding-block: 48px;
}

@media (min-width: 1024px) {
  section, .block { padding-block: 96px; }
}

.stack-sm > * + * { margin-top: 16px; }
.stack-md > * + * { margin-top: 32px; }
.stack-lg > * + * { margin-top: 64px; }

hr.hairline {
  border: none;
  border-top: 1px solid rgba(20, 19, 15, 0.15);
  margin-block: 48px;
}

/* ---------- Nav ---------- */

.site-nav {
  border-bottom: 1px solid rgba(20, 19, 15, 0.15);
  background: #F6F4EC;
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #14130F;
}

.wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  flex-wrap: wrap;
  font-size: 0.9375rem;
}

.nav-links a {
  color: #14130F;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-bottom-color: #14130F;
}

/* v3: collapse the header nav to one row at 390px (wordmark, 2 links, the button) so the
   hero headline is visible without scrolling. Method and About stay reachable from the
   footer (every page) and from "See the method" in the hero. Scoped to .site-nav only,
   so the hero's own CTA row (which also uses .nav-right) is untouched. */
.btn-text-short { display: none; }

@media (max-width: 639px) {
  .site-nav .container {
    flex-wrap: nowrap;
  }

  .site-nav .nav-right {
    gap: 8px;
  }

  .site-nav .nav-links {
    gap: 8px;
    font-size: 0.75rem;
  }

  .site-nav .nav-links li:nth-child(n + 3) {
    display: none;
  }

  .site-nav .wordmark {
    font-size: 0.75rem;
  }

  .site-nav .btn {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  .site-nav .btn-text-full { display: none; }
  .site-nav .btn-text-short { display: inline; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid #14130F;
  cursor: pointer;
}

.btn-fill {
  background: #14130F;
  color: #F6F4EC;
}

.btn-fill:hover {
  background: #F6F4EC;
  color: #14130F;
}

.btn-outline {
  background: transparent;
  color: #14130F;
}

.btn-outline:hover {
  background: #14130F;
  color: #F6F4EC;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid rgba(20, 19, 15, 0.15);
  padding-block: 48px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
}

.footer-links a { color: #14130F; }

/* ---------- Range bar ---------- */

.range-bar {
  margin-block: 16px;
}

.range-bar-track {
  position: relative;
  height: 28px;
  border: 1px solid rgba(20, 19, 15, 0.15);
  background: transparent;
}

.range-bar-fill {
  position: absolute;
  top: -1px;
  bottom: -1px;
  border: 1px solid #14130F;
  background: #14130F;
}

/* v3: fixed-position classes replace per-bar inline style="left:...;width:..." attributes.
   _headers' CSP is style-src 'self' with no 'unsafe-inline', which silently drops inline
   style="" attributes once actually served through Cloudflare (local python http.server
   never enforces _headers, which is how this stayed invisible through v1 and v2; caught
   here by screenshotting through a real wrangler pages dev server, which does enforce it).
   Only four bar positions exist on the whole site, so naming them is simpler and more
   auditable than reopening style-src to 'unsafe-inline'. */
.range-bar-fill--50-50 { left: 50%; width: 50%; }
.range-bar-fill--40-40 { left: 40%; width: 40%; }
.range-bar-tick--78 { left: 78%; }
.range-bar-tick--60 { left: 60%; }

/* v3: generic utilities to replace the other inline style="" attributes found the same way */
.list-bare { list-style: none; }
.container--narrow { max-width: 640px; }

.range-bar-fill.is-live {
  border-color: #1B3DFF;
  background: #1B3DFF;
}

.range-bar-tick {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: #14130F;
}

.range-bar-caption {
  margin-top: 8px;
}

/* ---------- Sampling-record strip ---------- */

.sampling-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-block: 8px;
}

.sampling-sq {
  width: 14px;
  height: 14px;
  border: 1px solid #14130F;
  background: transparent;
  flex: 0 0 auto;
}

.sampling-sq.is-named {
  background: #14130F;
}

@media (max-width: 639px) {
  .sampling-sq { width: 10px; height: 10px; }
  .sampling-strip { max-width: 118px; }
}

/* ---------- Cards ---------- */

.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1023px) {
  .card-row { grid-template-columns: 1fr; }
}

.card-row--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
  .card-row--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 639px) {
  .card-row--4 { grid-template-columns: 1fr; }
}

.price-card {
  position: relative;
  background: #F6F4EC;
  border: 1px solid #14130F;
  padding: 32px 24px;
  margin-bottom: 4px;
}

.price-card::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(4px, 4px);
  background: #14130F;
  z-index: -1;
}

.price-card-tier {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.375rem;
}

.price-card-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  margin-block: 16px;
}

.price-card-scope {
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.price-card-scope li {
  padding-block: 6px;
  border-top: 1px solid rgba(20, 19, 15, 0.15);
}

.price-card-scope li:first-child { border-top: none; }

.price-card-cta {
  margin-top: 24px;
}

/* v2: cumulative "Everything in X, plus" line on Standard/Plus cards */
.price-card-plus {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  font-style: italic;
  margin-bottom: 8px;
}

.offer-card {
  border: 1px solid #14130F;
  padding: 24px;
  background: #F6F4EC;
}

.offer-card h3 {
  font-size: 1.125rem;
  margin-bottom: 8px;
}

.offer-card .mono { display: block; margin-bottom: 12px; }

/* v3: honest-launch-state status line on audit.html and snapshot.html */
.status-line {
  border: 1px solid rgba(20, 19, 15, 0.15);
  padding: 12px 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* v3: brand-type classification rule, printed under the census table instead of only
   living in BUILD-NOTES.md (VALIDATION-2.md B13) */
.table-footnote {
  font-size: 0.8125rem;
  color: #14130F;
  margin-top: 8px;
}

/* ---------- Tables ---------- */

/* v2: static, always-visible scroll affordance (not a gradient fade, not scroll-triggered;
   see BUILD-NOTES.md v2 for why those two coordinator-offered options were rejected) */
.scroll-hint {
  margin-bottom: 8px;
}

.table-scroll {
  border: 1px solid rgba(20, 19, 15, 0.15);
  overflow-x: auto;
}

table.data-table {
  min-width: 640px;
  width: 100%;
}

table.data-table caption {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(20, 19, 15, 0.15);
}

table.data-table th,
table.data-table td {
  text-align: left;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  white-space: normal; /* v2: was nowrap, which forced the Status column off-screen at 1920px */
  border-bottom: 1px solid rgba(20, 19, 15, 0.15);
}

table.data-table th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

table.data-table tbody tr:last-child td { border-bottom: none; }

.status-flagged, .status-verified, .status-unranked {
  font-weight: 500;
}

/* ---------- Forms ---------- */

form .field {
  margin-bottom: 24px;
}

form label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

form input[type="text"],
form input[type="email"],
form input[type="url"],
form textarea {
  width: 100%;
  background: #F6F4EC;
  border: 1px solid #14130F;
  padding: 12px;
  font-family: 'Geist', sans-serif;
  font-size: 1rem;
}

form textarea { min-height: 96px; resize: vertical; }

form input:focus-visible,
form textarea:focus-visible {
  outline: 2px solid #14130F;
  outline-offset: 2px;
}

form .hint {
  font-size: 0.875rem;
  color: #14130F;
  margin-top: 16px;
}

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
/* v2: .flag-verified removed, no real VERIFIED example exists on the site yet.
   v3: .flag-live removed too; the home proof strip's "(live)" badge read as real-time on a
   static file (VALIDATION-2.md B7), so the badge is gone. The range bar's own blue fill
   (.range-bar-fill.is-live below) is untouched; that was not the finding. */
.small { font-size: 0.875rem; }
/* v2: About page photo/bio columns (were inline grid-column styles; see BUILD-NOTES.md v2) */
.about-photo-col { grid-column: 1 / 5; }
.about-bio-col { grid-column: 5 / 13; }

@media (max-width: 1023px) {
  .about-photo-col, .about-bio-col { grid-column: 1 / -1; }
}

.photo-placeholder {
  border: 1px solid #14130F;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: static;
  display: inline-block;
  padding: 8px;
  background: #F6F4EC;
  border: 1px solid #14130F;
}

/* ---------- Census explorer (v2, per site/DESIGN-REFERENCES.md section 4) ----------
   Native <details>/<summary> groups. All tables are present and open in the plain HTML;
   js/census-explorer.js only restyles the summary row and keeps one group open at a time.
   No fetch, no computation, no animated number or bar. */

.route-details {
  border: 1px solid #14130F;
  border-top: none;
}

.route-details:first-of-type {
  border-top: 1px solid #14130F;
}

.route-details + .route-details {
  margin-top: -1px;
  border-top: 1px solid #14130F;
}

.route-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
              color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.route-details summary::-webkit-details-marker { display: none; }
.route-details summary::marker { content: ""; }

.route-details summary::after {
  content: "[ + ]";
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
}

.route-details[open] > summary::after {
  content: "[ \2212 ]";
}

.route-details[open] > summary {
  background: #14130F;
  color: #F6F4EC;
}

.route-body {
  padding: 24px 20px;
  border-top: 1px solid rgba(20, 19, 15, 0.15);
}