/* Terrabyte Analytics marketing site — hand-rolled, no framework.
   Palette locked to the approved mockup (dark navy + teal). */

:root {
  --navy-950: #0a1220;
  --navy-900: #0d1727;
  --navy-850: #101c2f;
  --navy-800: #142238;
  --navy-700: #1c2f4a;
  --panel: #0f1b2d;
  --panel-line: #22364f;
  --teal-500: #16b8a6;
  --teal-400: #2fd4c0;
  --teal-soft: rgba(22, 184, 166, 0.12);
  --ink-light: #eef4f8;
  --ink-mid: #a7b7c7;
  --ink-dim: #718599;
  --light-bg: #f4f7fa;
  --light-card: #ffffff;
  --light-line: #dfe7ee;
  --light-ink: #17273b;
  --light-muted: #5a6c80;
  --radius: 10px;
  --radius-lg: 14px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--light-ink);
  background: var(--navy-950);
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

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

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 18, 32, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink-light);
  text-decoration: none;
}

/* Wordmark lockup: TERRABYTE carries the weight, ANALYTICS sits beneath it
   as a quieter descriptor so the nav still fits on one line. */
.wordmark { display: inline-flex; flex-direction: column; line-height: 1.05; }

.wordmark em {
  font-style: normal;
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--teal-400);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-links a {
  color: var(--ink-mid);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  /* Without this, multi-word items break onto several lines in the
     narrow band between the mobile breakpoint and a full desktop,
     overflowing the fixed-height bar. */
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.nav-links a:hover { color: var(--ink-light); background: var(--navy-800); }

.nav-links .caret::after {
  content: "▾";
  font-size: 10px;
  margin-left: 5px;
  opacity: 0.7;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}

.btn-primary {
  background: var(--teal-500);
  color: #05221e;
}

.btn-primary:hover {
  background: var(--teal-400);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 184, 166, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-light);
  border-color: #33475f;
}

.btn-ghost:hover { border-color: var(--teal-500); color: var(--teal-400); }

.nav .btn { padding: 9px 16px; font-size: 14px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background:
    radial-gradient(1100px 480px at 78% -10%, rgba(22, 184, 166, 0.10), transparent 60%),
    radial-gradient(800px 500px at 8% 108%, rgba(38, 96, 168, 0.14), transparent 60%),
    var(--navy-950);
  color: var(--ink-light);
  padding: 72px 0 84px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(380px, 5fr) minmax(420px, 6fr);
  gap: 56px;
  align-items: start;
}

.badge {
  display: inline-block;
  border: 1px solid rgba(22, 184, 166, 0.5);
  color: var(--teal-400);
  background: var(--teal-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}

.hero .sub {
  font-size: 17.5px;
  color: var(--ink-mid);
  max-width: 46ch;
  margin: 0 0 30px;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.hero-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--panel-line);
  padding-top: 26px;
  gap: 8px;
}

.feat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 18px 0 0;
  font-size: 13.5px;
  color: var(--ink-mid);
  line-height: 1.4;
}

.feat + .feat { border-left: 1px solid var(--panel-line); padding-left: 18px; }

.feat svg { width: 30px; height: 30px; }

/* Hero visualization panels */

.viz-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
}

.viz-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
}

.viz-card h3 {
  margin: 0 0 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-light);
  letter-spacing: 0.01em;
}

.viz-card .sub {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin: 0 0 8px;
}

.viz-card svg { flex: 1; width: 100%; }

.viz-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 6px;
}

.viz-legend.row { flex-direction: row; flex-wrap: wrap; gap: 10px; }

.viz-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ---------- Shared section machinery ---------- */

section { padding: 76px 0; }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--teal-500);
  margin: 0 0 10px;
}

.section-title {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
}

.on-dark { color: var(--ink-light); }
.on-dark .section-title { color: var(--ink-light); }

/* ---------- Problem ---------- */

.problem { background: var(--light-bg); color: var(--light-ink); }

.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.problem-card {
  background: var(--light-card);
  border: 1px solid var(--light-line);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  box-shadow: 0 2px 10px rgba(20, 35, 60, 0.05);
}

.num-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #05221e;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}

.problem-card h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.3; }

.problem-card p { margin: 0 0 22px; color: var(--light-muted); font-size: 15px; }

.icon-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.icon-chip {
  flex: 1;
  min-width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--light-line);
  border-radius: var(--radius);
  padding: 14px 6px 10px;
  font-size: 11px;
  color: var(--light-muted);
  text-align: center;
  line-height: 1.25;
}

.icon-chip svg { width: 26px; height: 26px; }

/* ---------- Value (3 steps) ---------- */

.value { background: var(--navy-900); }

.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 26px;
  align-items: start;
}

.step { text-align: center; padding: 0 6px; }

.step .num-chip { margin: 0 auto 18px; }

.step-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: var(--light-card);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.step-icon svg { width: 46px; height: 46px; }

.step h3 { margin: 0 0 12px; font-size: 17.5px; color: var(--ink-light); }

