/* ============================================================================
   TellUs — "Spec Sheet" design system
   everittchase.com/products/tellus
   One shared stylesheet for: index (splash), blog, user-guide, technical-docs.
   Concept: an engineering spec document. Blueprint grid, monospaced data tags,
   section numbering, two product-tied accents (cyan = hover-highlight,
   orange = pinned-note dot). Dark-first, high-contrast long-form.
   ============================================================================ */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Color — ink canvas, paper text, two signal accents */
  --ink:        #0b0d10;   /* page canvas */
  --ink-2:      #0f1217;   /* raised panels */
  --surface:    #14181f;   /* cards */
  --surface-2:  #1b212a;   /* code blocks, insets */
  --line:       #262d38;   /* hairlines / grid */
  --line-soft:  #1c222b;

  --paper:      #eef1f4;   /* primary text */
  --muted:      #9aa3ad;   /* secondary text */
  --faint:      #6b7480;   /* tertiary / captions */

  --signal:     #54d6ff;   /* cyan — the element hover-highlight */
  --signal-dim: #1d3a47;
  --pin:        #ff6a3d;   /* orange — the pinned-note indicator dot */
  --pin-dim:    #3a2118;
  --ok:         #5ad19a;

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Space scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --radius: 4px;          /* sharp, not pill */
  --radius-lg: 8px;
  --maxw: 1180px;
  --readw: 720px;         /* long-form measure */

  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 20px 50px -30px rgba(0,0,0,.8);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "ss01","cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Blueprint grid: faint ruled background tying the whole site to "measurement" */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
::selection { background: var(--signal); color: var(--ink); }

/* ---- Typography -------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.05rem; letter-spacing: 0; }
p  { margin: 0 0 var(--s4); }
.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--muted); line-height: 1.5; }
strong { color: var(--paper); font-weight: 700; }
small { font-size: .82rem; color: var(--faint); }

/* Mono "data tag" — styled like a captured TellUs field. Decorative + meaningful. */
.tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--signal-dim);
  border-radius: var(--radius);
  background: rgba(84,214,255,.04);
}
.tag::before { content: "▸"; color: var(--signal); opacity: .7; }
.tag--pin { color: var(--pin); border-color: var(--pin-dim); background: rgba(255,106,61,.05); }
.tag--pin::before { content: "●"; font-size: .6em; }

/* Section number, spec-document style */
.sec-num {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--faint);
  letter-spacing: .1em;
}

/* ---- Layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); }
.section { padding-block: clamp(var(--s8), 10vw, var(--s10)); border-top: 1px solid var(--line-soft); }
.section--flush { border-top: 0; }
.grid { display: grid; gap: var(--s5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--s4);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--signal); }

/* ---- Header / nav ------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--ink) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--s5); height: 64px; }
.brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -.01em; color: var(--paper); display: inline-flex; align-items: center; gap: var(--s3);
}
.brand:hover { text-decoration: none; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 4px var(--pin-dim); }
.nav { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.nav a { color: var(--muted); font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--signal); }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav { gap: var(--s4); font-size: .9rem; overflow-x: auto; }
  .nav .btn { display: none; }
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display); font-weight: 500; font-size: .98rem;
  padding: var(--s3) var(--s5); border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--paper); background: var(--surface);
  cursor: pointer; transition: transform .15s var(--ease), border-color .15s, background .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--faint); }
.btn-signal { background: var(--signal); color: #04222e; border-color: var(--signal); font-weight: 600; }
.btn-signal:hover { background: #7ce0ff; box-shadow: 0 8px 24px -10px rgba(84,214,255,.6); }
.btn-ghost { background: transparent; }
.btn-arrow::after { content: "→"; transition: transform .15s var(--ease); }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(var(--s9), 14vw, 180px) var(--s9); overflow: hidden; }
.hero::after { /* crosshair vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 360px at 78% 8%, rgba(84,214,255,.10), transparent 70%),
    radial-gradient(520px 320px at 12% 92%, rgba(255,106,61,.07), transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 .hl { color: var(--signal); }

/* ---- Cards / features -------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s6);
  position: relative; transition: border-color .2s, transform .2s var(--ease);
}
.card:hover { border-color: var(--faint); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--s3); }
.card p { color: var(--muted); margin-bottom: 0; }
.card .ix { font-family: var(--font-mono); color: var(--faint); font-size: .8rem; margin-bottom: var(--s4); }

/* The pin/crosshair marker — signature motif, reusable as a section/step marker */
.pin {
  --sz: 34px; width: var(--sz); height: var(--sz); flex: 0 0 var(--sz);
  display: grid; place-items: center; position: relative;
  font-family: var(--font-mono); font-size: .9rem; color: var(--pin);
}
.pin::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--pin); border-radius: 50%; opacity: .5; }
.pin::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--pin); }

