@import url("/tokens.css?v=2");

/* bim.coffee — shared by index.html and oversite.html */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--n-0);
  color: var(--text);
  font: var(--t-17)/1.6 var(--font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Faint dot texture — the one bit of the old lo-fi ground worth keeping. */
body {
  background-image: radial-gradient(circle, rgba(236, 232, 225, .035) 1px, transparent 1px);
  background-size: 7px 7px;
}
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
img { max-width: 100%; }

.shell {
  max-width: 1140px;
  margin: 0 auto;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  min-height: 100vh;
}

/* ================================================================ top bar */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-8);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-15);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
  flex-shrink: 0;
}
.brand a { color: inherit; text-decoration: none; }
.brand img { height: 26px; width: auto; display: block; }
.brand .ver {
  color: var(--text-3);
  font-weight: var(--w-medium);
  font-size: var(--t-13);
  letter-spacing: 0;
}

nav.top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  font-size: var(--t-13);
  font-weight: var(--w-medium);
  letter-spacing: .02em;
}
nav.top a {
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
nav.top a:hover { color: var(--accent-hi); }

/* Existing customers get a quiet way into the app; the hero CTA stays the
   demo request, which is what a first-time visitor needs. */
.signin-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--s-4);
  font-size: var(--t-13);
  font-weight: var(--w-semi);
  letter-spacing: -.005em;
  color: var(--text);
  background: var(--fill-1);
  box-shadow: var(--fill-edge);
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.signin-link:hover {
  color: var(--accent-hi);
  background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-tint);
}

/* ================================================================ hero */
.hero { padding: var(--s-20) var(--s-8) var(--s-16); text-align: center; }

.tag {
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: var(--s-8);
}

.stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--s-12);
  aspect-ratio: 16/8;
}
.stage svg { width: 100%; height: 100%; display: block; }

h1 {
  font-size: var(--d-1);
  font-weight: var(--w-heavy);
  line-height: 1.08;
  letter-spacing: var(--track-tighter);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
h1 .accent { color: var(--accent-hi); }

.sub {
  font-size: var(--d-3);
  line-height: 1.55;
  color: var(--text-2);
  margin: var(--s-6) auto var(--s-10);
  max-width: 620px;
  text-wrap: pretty;
}

/* ================================================================ buttons */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 var(--s-6);
  font-family: inherit;
  font-size: var(--t-15);
  font-weight: var(--w-bold);
  letter-spacing: -.008em;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--elev-1);
  transition: background var(--dur) var(--ease), transform .06s var(--ease);
}
.cta:hover  { background: var(--brand-deep); }
.cta:active { transform: translateY(1px); }

/* the second button in a pair is the quiet one */
.cta + .cta {
  margin-left: var(--s-3);
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.cta + .cta:hover {
  background: var(--fill-1);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent-hi);
}

/* ================================================================ sections */
.section {
  padding: var(--s-16) var(--s-8);
  border-top: 1px solid var(--line-soft);
}

h2.section-title {
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-hi);
  margin: 0 0 var(--s-6);
}

.section > p {
  font-size: var(--d-3);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 680px;
  text-wrap: pretty;
}
.section > p b { color: var(--text); font-weight: var(--w-bold); }

/* ================================================================ cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.card {
  background: var(--fill-2);
  border: 0;
  box-shadow: var(--fill-edge);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { background: var(--fill-1); transform: translateY(-2px); }
.card .ic {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.card h3 {
  font-size: var(--t-17);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
  margin: 0 0 var(--s-2);
}
.card p {
  font-size: var(--t-15);
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
}

/* ================================================================ detail rows */
.row {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  font-size: var(--t-17);
  color: var(--text-2);
}
.row .item { min-width: 180px; }
.row .item b {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ================================================================ embeds */
.li-grid, .vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.vid-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--fill-2);
  box-shadow: var(--fill-edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.vid-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* LinkedIn posts are rendered as our own cards rather than LinkedIn's
   iframe embed: the embed shows a cookie-consent block to signed-out
   visitors, which was most of what a first-time reader saw. */
.li-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--fill-2);
  box-shadow: var(--fill-edge);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.li-card:hover { background: var(--fill-1); transform: translateY(-2px); }
