/* findbusinesseswithoutwebsites.com — the NoSite Leads Reference.
   Page shape after the Zeton reference (bestaidatalabs.com): edition strip, masthead, rail, entry, record.
   NoSite's own tokens: pale cool ground, navy type, the logo blue as the accent. Fraunces headings, Geist text,
   Geist Mono for the small labels. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #f3f6fb; --white: #ffffff; --soft: #e8f0fe; --line: #d6deea; --line2: #c3cedd;
  --navy: #0b1b33; --ink: #16233a; --mut: #4f5e75;
  --accent: #0b57d0; --accent-hi: #0846ab; --leaf: #2e7d32;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.72 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 4px; transition: color .18s, border-color .18s, background .18s, translate .18s; }
a:hover { color: var(--accent-hi); }
a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 19px; text-wrap: pretty; }
h1, h2, h3 { color: var(--navy); text-wrap: balance; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 20px; top: 15px; background: var(--white); padding: 10px; z-index: 3; }

/* edition strip + masthead */
.edition { padding: 10px 4%; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line);
  font: 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--mut); }
.edition span:first-child { text-transform: uppercase; }
.edition span:last-child { white-space: nowrap; }
header { padding: 30px 4%; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.brand { font: 600 24px/1.2 var(--display); letter-spacing: -.02em; max-width: 420px; color: var(--navy); text-decoration: none; }
.brand small { display: block; font: 500 11px/2 var(--mono); letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin-top: 7px; }
header nav { display: flex; gap: 25px; font-size: 14px; }
header nav a { text-decoration: none; color: var(--ink); }
header nav a:hover, header nav a[aria-current] { color: var(--accent); }
.cta { font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid; padding: 7px 0; white-space: nowrap; }

/* frame */
main { max-width: 1450px; margin: auto; padding: 30px 4% 80px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 40px; padding: 0; font-size: 12px; color: var(--mut); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line2); }
.crumbs a { color: inherit; }
.grid { display: grid; grid-template-columns: 170px minmax(0, 1fr) 240px; gap: 44px; }
.rail { font-size: 13px; border-right: 1px solid var(--line); padding-right: 20px; align-self: start; }
.rail a { display: block; margin: 12px 0; color: var(--ink); text-decoration: none; line-height: 1.4; }
.rail a:hover, .rail a[aria-current] { color: var(--accent); }
.rail hr, .record hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.rail strong, .kicker, .record > small, .entry small, .resource-list small {
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: block; }