/* Numbered steps (the 4 gestures) */
.steps { counter-reset: step; display: grid; gap: var(--s4); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: start;
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink-2); }
.step .n { counter-increment: step; font-family: var(--font-mono); color: var(--signal); font-size: 1.1rem; }
.step .n::before { content: "0" counter(step); }
.step h4 { margin-bottom: var(--s1); }
.step p { color: var(--muted); margin: 0; }

/* ---- Code / pre -------------------------------------------------------- */
code { font-family: var(--font-mono); font-size: .88em; color: var(--signal);
  background: var(--surface-2); padding: .1em .4em; border-radius: var(--radius); border: 1px solid var(--line-soft); }
pre {
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s5); overflow-x: auto; margin: 0 0 var(--s5);
  background-image: linear-gradient(var(--ink) 0 0); /* defeat body grid inside pre */
}
pre code { background: none; border: 0; padding: 0; color: var(--paper); }
pre .c { color: var(--faint); }       /* comment */
pre .k { color: var(--pin); }          /* keyword/key */
pre .s { color: var(--ok); }           /* string */

.code-head {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono); font-size: .76rem; color: var(--faint);
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--ink-2);
}
.code-head + pre { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.code-head .dotrow { display: flex; gap: 6px; }
.code-head .dotrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }

/* ---- Tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th { font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); background: var(--ink-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody td code { white-space: nowrap; }

/* ---- Callouts ---------------------------------------------------------- */
.callout { border: 1px solid var(--line); border-left: 3px solid var(--signal);
  background: var(--ink-2); border-radius: var(--radius); padding: var(--s4) var(--s5); margin: 0 0 var(--s5); }
.callout--warn { border-left-color: var(--pin); }
.callout--ok { border-left-color: var(--ok); }
.callout p:last-child { margin-bottom: 0; }
.callout .lbl { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--signal); display: block; margin-bottom: var(--s2); }
.callout--warn .lbl { color: var(--pin); }

/* ---- Long-form prose (blog / docs body) -------------------------------- */
.prose { max-width: var(--readw); }
.prose > h2 { margin-top: var(--s8); }
.prose > h3 { margin-top: var(--s6); }
.prose > p, .prose > ul, .prose > ol { color: var(--paper); }
.prose li { margin-bottom: var(--s2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul li::marker { color: var(--signal); }
.prose figure { margin: var(--s6) 0; }
.prose figure img { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.prose figcaption { font-family: var(--font-mono); font-size: .78rem; color: var(--faint); margin-top: var(--s3); text-align: center; }
.prose blockquote { margin: var(--s6) 0; padding-left: var(--s5); border-left: 3px solid var(--pin);
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; color: var(--paper); }

/* Article meta row */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s4); font-family: var(--font-mono);
  font-size: .8rem; color: var(--faint); margin-bottom: var(--s6); }
.article-meta span { display: inline-flex; gap: var(--s2); }

/* ---- Docs layout (sidebar + content) ----------------------------------- */
.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s7); align-items: start; }
.doc-nav { position: sticky; top: 88px; font-size: .92rem; }
.doc-nav h5 { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); margin: 0 0 var(--s3); }
.doc-nav ul { list-style: none; margin: 0 0 var(--s5); padding: 0; border-left: 1px solid var(--line); }
.doc-nav li a { display: block; color: var(--muted); padding: var(--s2) var(--s4); border-left: 1px solid transparent; margin-left: -1px; }
.doc-nav li a:hover { color: var(--paper); text-decoration: none; }
.doc-nav li a[aria-current="true"] { color: var(--signal); border-left-color: var(--signal); }
.doc-body { min-width: 0; max-width: var(--readw); }
@media (max-width: 880px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-nav { position: static; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); margin-bottom: var(--s5); }
}

/* ---- Footer ------------------------------------------------------------ */
.site-foot { border-top: 1px solid var(--line); padding-block: var(--s8) var(--s7); margin-top: var(--s9); color: var(--muted); }
.site-foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
.site-foot h5 { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 var(--s4); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--paper); }
.site-foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); margin-top: var(--s5); padding-top: var(--s5); font-size: .82rem; color: var(--faint); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
@media (max-width: 700px) { .site-foot .wrap { grid-template-columns: 1fr; } }

/* ---- Load reveal (one orchestrated entrance; reduced-motion safe) ------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; animation: rise .7s var(--ease) forwards; }
.reveal:nth-child(2) { animation-delay: .06s; }
.reveal:nth-child(3) { animation-delay: .12s; }
.reveal:nth-child(4) { animation-delay: .18s; }
.reveal:nth-child(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; } }

/* ---- Utilities --------------------------------------------------------- */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.muted { color: var(--muted); }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.maxw-read { max-width: var(--readw); }
.stack > * + * { margin-top: var(--s4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }