:root {
  --primary-orange: #ff9100;
  --primary-orange-dark: #e67600;
  --secondary-gray: #ededed;
  --medium-gray: #bdbdbd;
  --neutral-black: #181818;
  --white: #fff;
}

html {
  box-sizing: border-box;
  font-family: 'Inter', 'IBM Plex Mono', monospace, sans-serif;
  background: var(--secondary-gray);
  color: var(--neutral-black);
  min-height: 100%;
}
*, *:before, *:after { box-sizing: inherit; }
body {
  margin: 0;
  line-height: 1.7;
  background: var(--secondary-gray);
  color: var(--neutral-black);
}

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

.site-header {
  background: var(--neutral-black);
  color: var(--white);
  padding: 0;
}
.site-header .logo {
  font-weight: 700;
  font-size: 1.8em;
  color: var(--primary-orange);
  text-decoration: none;
  padding-right: 30px;
}
.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.nav-links li { margin-left: 16px; }
.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  padding: 14px 8px;
  display: inline-block;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.nav-links a.cta-button,
.cta-button {
  background: var(--primary-orange);
  color: var(--neutral-black);
  font-weight: 700;
  margin-left: 12px;
  border-radius: 7px;
  border: none;
  padding: 10px 20px;
  font-size: 1.07em;
  cursor: pointer;
  box-shadow: 1px 3px 12px rgba(235, 177, 16, 0.07);
  transition: background 0.13s, color 0.13s;
  text-decoration: none;
  display: inline-block;
}
.nav-links a.cta-button.secondary,
.cta-button.secondary {
  background: var(--white);
  color: var(--primary-orange-dark);
  border: 2px solid var(--primary-orange);
}
.nav-links a:hover,
.cta-button:hover {
  background: var(--primary-orange-dark);
  color: var(--white);
}
.nav-links a.cta-button.secondary:hover,
.cta-button.secondary:hover {
  background: var(--primary-orange);
  color: var(--white);
}
.hero, .data-details {
  text-align: center;
  padding: 54px 0 30px;
  background: var(--white);
  border-bottom: 1px solid var(--medium-gray);
}
.hero h1,
.data-details h1 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.4em;
  margin-bottom: 14px;
  color: var(--primary-orange);
  font-weight: 700;
}
.hero .cta-group, .data-details .cta-group {
  margin: 28px 0 14px;
}
.stats {
  margin: 24px auto;
  display: flex;
  justify-content: center;
  gap: 32px;
  color: var(--primary-orange-dark);
  font-size: 1.05em;
}
.stats .stat-number {
  font-weight: 700;
  font-size: 1.33em;
  display: block;
}
.sample-caption {
  font-size: 1em;
  color: var(--primary-orange);
  margin: 16px 0 2px;
  font-weight: 600;
}
.sample-data {
  background: #fff7e6;
  color: var(--neutral-black);
  border-radius: 4px;
  padding: 13px;
  margin: auto;
  font-size: 1em;
  width: fit-content;
  max-width: 100%;
  white-space: pre;
  font-family: 'IBM Plex Mono', monospace;
  border: 1.5px solid var(--primary-orange);
}
.features, .sectionbreak {
  background: #fff;
  padding: 48px 0 35px;
  margin-top: 0;
  border-bottom: 1px solid var(--medium-gray);
}
.features h2, .sectionbreak {
  text-align: center;
  color: var(--primary-orange-dark);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2em;
}
.feature-grid {
  display: flex;
  justify-content: center;
  gap: 38px;
  margin: 36px auto 16px;
}
.feature {
  background: var(--secondary-gray);
  border-radius: 9px;
  padding: 30px 19px 28px;
  min-width: 190px;
  box-shadow: 0 2px 15px rgba(25,25,25, 0.04);
  text-align: center;
  border: 2px solid var(--primary-orange);
}
.feature span {
  font-size: 2em;
}
.promo {
  margin-top: 30px;
  text-align: center;
}
.promo img {
  width: 200px;
  max-width: 80vw;
  margin: 0 auto 9px;
}
.promo p {
  margin: 10px 0 0;
  font-size: 1em;
  color: var(--neutral-black);
}
.csv-table {
  margin: 24px auto;
  background: var(--white);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 1px 2px 7px rgba(128,128,128,0.05);
  border: 1.5px solid var(--primary-orange);
  max-width: 99vw;
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1em;
  background: var(--white);
}
.table th, .table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--secondary-gray);
}
.table th {
  background: var(--primary-orange);
  color: var(--neutral-black);
  font-weight: 700;
}
.table tr:nth-child(even) td {
  background: #fff4e1;
}
.table tr:last-child td {
  border-bottom: none;
}
.csv-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 30px;
  text-align: center;
}
.csv-list li {
  display: inline-block;
  margin: 0 12px;
}
.csv-list a {
  color: var(--primary-orange-dark);
  text-decoration: underline;
  font-weight: 600;
  font-size: 1.07em;
  padding: 8px 4px;
  border-radius: 3px;
  transition: background .13s, color .13s;
}
.csv-list a:hover {
  background: var(--primary-orange);
  color: var(--white);
}
.upgrade-blurb {
  font-size: 1.07em;
  color: var(--neutral-black);
  background: #fff7e6;
  border-left: 5px solid var(--primary-orange);
  padding: 0.5em 1em;
  margin: 10px 0 30px;
  border-radius: 2px 7px 7px 2px;
  text-align: left;
  display: inline-block;
}
footer {
  background: var(--neutral-black);
  color: var(--white);
  font-size: 1em;
  padding: 28px 0 13px;
  text-align: center;
  margin-top: 40px;
}
footer a { color: var(--primary-orange); text-decoration: underline;}
footer a:hover { color: var(--white); }
@media (max-width: 900px) {
  .feature-grid, .stats { flex-direction: column; align-items: center; }
  .container { padding: 10px; }
}
@media (max-width: 600px) {
  .stats, .feature-grid { gap: 14px; }
  .feature { min-width: 90vw; }
  .site-header .logo { font-size: 1.14em; }
  .promo img { width: 120px; }
}