/* ==========================================================================
   openbigcsv.com — design tokens
   Concept: the file format IS the design system. Hairline cell rules,
   monospace data type, and spreadsheet coordinates (A1, B2...) are used
   as real structural devices, not decoration.
   ========================================================================== */

:root{
  /* ink (dark console sections) */
  --ink: #12141A;
  --ink-soft: #1A1D26;
  --ink-elev: #21242F;
  --rule-dark: #2B2F3B;
  --text-on-ink: #E9EBF2;
  --text-on-ink-dim: #9AA1B4;

  /* paper (light content sections) */
  --paper: #FFFFFF;
  --paper-dim: #EEF1F4;
  --paper-dim-2: #E4E8ED;
  --rule: #D7DCE3;
  --text: #14161C;
  --text-dim: #565D6C;

  /* accents */
  --accent: #2E5EFF;
  --accent-ink: #1739C9;
  --accent-tint: #E9EFFF;
  --flag: #F2B705;
  --flag-tint: #FFF6DA;
  --good: #167A55;
  --good-tint: #E4F5EC;
  --danger: #C23B32;
  --danger-tint: #FBEAE8;

  /* type */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 3px;
  --shadow-card: 0 1px 0 rgba(20,22,28,0.04), 0 8px 24px -16px rgba(20,22,28,0.25);
  --maxw: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--accent-ink); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--text);
}
p{ margin: 0 0 1em; }
code, .mono{ font-family: var(--font-mono); }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / cell-address label device ---------- */
.cell-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-tint);
  border: 1px solid #C9D6FF;
  border-radius: var(--radius);
  padding: 3px 8px 3px 6px;
}
.cell-tag::before{
  content: attr(data-cell);
  font-size: 10px;
  color: var(--accent);
  opacity: .8;
}
.section-eyebrow{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 14px;
}

/* ---------- top nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-weight:700; font-size:17px; color: var(--text);
}
.brand:hover{ text-decoration:none; }
.brand .dot{ color: var(--accent); }
.brand small{
  font-family: var(--font-sans); font-weight: 500; font-size: 11px; color: var(--text-dim);
  border-left: 1px solid var(--rule); padding-left:8px; margin-left:2px;
}
.nav-links{ display:flex; align-items:center; gap: 28px; }
.nav-links a{ color: var(--text); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover{ color: var(--accent-ink); text-decoration:none; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-auth-slot{ font-size: 13.5px; color: var(--text-dim); font-family: var(--font-mono); }
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .nav-links{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 8px 24px 16px;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding: 10px 0; width:100%; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14.5px;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-ink); }
.btn-ghost-dark{ background: transparent; border-color: var(--rule); color: var(--text); }
.btn-ghost-dark:hover{ border-color: var(--text); }
.btn-on-ink{ background: var(--flag); color: var(--ink); }
.btn-on-ink:hover{ background:#FFCF33; }
.btn-outline-ink{ background: transparent; border-color: var(--rule-dark); color: var(--text-on-ink); }
.btn-outline-ink:hover{ border-color: var(--text-on-ink-dim); }
.btn-sm{ padding: 7px 12px; font-size: 13px; }
.btn-block{ width:100%; }

/* ---------- hero (ink) ---------- */
.hero{
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 64px 0 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-dark);
}
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--rule-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  pointer-events:none;
}
.hero-inner{ position: relative; z-index:1; }
.hero-copy{ max-width: 760px; margin: 0 auto; text-align:center; }
.hero h1{
  font-size: clamp(32px, 5vw, 54px);
  color:#fff;
  margin-bottom: .35em;
}
.hero h1 .hl{ color: var(--flag); }
.hero .lede{
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--text-on-ink-dim);
  max-width: 620px;
  margin: 0 auto 28px;
}
.hero-ctas{ display:flex; gap:14px; justify-content:center; margin-bottom: 18px; flex-wrap:wrap; }
.hero-note{ font-size:13px; color: var(--text-on-ink-dim); margin-bottom: 40px; }
.hero-note code{ color: var(--flag); }

/* live counter strip */
.counter-strip{
  display:flex; justify-content:center; gap:0; flex-wrap:wrap;
  border-top: 1px solid var(--rule-dark);
  background: var(--ink-soft);
}
.counter-cell{
  flex:1; min-width:150px; text-align:center;
  padding: 22px 16px;
  border-right: 1px solid var(--rule-dark);
}
.counter-cell:last-child{ border-right:none; }
.counter-num{ font-family: var(--font-mono); font-size: 26px; font-weight:700; color:#fff; font-variant-numeric: tabular-nums; }
.counter-label{ font-size:12px; color: var(--text-on-ink-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }

/* ---------- the tool (grid app) ---------- */
.tool-wrap{
  background: var(--ink-soft);
  border: 1px solid var(--rule-dark);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
.tool-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px;
  background: var(--ink-elev);
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-on-ink-dim);
}
.tool-dots{ display:flex; gap:6px; }
.tool-dots span{ width:9px; height:9px; border-radius:50%; background: var(--rule-dark); }
.tool-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding: 12px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.tool-toolbar input[type="search"],
.tool-toolbar input[type="text"]{
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-dim);
  min-width: 220px;
  flex: 1 1 220px;
}
.tool-toolbar input:focus{ background:#fff; }
.tool-stat{
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim);
  white-space: nowrap;
}
.tool-stat b{ color: var(--text); }
.dropzone{
  position: relative;
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius);
  padding: 46px 20px;
  text-align:center;
  background: var(--paper-dim);
  color: var(--text-dim);
  font-size: 14px;
  cursor:pointer;
}
.dropzone.dragover{ border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
.dropzone strong{ color: var(--text); }
.dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.grid-scroll{
  overflow: auto;
  max-height: 460px;
  background: #fff;
}
table.data-grid{
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}
table.data-grid thead th{
  position: sticky; top:0;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  text-align:left;
  padding: 8px 12px;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  color: var(--text);
  z-index: 2;
}
table.data-grid thead th:hover{ background: var(--paper-dim-2); }
table.data-grid thead th .sort-caret{ color: var(--accent); margin-left:4px; }
table.data-grid td{
  padding: 7px 12px;
  border-bottom: 1px solid #EEF0F3;
  border-right: 1px solid #EEF0F3;
  color: var(--text);
  max-width: 320px;
  overflow:hidden;
  text-overflow: ellipsis;
}
table.data-grid tr:nth-child(even) td{ background: #FAFBFC; }
table.data-grid td.rownum{
  color: var(--text-dim);
  background: var(--paper-dim) !important;
  text-align:right;
  position: sticky; left:0;
}
.grid-empty{ padding: 60px 20px; text-align:center; color: var(--text-dim); font-family: var(--font-mono); font-size: 13.5px; }
.tool-footbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding: 12px 14px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.upsell-strip{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding: 14px 16px;
  background: var(--flag-tint);
  border-top: 1px solid #F2E2A8;
  font-size: 13.5px;
  color: #6B5308;
}
.upsell-strip a{ font-weight:700; color: var(--accent-ink); }

/* ---------- sections (paper) ---------- */
section{ padding: 88px 0; }
section.tight{ padding: 56px 0; }
.section-dim{ background: var(--paper-dim); }
.section-ink{ background: var(--ink); color: var(--text-on-ink); }
.section-ink h2, .section-ink h3{ color:#fff; }
.section-head{ max-width: 660px; margin: 0 auto 48px; text-align:center; }
.section-head h2{ font-size: clamp(26px, 3.4vw, 36px); }
.section-head p{ color: var(--text-dim); font-size: 16.5px; }
.section-ink .section-head p{ color: var(--text-on-ink-dim); }

.feature-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.feature-card{ background:#fff; padding: 28px 24px; }
.feature-card .cell-tag{ margin-bottom: 14px; }
.feature-card h3{ font-size: 17px; margin-bottom:8px; }
.feature-card p{ color: var(--text-dim); font-size: 14.5px; margin:0; }
@media (max-width: 860px){ .feature-grid{ grid-template-columns: 1fr; } }

.steps{ counter-reset: step; display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.step{ position:relative; padding-left: 0; }
.step .num{
  font-family: var(--font-mono); font-weight:700; font-size:13px;
  color: var(--accent-ink); background: var(--accent-tint);
  display:inline-block; padding: 3px 9px; border-radius: var(--radius); margin-bottom: 14px;
}
.step h3{ font-size:16.5px; margin-bottom:6px; }
.step p{ color: var(--text-dim); font-size:14.5px; }
@media (max-width: 860px){ .steps{ grid-template-columns: 1fr; } }

/* comparison table */
.table-wrap{ overflow-x:auto; border: 1px solid var(--rule); border-radius: 6px; }
table.compare{ width:100%; border-collapse:collapse; font-size:14.5px; background:#fff; min-width: 640px; }
table.compare th, table.compare td{ padding: 13px 16px; border-bottom: 1px solid var(--rule); text-align:left; }
table.compare thead th{ background: var(--paper-dim); font-family: var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
table.compare td.feat{ color: var(--text-dim); }
table.compare td.yes{ color: var(--good); font-weight:700; }
table.compare td.no{ color: var(--text-dim); }
table.compare tbody tr:last-child td{ border-bottom:none; }
table.compare th.highlight, table.compare td.highlight{ background: var(--accent-tint); }

/* pricing */
.pricing-toggle{ display:flex; justify-content:center; margin-bottom: 40px; }
.pricing-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; border:1px solid var(--rule); border-radius:8px; overflow:hidden; }
.price-card{ background:#fff; padding: 28px 22px; border-right:1px solid var(--rule); display:flex; flex-direction:column; }
.price-card:last-child{ border-right:none; }
.price-card.featured{ background: var(--ink); color:#fff; }
.price-card.featured .price-desc{ color: var(--text-on-ink-dim); }
.price-card.featured h3{ color:#fff; }
.price-name{ font-family: var(--font-mono); font-size: 12px; text-transform:uppercase; letter-spacing:.08em; color: var(--accent-ink); margin-bottom:10px; }
.price-card.featured .price-name{ color: var(--flag); }
.price-amount{ font-family: var(--font-mono); font-size: 34px; font-weight:700; margin-bottom:2px; }
.price-period{ font-size:12.5px; color: var(--text-dim); margin-bottom: 16px; }
.price-card.featured .price-period{ color: var(--text-on-ink-dim); }
.price-desc{ font-size: 13.5px; color: var(--text-dim); margin-bottom: 18px; min-height: 36px; }
.price-list{ list-style:none; margin:0 0 24px; padding:0; font-size:13.5px; flex:1; }
.price-list li{ padding: 7px 0; border-top:1px solid var(--rule); }
.price-card.featured .price-list li{ border-top:1px solid var(--rule-dark); }
.price-list li:first-child{ border-top:none; }
.price-list li::before{ content:"✓ "; color: var(--good); font-weight:700; }
.price-card.featured .price-list li::before{ color: var(--flag); }
@media (max-width: 960px){ .pricing-grid{ grid-template-columns: 1fr 1fr; } .price-card{ border-bottom:1px solid var(--rule); } }
@media (max-width: 620px){ .pricing-grid{ grid-template-columns: 1fr; } }

/* faq */
.faq-item{ border-bottom: 1px solid var(--rule); padding: 20px 0; }
.faq-item summary{ font-family: var(--font-mono); font-weight:700; cursor:pointer; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color: var(--accent); font-size:20px; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-a{ color: var(--text-dim); margin-top:12px; font-size:14.5px; max-width: 720px; }

/* cta band */
.cta-band{ text-align:center; }
.cta-band h2{ font-size: clamp(24px,3vw,32px); }
.cta-band .btn{ margin-top: 6px; }

/* callouts / guide content */
.prose{ max-width: 740px; margin: 0 auto; }
.prose h2{ font-size:24px; margin-top: 2em; }
.prose h3{ font-size:18px; margin-top:1.6em; }
.prose p, .prose li{ color: var(--text); font-size: 16px; }
.prose ul, .prose ol{ padding-left: 1.3em; }
.callout{
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: 16px 18px;
  border-radius: 0 6px 6px 0;
  font-size: 14.5px;
  margin: 24px 0;
}
.callout.warn{ border-color: var(--flag); background: var(--flag-tint); }
.tldr{
  font-family: var(--font-mono);
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 20px 22px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 40px;
}
.tldr .cell-tag{ margin-bottom: 10px; }
.breadcrumb{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-dim); margin-bottom: 24px; }
.breadcrumb a{ color: var(--text-dim); }

/* footer */
footer.site-footer{ background: var(--ink); color: var(--text-on-ink-dim); padding: 56px 0 28px; border-top: 1px solid var(--rule-dark); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 40px; }
.footer-grid h4{ color: var(--text-on-ink); font-size: 12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom: 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color: var(--text-on-ink-dim); font-size:14px; }
.footer-grid a:hover{ color:#fff; }
.footer-brand p{ color: var(--text-on-ink-dim); font-size:14px; max-width: 320px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--rule-dark); padding-top:24px; font-size:12.5px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* utility */
.text-center{ text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.badge-row{ display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; opacity:.85; }
.badge-row span{ font-family: var(--font-mono); font-size:12px; color: var(--text-dim); border:1px solid var(--rule); padding:5px 10px; border-radius: var(--radius); }