/* the entry */
article { min-width: 0; max-width: 820px; }
h1 { font: 600 clamp(36px, 4.3vw, 62px)/1.06 var(--display); letter-spacing: -.035em; margin: 10px 0 26px; overflow-wrap: break-word; }
h2 { font: 600 29px/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 20px; }
h3 { font: 600 21px/1.28 var(--display); letter-spacing: -.01em; }
.answer { padding: 25px 0; border-top: 3px solid var(--accent); font-size: 20px; line-height: 1.55; color: var(--navy); }
.answer p { margin: 10px 0; }
.note { font-size: 13px; color: var(--mut); }
.toc { border: 1px solid var(--line); background: var(--white); padding: 20px 24px; margin: 28px 0 40px; font-size: 13px; }
.toc strong { font-weight: 600; }
.toc ol { columns: 2; padding-left: 18px; margin: 10px 0 0; }
.toc li { padding: 3px 12px 3px 0; break-inside: avoid; }
section { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
section ul, section ol { padding-left: 22px; }
section li { margin-bottom: 8px; }
.steps { padding-left: 22px; }
.steps li { margin-bottom: 14px; }
.src { font-size: 13px; color: var(--mut); }

.graph { overflow-x: auto; margin-top: 20px; }
.graph svg { min-width: 0; width: 100%; display: block; color: var(--accent); }
.graph rect { fill: var(--white); stroke: var(--accent); }
.graph text { fill: var(--navy); font: 500 12px var(--sans); }
.graph a:hover rect { fill: var(--soft); }
.chain-list { display: none; }
.graph-caption { font-size: 13px; text-align: center; color: var(--mut); }

.directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.entry { display: block; color: var(--ink); text-decoration: none; padding: 20px 0; border-top: 1px solid var(--line); }
.entry[hidden] { display: none; }
.entry h3 { margin: 8px 0 12px; }
.entry p { font-size: 14px; line-height: 1.65; margin-bottom: 8px; }
.entry > span, .resource-list span { font-size: 13px; font-weight: 600; color: var(--accent); }
.entry:hover h3 { color: var(--accent); }
.resource-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.resource-list > a { display: block; padding: 24px; border: 1px solid var(--line); text-decoration: none; background: var(--white); color: var(--ink); }
.resource-list > a:hover { border-color: var(--accent); translate: 0 -2px; }
.resource-list h3 { font-size: 24px; margin: 12px 0; }
.resource-list p { font-size: 14px; }

details { border-bottom: 1px solid var(--line); padding: 17px 0; }
summary { cursor: pointer; font-weight: 600; line-height: 1.4; color: var(--navy); }
details p { font-size: 15px; margin: 14px 0 0; }
.paths { display: flex; flex-wrap: wrap; gap: 10px; }
.paths a { border: 1px solid var(--line); background: var(--white); padding: 10px 15px; text-decoration: none; font-size: 13px; }
.paths a:hover { border-color: var(--accent); }
.citation { overflow-wrap: anywhere; font: 13px var(--mono); }
code { font: 13px var(--mono); overflow-wrap: anywhere; }

.search-label { display: block; font-weight: 600; margin: 4px 0 8px; }
#entry-search { width: 100%; padding: 15px 16px; font: inherit; border: 1px solid var(--line2); border-radius: 2px; background: var(--white); color: var(--navy); }

.table { overflow-x: auto; margin: 6px 0 22px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
caption { caption-side: bottom; text-align: left; font-size: 12px; color: var(--mut); padding-top: 10px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 500 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
tbody th { font-weight: 600; color: var(--navy); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.bars { list-style: none; padding: 0; margin: 0 0 14px; }
.bars li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 56px; align-items: center; gap: 12px; margin: 0 0 7px; font-size: 14px; }
.bars .track { height: 10px; background: var(--white); border: 1px solid var(--line); }
.bars .fill { display: block; height: 100%; background: var(--accent); }
.bars .val { font: 13px var(--mono); text-align: right; }

/* the featured-entity record */
.record { border-top: 3px solid var(--navy); padding-top: 20px; font-size: 13px; align-self: start; }
.record h2 { font-size: 30px; display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; }
.record h2 img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.record dl { margin: 0 0 22px; }
.record dt { font: 500 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mut); margin-top: 18px; }
.record dd { margin: 5px 0; overflow-wrap: anywhere; color: var(--navy); }
.record > a { display: block; font-weight: 600; }

footer { border-top: 1px solid var(--line); padding: 38px 4%; font-size: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
footer strong { font: 600 18px/1.3 var(--display); color: var(--navy); }
footer strong small { font: 500 10.5px/2 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
footer nav { display: flex; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
footer nav a { color: var(--ink); }
footer p { grid-column: 1 / -1; color: var(--mut); max-width: 900px; margin: 0; }

@media (max-width: 1100px) {
  header { flex-wrap: wrap; }
  .grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
  .rail { display: none; }
}
@media (max-width: 720px) {
  .edition { font-size: 10px; padding: 9px 16px; justify-content: flex-end; }
  .edition span:first-child { display: none; }
  header { padding: 22px 16px; gap: 16px; }
  .brand { font-size: 22px; max-width: 100%; }
  header nav { gap: 18px; flex-wrap: wrap; order: 3; width: 100%; }
  .cta { margin-left: 0; }
  main { padding: 22px 16px 50px; }
  .grid { display: flex; flex-direction: column; }
  .record { width: 100%; }
  .crumbs ol { margin-bottom: 24px; }
  .toc ol { columns: 1; }
  .directory, .resource-list { grid-template-columns: 1fr; }
  .answer { font-size: 18px; }
  h1 { font-size: 38px; }
  h2 { font-size: 26px; }
  .bars li { grid-template-columns: 110px minmax(0, 1fr) 48px; font-size: 13px; }
  footer { display: block; padding: 28px 16px; }
  footer nav { justify-content: flex-start; margin: 18px 0; }
  .graph svg { display: none; }
  .chain-list { display: block; list-style: none; padding: 0; margin: 0; }
  .chain-list li { margin: 0; }
  .chain-list a { display: block; padding: 14px 16px; border: 1px solid var(--accent); background: var(--white); text-decoration: none; color: var(--navy); font-weight: 500; }
  .chain-list li + li::before { content: "↓"; display: block; text-align: center; color: var(--accent); line-height: 26px; }
  .graph-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a { transition: none; } }