/* Marketing shell and landing-page layout. Inherits tokens from bofh99.css. */

.hub {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hub > main {
  flex: 1 0 auto;
}

.hub-top {
  border-bottom: var(--hair);
  background: var(--chalk);
  display: flex; align-items: center; gap: 22px;
  padding: 0 44px;
}
.hub-top .wordmark {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.015em;
}
.hub-top .wordmark .sq { width: 14px; height: 14px; background: var(--orange); }
.hub-top .wordmark .num { font-family: var(--mono); color: var(--steel); font-weight: 500; font-size: 11px; margin-left: 2px; letter-spacing: 0.1em; }
.hub-top nav { display: flex; gap: 22px; margin-left: 18px; }
.hub-top nav a {
  font-size: 13px; color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.hub-top nav a:hover { border-bottom-color: var(--orange); }
.hub-top .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hub-top .sys-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel);
  display: flex; align-items: center; gap: 8px;
}
.hub-top .sys-status .dot { width: 8px; height: 8px; background: var(--green); }
.hub-top .sys-status .dot.warn { background: var(--orange); }

main.hub-main { padding: 56px 44px 80px; max-width: 1440px; margin: 0 auto; width: 100%; }

.hero {
  display: block;
  padding-bottom: 56px;
  border-bottom: var(--hair-strong);
}
.hero > div:first-child {
  max-width: 72ch;
}
.hero .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
}
.hero .eyebrow .pill {
  color: var(--orange); border: 1px solid var(--orange); padding: 2px 8px;
  font-size: 9px;
}
.hero h1 {
  font-family: var(--display);
  font-size: 88px;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0 0 28px;
  max-width: 12ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--orange);
}
.hero .subhead {
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 0 32px;
}
.hero .cta-row { display: flex; gap: 12px; align-items: center; }
.hero .mono-note { font-family: var(--mono); font-size: 11px; color: var(--steel); letter-spacing: 0.04em; margin-left: 8px; }

.status-board {
  border: var(--hair-strong);
  background: var(--card);
  padding: 18px 20px;
  font-family: var(--mono);
  position: relative;
}
.status-board .bar {
  position: absolute; left: 0; right: 0; top: -4px;
  height: 4px; background: var(--ink);
}
.status-board h3 {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--steel); font-weight: 500; margin: 0 0 14px;
  display: flex; justify-content: space-between;
}
.sb-row {
  display: grid; grid-template-columns: 1fr auto;
  padding: 10px 0; border-bottom: var(--hair); align-items: center;
  font-size: 13px; font-family: var(--ui);
}
.sb-row:last-child { border-bottom: 0; }
.sb-row .n { color: var(--ink); font-weight: 500; }
.sb-row .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.sb-row .v.ok { color: var(--green); }
.sb-row .v.warn { color: var(--orange); }
.sb-row .v.bad { color: var(--red); }
.status-board .foot {
  margin-top: 14px; padding-top: 14px; border-top: var(--hair-strong);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel);
  display: flex; justify-content: space-between;
}

.tools-head {
  display: grid; grid-template-columns: 220px 1fr; gap: 56px;
  padding: 48px 0 24px;
  align-items: end;
}
.tools-head h2 {
  font-family: var(--display); font-size: 42px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.02; margin: 0;
  max-width: 18ch;
}
.tools-head .lede { color: var(--steel); font-size: 14px; max-width: 58ch; }

.tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--hair-strong);
  border-bottom: var(--hair-strong);
}

.tool {
  padding: 28px 28px 32px;
  border-right: var(--hair);
  border-bottom: var(--hair);
  background: var(--card);
  display: flex; flex-direction: column;
  min-height: 320px;
  position: relative;
  transition: background 120ms;
}
.tool:nth-child(3n) { border-right: 0; }
.tool:nth-last-child(-n+3) { border-bottom: 0; }
.tool.active { cursor: pointer; }
.tool.active:hover { background: var(--chalk); }
.tool.active:hover .tool-open { color: var(--orange); }

.tool-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px;
}
.tool-code {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel);
}
.tool-state {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 8px;
  border: var(--hair-strong);
  color: var(--ink);
}
.tool-state.live { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.tool-state.beta { color: var(--orange); border-color: var(--orange); }
.tool-state.soon { color: var(--steel); border-color: var(--steel-2); }

.tool-name {
  font-family: var(--display); font-size: 38px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1;
  margin: 0 0 6px;
}
.tool-motto {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.tool-desc {
  font-size: 14px; color: var(--ink-2); line-height: 1.5;
  margin: 0 0 auto;
  max-width: 38ch;
}
.tool-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px; padding-top: 16px;
  border-top: var(--hair);
}
.tool-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--steel); }
.tool-open {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.tool-open .arrow { display: inline-block; transition: transform 120ms; }
.tool.active:hover .tool-open .arrow { transform: translateX(4px); }

.tool-icon {
  width: 44px; height: 44px;
  position: relative;
  background: var(--paper);
  border: var(--hair-strong);
}
.tool-icon svg { display: block; width: 100%; height: 100%; }

.manifesto {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 56px; padding: 64px 0;
  border-bottom: var(--hair);
}
.manifesto h2 {
  font-family: var(--display); font-size: 36px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1;
  margin: 0; max-width: 12ch;
}
.manifesto .rules {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 32px 56px;
}
.rule .num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--orange);
  margin-bottom: 6px;
}
.rule h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.rule p { margin: 0; color: var(--steel); font-size: 13px; line-height: 1.55; max-width: 38ch; }

.tape {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tape-head,
.tape-tail {
  padding: 12px 18px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.tape-head { background: var(--ink); box-shadow: 8px 0 12px var(--ink); }
.tape-tail { background: var(--ink); box-shadow: -8px 0 12px var(--ink); }

.tape-lane {
  overflow: hidden;
  padding: 12px 0;
  position: relative;
  z-index: 1;
}
.tape-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
  animation: tape-marquee 90s linear infinite;
}
.tape:hover .tape-track,
.tape:focus-within .tape-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .tape-track { animation: none; }
}

.tape-item {
  padding: 0 14px;
}
.tape .sep { color: var(--orange); padding: 0 2px; }
.tape .blink { animation: blink 1.6s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes tape-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

footer.hub-foot {
  padding: 44px 44px 36px;
  border-top: var(--hair);
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1440px; margin: 0 auto; width: 100%;
}
.hub-foot h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); font-weight: 500; margin: 0 0 12px; }
.hub-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub-foot ul a { font-size: 13px; color: var(--ink-2); }
.hub-foot ul a:hover { color: var(--orange); }
.hub-foot .colophon { font-size: 11px; color: var(--steel); line-height: 1.6; max-width: 34ch; }

.hub-base {
  padding: 18px 44px;
  border-top: var(--hair);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel);
}