.li-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.li-icon { width: 17px; height: 17px; color: var(--text-3); flex: none; display: block; }
.li-date { font-size: var(--t-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.li-card h3 {
  margin: 0;
  font-size: var(--t-17);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  line-height: 1.3;
  color: var(--text);
  text-wrap: balance;
}
.li-card p {
  margin: 0;
  flex: 1;
  font-size: var(--t-15);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.li-more { font-size: var(--t-13); font-weight: var(--w-semi); color: var(--accent-hi); }

/* ================================================================ form */
.form-group { margin-bottom: var(--s-4); }
.form-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
}
.form-input {
  width: 100%;
  background: var(--fill-3);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-15);
  padding: var(--s-3) var(--s-4);
  outline: none;
  resize: vertical;
  transition: box-shadow var(--dur) var(--ease);
}
.form-input:focus { box-shadow: inset 0 0 0 1px var(--accent-hi), 0 0 0 3px var(--accent-tint); }
.form-input::placeholder { color: var(--text-3); }

/* ================================================================ oversite page */
.fade-stack {
  position: relative;
  aspect-ratio: 21/8;
  background: var(--fill-2);
  box-shadow: var(--fill-edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fade-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fade-stack img.top { animation: xfade 8s ease-in-out infinite; }
@keyframes xfade {
  0%, 12%   { opacity: 0; }
  42%, 62%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}
.fade-cap, .shot-cap {
  font-size: var(--t-13);
  color: var(--text-3);
  margin-top: var(--s-2);
}
.fade-cap { text-align: center; }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}
.shot {
  background: var(--fill-2);
  box-shadow: var(--fill-edge);
  border-radius: var(--r-lg);
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot.wide { grid-column: 1 / -1; aspect-ratio: 21/9; }

.steps { counter-reset: step; }
.steps-wrap { max-width: 760px; }
.step {
  position: relative;
  border-left: 1px solid var(--line);
  padding: 0 0 var(--s-8) var(--s-8);
  counter-increment: step;
}
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step::before {
  content: counter(step);
  position: absolute;
  left: -13px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-12);
  font-weight: var(--w-heavy);
  display: grid;
  place-items: center;
}
.step b {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-17);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
}
.step p { font-size: var(--t-15); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ================================================================ footer */
.foot {
  padding: var(--s-8);
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-13);
  color: var(--text-3);
}
.foot .cep-wrap { display: flex; align-items: center; gap: var(--s-3); }
.foot .cep { height: 64px; width: auto; border-radius: var(--r-sm); display: block; }
.foot .cep-wrap span { color: var(--text-2); font-size: var(--t-13); line-height: 1.45; max-width: 240px; }

/* ================================================================ hero artwork animations */
/* The hero is generated by hero/build_hero.py; 1px here is one pixel-art cell. */
.blink { color: var(--accent-hi); }

@keyframes rainfall {
  from { transform: translate(0, 0); }
  to   { transform: translate(-2px, 12px); }
}
.rain { animation: rainfall 1.1s linear infinite; opacity: .55; }

@keyframes type-l { 0%, 100% { transform: translateY(0); }    50% { transform: translateY(-1px); } }
@keyframes type-r { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(0); } }
.arm-l { animation: type-l .38s ease-in-out infinite; }
.arm-r { animation: type-r .38s ease-in-out infinite; }

@keyframes cursor-flash { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cursor { animation: cursor-flash 1.2s step-start infinite; }

@keyframes steam-rise {
  0%   { transform: translateY(2px); opacity: 0; }
  30%  { opacity: .7; }
  100% { transform: translateY(-4px); opacity: 0; }
}
.steam { animation: steam-rise 2.8s ease-out infinite; }

@keyframes beacon-blink { 0%, 60% { opacity: 1; } 70%, 100% { opacity: .15; } }
.beacon { animation: beacon-blink 2s step-start infinite; }

/* ================================================================ small screens */
@media (max-width: 720px) {
  html, body { font-size: var(--t-15); }
  .shell { border: 0; }
  .bar { padding: var(--s-3) var(--s-5); gap: var(--s-3); }
  nav.top { gap: var(--s-4); font-size: var(--t-12); }
  .hero { padding: var(--s-12) var(--s-5) var(--s-10); }
  .section { padding: var(--s-12) var(--s-5); }
  .foot { padding: var(--s-6) var(--s-5); }
  .cta { width: 100%; }
  .cta + .cta { margin-left: 0; margin-top: var(--s-3); }
  /* comfortable touch targets — 32px is fine for a mouse, not for a thumb */
  .signin-link { height: 44px; padding: 0 var(--s-4); }
}