.step p { margin: 0 auto; max-width: 30ch; font-size: 14px; color: var(--ink-mid); }

.step-arrow {
  align-self: center;
  color: var(--ink-dim);
  padding-top: 40px;
}

/* ---------- Markets ---------- */

.markets { background: var(--light-bg); color: var(--light-ink); }

.market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.market-card {
  display: grid;
  grid-template-columns: 5fr 6fr;
  background: var(--light-card);
  border: 1px solid var(--light-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 35, 60, 0.05);
}

.market-illo {
  background: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.market-illo svg { width: 100%; height: 100%; }

.market-body { padding: 24px 24px 20px; }

.market-body .mk-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--teal-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.market-body .mk-icon svg { width: 22px; height: 22px; }

.market-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }

.market-body p { margin: 0 0 14px; font-size: 13.5px; color: var(--light-muted); }

.checks { list-style: none; margin: 0; padding: 0; }

.checks li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  margin-bottom: 7px;
  color: var(--light-ink);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.5l3.2 3.2L13 5" fill="none" stroke="%2316b8a6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat center / contain;
}

/* ---------- Proof metrics ---------- */

.proof { background: var(--navy-900); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-lg);
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.metric svg { width: 34px; height: 34px; }

.metric .big {
  font-size: 34px;
  font-weight: 800;
  color: var(--teal-400);
  line-height: 1;
}

.metric .cap { font-size: 12.5px; color: var(--ink-mid); line-height: 1.35; }

/* The number a card is small enough to lose — e.g. the "/5,028" in
   "5,028/5,028" — set smaller so the headline figure still reads first. */
.metric .big .of { font-size: 20px; opacity: 0.65; font-weight: 700; }

/* Which committed study file proves this card. Always rendered: a metric
   without a visible source is the failure mode this section exists to fix. */
.metric .src {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  word-break: normal;
  overflow-wrap: break-word;
}

.proof-note {
  margin: 26px auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
}

.proof-note code { font-family: var(--mono); font-size: 12px; color: var(--ink-mid); }

/* The regime boundary — where the advantage is smaller, and what it costs.
   Stated on the page rather than left for a prospect's own test to find. */
.proof-note.caveat {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
  font-size: 12.5px;
}

/* ---------- Why us ---------- */

.why { background: var(--light-bg); color: var(--light-ink); }

.why-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 48px;
  align-items: center;
}

.why p.lede { color: var(--light-muted); font-size: 15.5px; max-width: 52ch; }

.why .checks li { font-size: 15px; margin-bottom: 11px; }

.why-illo svg { width: 100%; }

/* ---------- CTA ---------- */

.cta { background: var(--navy-950); padding: 60px 0 80px; }

.cta-card {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--navy-850);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
}

.cta-icon {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--teal-soft);
  border: 1.5px solid var(--teal-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-icon svg { width: 36px; height: 36px; }

.cta-copy { flex: 1; }

.cta-copy h2 { margin: 0 0 8px; font-size: 24px; color: var(--ink-light); }

.cta-copy p { margin: 0; color: var(--ink-mid); font-size: 15px; max-width: 48ch; }

.cta-actions { display: flex; flex-direction: column; gap: 12px; }

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

footer {
  background: var(--navy-950);
  border-top: 1px solid var(--panel-line);
  padding: 28px 0 34px;
  color: var(--ink-dim);
  font-size: 13px;
}

.foot-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.foot-inner .brand { font-size: 16px; }

.foot-links { margin-left: auto; display: flex; gap: 20px; }

.foot-links a { color: var(--ink-dim); text-decoration: none; }

.foot-links a:hover { color: var(--ink-mid); }

/* ---------- Long-form documents (benchmark pages, briefs) ---------- */

.doc {
  background: var(--light-bg);
  color: var(--light-ink);
  padding: 56px 0 90px;
}

.doc-wrap { max-width: 760px; }

.doc-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-500);
  margin: 0 0 12px;
}

.doc h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.doc-standfirst {
  font-size: 19px;
  line-height: 1.55;
  color: var(--light-muted);
  margin: 0 0 28px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--light-line);
  border-bottom: 1px solid var(--light-line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--light-muted);
  margin-bottom: 40px;
}

.doc h2 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  text-wrap: balance;
}

.doc h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }

.doc p { font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; }

.doc strong { font-weight: 650; }

.doc code {
  font-family: var(--mono);
  font-size: 13px;
  background: #e7eef4;
  padding: 1px 5px;
  border-radius: 3px;
}

.doc-callout {
  background: var(--light-card);
  border: 1px solid var(--light-line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 28px 0;
}

.doc-callout p { margin: 0; font-size: 16.5px; }

/* max-width:100% is what actually makes overflow-x clip: without a
   definite width the container grows to fit the table and the page
   scrolls sideways instead. */
.doc-table {
  margin: 26px 0;
  max-width: 100%;
  overflow-x: auto;
}

.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 460px;
  background: var(--light-card);
}

.doc-table th,
.doc-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--light-line);
}

.doc-table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--light-muted);
  background: #eef3f7;
}

.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.doc-table .mut { color: var(--light-muted); font-size: 13px; }

.doc-caption {
  font-size: 13.5px;
  color: var(--light-muted);
  margin: 10px 0 0;
}

.doc-sources {
  margin: 44px 0 0;
  padding: 22px 24px;
  background: var(--light-card);
  border: 1px solid var(--light-line);
  border-radius: var(--radius);
}

.doc-sources ul { margin: 0; padding-left: 20px; }

/* Study slugs and JSON paths are long unbreakable tokens; without this
   they push the whole page sideways on a narrow viewport. */
.doc-sources li {
  font-size: 14px;
  color: var(--light-muted);
  margin-bottom: 7px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.doc code, .doc-sources code { overflow-wrap: anywhere; }

.doc-cta {
  margin-top: 40px;
  padding: 28px 30px;
  background: var(--navy-850);
  border-radius: var(--radius-lg);
  color: var(--ink-light);
}

.doc-cta h3 { color: var(--ink-light); }

.doc-cta p { color: var(--ink-mid); font-size: 15.5px; margin-bottom: 18px; }

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .nav-inner { gap: 18px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 9px; font-size: 14px; }
  .hero-grid { grid-template-columns: 1fr; }
  .viz-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
  .why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .problem-grid, .market-grid { grid-template-columns: 1fr; }
  .market-card { grid-template-columns: 1fr; }
  .market-illo { min-height: 180px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .viz-grid { grid-template-columns: 1fr; }
  .hero-feats { grid-template-columns: 1fr; }
  .feat + .feat { border-left: none; padding-left: 0; border-top: 1px solid var(--panel-line); padding-top: 14px; }
  .cta-card { flex-direction: column; text-align: center; }
}

/* Route from the homepage summary band into the full benchmark pages. */
.proof-more { margin: 22px 0 0; text-align: center; }

.proof-more a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 212, 192, 0.35);
  padding-bottom: 2px;
}

.proof-more a:hover { border-bottom-color: var(--teal-400); }


/* ---------- Phone readability (added 2026-09-20) ----------
   The sub-pages now carry a viewport meta tag, so a phone finally lays them out at its own width
   instead of ~980 px scaled down. These rules take it from there: keep the nav reachable, ease the
   long-form type down a step, and let wide tables reflow instead of scrolling sideways. */

@media (max-width: 720px) {
  /* The nav used to vanish below this width, leaving no way to reach the other pages from a phone.
     Put it on its own line under the wordmark instead. The bar's height is fixed at 64px, so it has
     to become automatic or the second row spills out of the dark background. */
  .nav-inner {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px;
    padding: 10px 0 12px;
  }
  .brand { font-size: 18px; }
  .nav-links {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    gap: 2px 2px;
    margin-left: -8px;
  }
  .nav-links a { padding: 6px 8px; font-size: 13.5px; }

  .doc { padding: 34px 0 60px; }
  .doc h1 { font-size: clamp(26px, 7.5vw, 32px); }
  .doc h2 { font-size: 21px; margin-top: 34px; }
  .doc-standfirst { font-size: 17px; }
  .doc p, .doc-callout p { font-size: 16px; }
  .doc-callout { padding: 16px 18px; }
  .doc-meta { gap: 4px 14px; margin-bottom: 28px; }

  /* min-width was forcing a horizontal scroll on every table. */
  .doc-table table { min-width: 0; font-size: 14.5px; }
  .doc-table th, .doc-table td { padding: 9px 10px; }
}

/* The book tables are three wide prose columns; on a narrow screen they read far better stacked as
   one card per book. Desktop is untouched. */
@media (max-width: 720px) {
  .books-table table { background: none; }
  .books-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .books-table tr {
    display: block;
    background: var(--light-card);
    border: 1px solid var(--light-line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .books-table td { display: block; border-bottom: none; padding: 0; }
  .books-table td:first-child { font-size: 16.5px; line-height: 1.35; margin-bottom: 8px; }
  .books-table td:first-child em { display: inline-block; margin-top: 3px; color: var(--light-muted); }
  .books-table td:nth-child(2) { color: var(--light-muted); line-height: 1.6; margin-bottom: 12px; }
  .books-table td:last-child { font-size: 14px; }
  .books-table td:last-child a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--teal-500);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
  }
}


/* ---------- Data-center proof row (added 2026-10-07) ----------
   Three cards under the transmission grid: diagnosis, not enumeration. Hand-maintained,
   outside the METRICS markers so generate_metrics.py never overwrites it. */

.proof-sub { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--panel-line); }

.proof-sub .kicker { text-align: center; }

.proof-grid.dc { grid-template-columns: repeat(3, 1fr); max-width: 860px; margin: 0 auto; }

@media (max-width: 720px) {
  .proof-grid.dc { grid-template-columns: 1fr; }
}