/* ============================================================
   TEN6 — Design System
   Dark, cinematic, ember-glow. Abstract minimalism × h-company warmth.
   ============================================================ */

:root {
  /* Palette */
  --bg:        #0a0908;
  --bg-2:      #100e0c;
  --bg-panel:  #131110;
  --ember:     #ff5a1f;
  --ember-hi:  #ff8149;
  --ember-lo:  #d63a0a;
  --gold:      #e8a752; /* deck accent — warm gold */
  --text:      #f2ece4;
  --text-dim:  #a89e92;
  --text-faint:#6d655b;
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);
  --glow:      rgba(255, 90, 31, 0.55);

  /* Type — Helvetica Neue for display+body, monospace kept for labels */
  --helv: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--helv); /* display headlines */
  --sans:  var(--helv); /* body */
  --archivo: var(--helv); /* page headlines */
  --mono:  "JetBrains Mono", ui-monospace, monospace; /* labels */
  --plex:  "IBM Plex Mono", ui-monospace, monospace; /* mono body copy */

  /* Rhythm */
  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1240px;
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--archivo);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}


/* Grain overlay ------------------------------------------------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Wandering warm glow — canvas of drifting radial light points (h-company style) */
.glow-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: blur(66px);
  opacity: 0.85;
}

/* The living ember orb (legacy, replaced by .glow-canvas) --------- */
.orb {
  position: fixed;
  top: var(--my, 50%);
  left: var(--mx, 50%);
  width: 60vmax;
  height: 60vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at center,
    var(--glow) 0%,
    rgba(214, 58, 10, 0.28) 22%,
    rgba(120, 30, 6, 0.12) 42%,
    transparent 66%);
  filter: blur(30px);
  will-change: top, left;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Content sits above the orb */
main, .site-nav, .site-footer { position: relative; z-index: 2; }

/* Nav --------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem var(--pad);
  position: sticky;
  top: 0;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(10,9,8,0.85), rgba(10,9,8,0));
  z-index: 100;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
  line-height: 1;
}
.wm-img { height: 19px; width: auto; display: block; }
.wm-img-lg { height: 34px; width: auto; display: block; }
.wm-logo { height: 24px; width: auto; display: block; }
.wordmark sup {
  font-size: 0.55em;
  color: var(--ember);
  position: relative;
  top: -0.1em;
  text-shadow: 0 0 14px var(--glow);
}
.wordmark .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px var(--glow), 0 0 26px var(--glow);
  margin-left: 0.35em;
  align-self: center;
  animation: breathe 4s ease-in-out infinite;
}
.nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  font-family: var(--plex);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-cta {
  border: 1px solid var(--line-2);
  padding: 0.55rem 1rem;
  border-radius: 100px;
  color: var(--text) !important;
  transition: all 0.35s ease;
}
.nav-cta:hover {
  border-color: var(--ember);
  box-shadow: 0 0 24px -6px var(--glow);
  background: rgba(255, 90, 31, 0.06);
}

/* Type utilities --------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--ember);
  opacity: 0.7;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

.display {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.display em { font-style: italic; color: var(--ember); }

.lead {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 46ch;
}

/* Layout ------------------------------------------------------ */
section { padding: clamp(4.5rem, 11vw, 9rem) var(--pad); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* Hero -------------------------------------------------------- */
.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4rem;
}
.hero .display { max-width: 15ch; margin: 1.6rem 0 2rem; }
.hero-meta {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hero-meta span { color: var(--text-dim); }

/* Section header pattern */
.sec-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sec-head h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin-top: 1.2rem; max-width: 20ch; }

/* Thesis body */
.prose p { max-width: 60ch; color: var(--text-dim); font-size: 1.15rem; margin-bottom: 1.3rem; }
.prose p strong { color: var(--text); font-weight: 500; }

/* Operate: 3 columns ----------------------------------------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.cell {
  background: var(--bg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  transition: background 0.4s ease;
}
.cell:hover { background: var(--bg-panel); }
.cell .num {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ember);
  letter-spacing: 0.1em;
}
.cell h3 { font-size: 1.7rem; margin: 1.4rem 0 0.7rem; }
.cell p { color: var(--text-dim); font-size: 0.98rem; }

/* Syndicate marquee ------------------------------------------ */
.members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.5rem;
}
.chip {
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  color: var(--text-dim);
  transition: all 0.35s ease;
}
.chip:hover {
  color: var(--text);
  border-color: var(--ember);
  box-shadow: 0 0 30px -10px var(--glow);
}

/* Big CTA ----------------------------------------------------- */
.cta-band {
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(2.4rem, 7vw, 5rem); max-width: 18ch; margin: 0 auto 2.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--bg);
  background: var(--text);
  padding: 0.85rem 1.7rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover { background: var(--ember); color: #fff; box-shadow: 0 0 40px -8px var(--glow); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.ghost:hover { border-color: var(--ember); background: rgba(255,90,31,0.06); box-shadow: 0 0 30px -10px var(--glow); }
.btn .arrow { transition: transform 0.4s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* Footer ------------------------------------------------------ */
.site-footer {
  padding: 4rem var(--pad) 2.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-end;
}
.site-footer .fine {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.footer-links { display: flex; gap: 1.6rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--ember); }

/* Companies --------------------------------------------------- */
.co-list { border-top: 1px solid var(--line); margin-top: 3rem; }
.co-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.8rem 0.5rem;
  border-bottom: 1px solid var(--line);
  transition: all 0.4s ease;
  cursor: default;
}
.co-row:hover { background: linear-gradient(90deg, rgba(255,90,31,0.05), transparent); padding-left: 1.5rem; }
.co-row .co-name { font-family: var(--serif); font-size: 1.9rem; }
.co-row .co-desc { color: var(--text-dim); font-size: 0.98rem; }
.co-row .co-tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); text-align: right; }
.co-row:hover .co-name { color: var(--ember); }

/* Form -------------------------------------------------------- */
.apply-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.field { margin-bottom: 1.6rem; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  transition: all 0.3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(255,90,31,0.12);
  background: rgba(255,255,255,0.03);
}
/* kill the browser's yellow autofill fill; keep our dark field */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #14100e inset;
  box-shadow: 0 0 0 1000px #14100e inset;
  transition: background-color 100000s ease-in-out 0s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20stroke%3D%27%23a89e92%27%20stroke-width%3D%271.6%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}
/* muted "Select…" placeholder until a real option is chosen */
.field select:invalid { color: var(--text-dim); }
.field .opt { color: var(--text-faint); font-weight: 400; }
/* accredited-investor checkbox row */
.field input[type="checkbox"] { width: auto; padding: 0; border: 0; box-shadow: none; margin: 0.15rem 0 0; accent-color: var(--ember); flex: none; cursor: pointer; }
.accredited { display: flex; flex-direction: row; align-items: flex-start; gap: 0.65rem; cursor: pointer; margin-bottom: 1.2rem; }
.accredited > span { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.accredited.hide { display: none; }
.form-legal { font-family: var(--archivo); font-size: 0.78rem; color: var(--text-faint); line-height: 1.6; max-width: none; margin-top: 1.5rem; }
.form-legal a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.form-legal a:hover { color: var(--ember); }
.form-note { font-family: var(--sans); font-size: 0.85rem; color: var(--text-faint); margin-top: 1rem; letter-spacing: 0; }
.form-success {
  display: none;
  border: 1px solid var(--ember);
  border-radius: 6px;
  padding: 2rem;
  background: rgba(255,90,31,0.06);
  text-align: center;
}
.form-success.show { display: block; animation: fadeUp 0.6s ease both; }
.form-success h3 { color: var(--ember); font-size: 1.8rem; margin-bottom: 0.6rem; }

/* Intro / landing animation ---------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  transition: opacity 1s ease 0.2s, visibility 1s ease 0.2s;
}
.intro.done { opacity: 0; visibility: hidden; }
.intro-orb {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, var(--ember-hi), var(--ember) 40%, var(--ember-lo) 72%, transparent 78%);
  box-shadow: 0 0 80px -6px var(--glow), 0 0 140px -20px var(--glow);
  animation: orbIn 1.8s cubic-bezier(0.16,1,0.3,1) both, breathe 4s ease-in-out 1.8s infinite;
}
@keyframes orbIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.intro-word {
  font-family: var(--serif);
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeUp 1s ease 0.9s both;
  display: inline-flex;
  align-items: baseline;
}
.intro-word sup { font-size: 0.55em; color: var(--ember); top: -0.1em; position: relative; text-shadow: 0 0 14px var(--glow); }

/* Reveal on load / scroll ------------------------------------ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.reveal.d1 { animation-delay: 0.1s; }
.reveal.d2 { animation-delay: 0.22s; }
.reveal.d3 { animation-delay: 0.34s; }
.reveal.d4 { animation-delay: 0.46s; }

/* ============================================================
   Abstract-style single-screen landing (home)
   ============================================================ */
body.locked { overflow: hidden; height: 100vh; }

.landing-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.landing {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem var(--pad);
}
.landing-center {
  max-width: 640px;
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: fadeUp 1.1s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 1.7rem;
}
.summary {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  max-width: 46ch;
  margin: 0 auto;
  text-shadow: 0 1px 20px rgba(10, 9, 8, 0.92), 0 0 30px rgba(10, 9, 8, 0.8);
}
.summary b { font-weight: 700; }

/* Structured hero: eyebrow → headline → subhead → body */
.hero-stack { text-align: center; }
.hero-eyebrow {
  font-family: var(--plex);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ember);
  margin-bottom: 1.7rem;
}
.hero-headline {
  font-family: var(--archivo);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
  margin: 0 auto 2.2rem;
  max-width: none;
  white-space: nowrap;
  text-shadow: 0 1px 22px rgba(10, 9, 8, 0.9);
}
.hero-sub {
  font-family: var(--archivo);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-dim);
  max-width: none;
  white-space: nowrap;
  margin: 0 auto 2.8rem;
  line-height: 1.5;
  text-shadow: 0 1px 16px rgba(10, 9, 8, 0.85);
}
.hero-body {
  font-family: var(--archivo);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 48ch;
  margin: 0 auto;
  text-shadow: 0 1px 20px rgba(10, 9, 8, 0.92), 0 0 30px rgba(10, 9, 8, 0.8);
}
@media (max-width: 640px) {
  .hero-eyebrow { margin-bottom: 1.2rem; }
  .hero-sub { margin-bottom: 2rem; }
}
@media (max-width: 640px) { .hero-sub { white-space: normal; max-width: 36ch; } }
@media (max-width: 600px) { .hero-headline { white-space: normal; } }
.landing-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 1.4rem var(--pad) 1.8rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
}
.landing-foot a { color: var(--text-faint); text-decoration: none; transition: color 0.3s ease; }
.landing-foot a:hover { color: var(--ember); }
.landing-foot .foot-links { display: flex; gap: 1.4rem; margin-left: auto; }
.landing-foot .foot-icon { display: block; width: 19px; height: 19px; }

/* Loader (logo lives here later) ----------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.35s;
}
/* takeover + reveal: glow blooms to fill, content fades, panel lifts to show the site */
.loader.done { transform: translateY(-101%); }
.loader.done .load-glow {
  transform: translate(-50%, -50%) scale(3);
  opacity: 1;
  transition: transform 0.55s ease-out, opacity 0.55s ease-out;
}
.loader.done .load-center { opacity: 0; transition: opacity 0.35s ease; }

.load-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.load-tagline {
  margin-top: 1.7rem;
  font-family: var(--serif);
  font-size: clamp(0.68rem, 1.3vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  animation: fadeUp 0.9s ease 1.05s both;
}
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.7rem; }
.loader-mark {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.2s both;
}
.loader-mark sup { font-size: 0.55em; color: var(--ember); position: relative; top: -0.1em; text-shadow: 0 0 16px var(--glow); }
.loader-bar {
  width: 190px; height: 1px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}
.loader-bar span {
  position: absolute; inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ember);
  box-shadow: 0 0 14px var(--glow);
  animation: loadbar 2.05s cubic-bezier(0.65,0,0.35,1) 0.3s forwards;
}
@keyframes loadbar { to { transform: scaleX(1); } }

/* ============================================================
   The Ten6 cube + binary mark (rebuilt in pure CSS 3D)
   ============================================================ */
.cube-stage {
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.9s cubic-bezier(0.7,0,0.3,1);
}
.cube { position: relative; transform-style: preserve-3d; transform: rotateX(-26deg) rotateY(-45deg); z-index: 1; }
.cube, .face { width: var(--s2); height: var(--s2); }
.face { position: absolute; }
.face.top    { transform: rotateX(90deg)  translateZ(var(--s)); background: radial-gradient(circle at 22% 80%, rgba(255,68,22,0.85), transparent 52%), radial-gradient(circle at 92% 12%, rgba(255,176,64,0.80), transparent 48%), linear-gradient(135deg,#1c1613,#0d0a09); }
.face.front  { transform: translateZ(var(--s)); background: radial-gradient(circle at 92% 8%, rgba(255,54,16,0.95), transparent 60%), radial-gradient(circle at 10% 100%, rgba(210,40,8,0.55), transparent 55%), linear-gradient(180deg,#191210,#0b0908); }
.face.right  { transform: rotateY(90deg)  translateZ(var(--s)); background: radial-gradient(circle at 8% 6%, rgba(255,60,18,0.9), transparent 58%), radial-gradient(circle at 100% 60%, rgba(255,168,56,0.8), transparent 52%), linear-gradient(180deg,#151110,#0a0807); }
.face.left   { transform: rotateY(-90deg) translateZ(var(--s)); background:#0a0807; }
.face.back   { transform: rotateY(180deg) translateZ(var(--s)); background:#0a0807; }
.face.bottom { transform: rotateX(-90deg) translateZ(var(--s)); background:#0a0807; }
.face.display { background: linear-gradient(160deg,#171010,#080605); display:flex; align-items:center; justify-content:center; }

.bin { display: inline-grid; grid-template-columns: repeat(4, var(--d,16px)); grid-auto-rows: var(--d,16px); gap: var(--g,9px); }
.bin .bit { width: var(--d,16px); height: var(--d,16px); border-radius: 50%; }
.bin.sq .bit { border-radius: 2px; }
.bin .one { background: var(--ember); box-shadow: 0 0 9px var(--glow), 0 0 20px -4px var(--glow); }
.bin .zero { background: transparent; border: 1px solid rgba(255,255,255,0.16); }
.bin.tiny0 .zero { transform: scale(0.42); background: rgba(255,255,255,0.22); border: none; }

/* Binary mark in the nav (the logo) */
.nav-mark { align-self: center; margin-right: 0.6rem; }
.nav-mark .one { box-shadow: 0 0 4px rgba(255,90,31,0.65); }

@keyframes cubeSpin  { from { transform: rotateX(-26deg) rotateY(-45deg); } to { transform: rotateX(-26deg) rotateY(315deg); } }
@keyframes cubeIgnite { 0% { transform: rotateX(-26deg) rotateY(-45deg) scale(0.45); opacity:0; } 55% { opacity:1; } 100% { transform: rotateX(-26deg) rotateY(-45deg) scale(1); opacity:1; } }
@keyframes dotOn { from { opacity:0; } to { opacity:1; } }
/* Ignite runs on the flat parent stage (scale+fade) so the cube's 3D transform
   stays static — animating a 3D transform WITH scale flattens preserve-3d in Chrome. */
@keyframes stageIgnite { 0% { transform: scale(0.5); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* Load animation (home): warm glow + the logo's squares float into place,
   the wordmark loads in, then the squares dissolve and drift away. (JS-driven) */
.load-glow {
  position: absolute; top: 50%; left: 50%;
  width: 78vmax; height: 78vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,31,0.26), rgba(214,58,10,0.1) 38%, transparent 64%);
  filter: blur(50px);
  opacity: 0; transform: translate(-50%,-50%);
  animation: loadGlow 1.4s ease 0.15s forwards;
}
/* faint scattered dots behind the loader logo, like the hero */
.loader-dots {
  position: absolute; inset: 0;
  background: url("assets/hero-dots-dark.svg") center/cover no-repeat;
  opacity: 0.5;
}
@keyframes loadGlow { to { opacity: 1; } }
.load-logo-anim { position: relative; width: clamp(210px, 46vw, 320px); z-index: 1; }
.load-logo-anim svg { width: 100%; height: auto; display: block; overflow: visible; }
.loader { overflow: hidden; }  /* clip the far-flung squares at the screen edge */

/* Mobile ------------------------------------------------------ */
@media (max-width: 860px) {
  .apply-grid { grid-template-columns: 1fr; }
  .co-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .co-row .co-tag { text-align: left; }
  .nav-links { gap: 1rem; }
  .nav-links .hide-sm { display: none; }
  .hero-meta { gap: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; }
  /* Loader can't animate under reduced motion; show the logo + glow statically */
  .load-glow { opacity: 1; }
  .load-logo-anim svg [fill^="url"], .load-logo-anim svg [fill="white"] { opacity: 1 !important; }
}

/* ============================================================
   Hero effects (home): scattered dark dots; a warm glow lights them
   from BEHIND near the cursor (backlit). Full-screen so it flows behind
   the nav with no hard edge. No bloom sits on top of the content.
   ============================================================ */
.dot-field, .dot-halo, .dot-field-glow {
  position: fixed; inset: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
.dot-field { z-index: 0; background-image: url("assets/hero-dots-dark.svg"); }
/* cube page: the dark dots are fainter (less grey), but still light up under the moving light */
.home-cube .dot-field { opacity: 0.4; }
/* soft blurred layer = the glow appearing to come from behind the dots */
/* two spotlights so BOTH lights (home) or the single light (cube) reveal dots under them */
.dot-halo {
  z-index: 1;
  background-image: url("assets/hero-dots-glow.svg");
  filter: blur(8px);
  opacity: 0.85;
  -webkit-mask-image:
    radial-gradient(circle 250px at var(--mx,50%) var(--my,50%), #000 0%, #000 14%, transparent 70%),
    radial-gradient(circle 250px at var(--mx2,var(--mx,50%)) var(--my2,var(--my,50%)), #000 0%, #000 14%, transparent 70%);
  mask-image:
    radial-gradient(circle 250px at var(--mx,50%) var(--my,50%), #000 0%, #000 14%, transparent 70%),
    radial-gradient(circle 250px at var(--mx2,var(--mx,50%)) var(--my2,var(--my,50%)), #000 0%, #000 14%, transparent 70%);
}
/* crisp lit dot faces on top of the halo */
.dot-field-glow {
  z-index: 2;
  background-image: url("assets/hero-dots-glow.svg");
  -webkit-mask-image:
    radial-gradient(circle 215px at var(--mx,50%) var(--my,50%), #000 0%, #000 8%, transparent 62%),
    radial-gradient(circle 215px at var(--mx2,var(--mx,50%)) var(--my2,var(--my,50%)), #000 0%, #000 8%, transparent 62%);
  mask-image:
    radial-gradient(circle 215px at var(--mx,50%) var(--my,50%), #000 0%, #000 8%, transparent 62%),
    radial-gradient(circle 215px at var(--mx2,var(--mx,50%)) var(--my2,var(--my,50%)), #000 0%, #000 8%, transparent 62%);
}
@media (prefers-reduced-motion: reduce) { .dot-halo, .dot-field-glow { display: none; } }

/* Home: nav is transparent so the glow flows up through it (no black bar) */
.landing-shell .site-nav { background: none; backdrop-filter: none; }

/* Grainy corner ambience — warm light blooms from the corners into black (Volantis-inspired).
   Static (no per-frame cost): layered corner radial gradients + an SVG film-grain overlay. */
/* Horizontal warm band across the top edge (full width), fading straight down into the
   dark centre through a gold -> ember -> red ramp. Grainy (Volantis-style). */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(232, 167, 82, 0.075) 0%,  /* gold at the very top edge */
      rgba(255, 90, 31, 0.038) 4%,   /* ember */
      rgba(214, 58, 10, 0.018) 8%,   /* red */
      transparent 12%);              /* faded out by roughly the logo/nav line */
  /* taper the band's left & right ends so the middle stays flat but the corners round off */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.13;
  mix-blend-mode: overlay;
  /* grain follows the same short top-edge falloff */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 6%, transparent 12%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 6%, transparent 12%);
}

/* Homepage variant 2: glowing cube behind the hero */
.cube-bg {
  position: fixed;
  /* the cube's top-face point is pinned to viewport centre (where the copy sits)
     so the copy stays centered on the top face at every screen size */
  top: 50%; left: 50%;
  transform: translate(-50%, -31%);
  width: min(1120px, 78vw);
  height: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.3;
}
@media (max-width: 700px) { .cube-bg { width: 165vw; } }

/* Reveal: a brighter copy of the cube shown only under a soft light that
   traces the cube's edges, so the corners/edges light up as it travels */
.cube-reveal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -31%);
  width: min(1120px, 78vw);
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
  filter: blur(26px); /* soften the spotlight so its edge isn't hard */
  /* soft spotlight positioned by JS (--lx/--ly) — follows the traveling light across the cube */
  -webkit-mask-image: radial-gradient(circle 420px at var(--lx, 50%) var(--ly, 50%), #000 0%, #000 6%, transparent 82%);
  mask-image: radial-gradient(circle 420px at var(--lx, 50%) var(--ly, 50%), #000 0%, #000 6%, transparent 82%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (max-width: 700px) { .cube-reveal { width: 165vw; } }
@media (prefers-reduced-motion: reduce) { .cube-reveal { opacity: 0.45; -webkit-mask: none; mask: none; } }

/* Big faint TEN6 watermark behind the hero */
.hero-wordmark {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1120px, 92vw);
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.12;
}

/* Large soft cube grid bleeding off the right of the hero (home) */
.hero-cube {
  position: fixed;
  top: 50%;
  right: -3%;
  height: 110vh;
  width: auto;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
}
@media (max-width: 960px) { .hero-cube { right: -18%; height: 82vh; opacity: 0.55; } }
@media (max-width: 600px) { .hero-cube { right: -8%; height: 66vh; opacity: 0.75; } }

/* ============================================================
   Companies — logo wall (Abstract-style grid)
   ============================================================ */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: 3rem;
}
.logo-cell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  text-decoration: none;
  cursor: pointer;
  background: none;
  -webkit-appearance: none; appearance: none;
  font: inherit; color: inherit;
}
/* Ember radial gradient (matches the brand orb) — fades in on hover/active */
.logo-cell::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 42%, var(--ember-hi) 0%, var(--ember) 35%, var(--ember-lo) 70%, #8a2507 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* Film-grain texture over the ember (same fractalNoise as the page grain) */
.logo-cell::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.logo-cell:hover::before, .logo-cell.active::before { opacity: 0.6; }
.logo-cell:hover::after, .logo-cell.active::after { opacity: 0.55; }
.logo-cell > * { position: relative; z-index: 1; }
.logo-cell.active img.logo, .logo-cell.active .logo-lockup, .logo-cell.active .logo-word { opacity: 1; }

/* Company info panel (expands below the grid) */
.co-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-bottom: 1px solid var(--line);
  transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.co-detail.open { max-height: 320px; opacity: 1; }
.co-detail-in { padding: 2rem 0.5rem 2.4rem; }
.co-detail-name { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.co-detail-stage { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.co-detail-blurb { font-family: var(--archivo); color: var(--text); max-width: 62ch; font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.2rem; }
.co-detail-link { color: var(--ember); text-decoration: none; font-size: 0.98rem; display: inline-flex; align-items: center; gap: 0.45rem; transition: gap 0.3s ease; }
.co-detail-link:hover { gap: 0.7rem; text-decoration: underline; }

/* Prior work — Tensor Ventures diligence positions. Deliberately subordinate to
   the logo grid above: a quiet text list, no logos, so it reads as context for
   the portfolio rather than as part of it. */
/* padding is the full shorthand on purpose: the global `section` rule applies a
   page-level clamp() padding on all sides, and this is a nested section, so a
   padding-top longhand alone would leave that inset on the sides and bottom. */
.prior { margin-top: 3.4rem; padding: 2.4rem 0 0; border-top: 1px solid var(--line); }
.prior-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
  margin: 0 0 0.7rem;
}
/* The list is the grid, not each row: the outcome column is sized once against
   the longest outcome across ALL rows, so every row shares the same tracks and
   the right edge lines up. Rows opt into those tracks via subgrid — giving each
   <li> its own grid would size the auto column per-row and leave them ragged. */
.prior-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.prior-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 0.4rem 2rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.prior-row:first-child { border-top: 1px solid var(--line); }
.prior-co { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.prior-name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--text); }
.prior-desc { font-family: var(--archivo); font-size: 0.9rem; color: var(--text-dim); line-height: 1.4; }
.prior-outcome {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
}
/* Still-held positions carry no outcome, so they shouldn't read as an exit */
.prior-outcome.prior-active { color: var(--text-dim); }
@media (max-width: 720px) {
  .prior-list { grid-template-columns: 1fr; }
  .prior-row { gap: 0.3rem; }
  .prior-outcome { text-align: left; white-space: normal; margin-top: 0.1rem; }
}

/* Founder CTA below the company list (pushed down when a panel opens) */
.co-cta { margin-top: 3.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.co-cta-text {
  font-family: var(--archivo);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.co-cta-sub {
  font-family: var(--archivo);
  font-size: 18px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 1.3rem;
}
@media (max-width: 520px) {
  .co-cta-text { font-size: 1.15rem; }
  .co-cta-sub { font-size: 1rem; }
}
.co-cta-link {
  font-family: var(--plex);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: var(--ember);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: gap 0.3s ease;
}
.co-cta-link:hover { gap: 0.85rem; }
/* real logos: uniform white, subtle until hover */
.logo-cell img.logo { height: 24px; width: auto; max-width: 80%; object-fit: contain; opacity: 0.8; transition: opacity 0.4s ease, filter 0.4s ease; }
.logo-cell:hover img.logo { opacity: 1; }
.logo-lockup { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); opacity: 0.82; transition: opacity 0.4s ease; }
.logo-cell:hover .logo-lockup { opacity: 1; }
.logo-lockup img { height: 26px; width: auto; transition: filter 0.4s ease; }
.logo-lockup span { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; transition: text-shadow 0.4s ease; }
.logo-word { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.92rem; color: var(--text); opacity: 0.78; transition: opacity 0.4s ease, text-shadow 0.4s ease; }
.logo-cell:hover .logo-word { opacity: 1; }

/* Logo glows against the ember when the cell is hovered/active */
.logo-cell:hover img.logo, .logo-cell.active img.logo,
.logo-cell:hover .logo-lockup img, .logo-cell.active .logo-lockup img {
  filter: drop-shadow(0 0 7px rgba(242,236,228,1)) drop-shadow(0 0 16px rgba(242,236,228,0.85)) drop-shadow(0 0 30px rgba(242,236,228,0.55));
}
.logo-cell:hover .logo-lockup span, .logo-cell.active .logo-lockup span,
.logo-cell:hover .logo-word, .logo-cell.active .logo-word {
  text-shadow: 0 0 7px rgba(242,236,228,1), 0 0 16px rgba(242,236,228,0.85), 0 0 30px rgba(242,236,228,0.55);
}
@media (max-width: 900px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Apply — compact, fits above the fold
   ============================================================ */
.apply-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.apply-main { flex: 1; display: flex; align-items: center; padding: 1rem var(--pad) 1.5rem; }
.apply-card { width: 100%; max-width: 900px; margin: 0 auto; }
.apply-card h1 { font-family: var(--archivo); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -0.03em; margin-bottom: 0.6rem; }
.apply-card .sub { font-family: var(--archivo); color: var(--text-dim); max-width: none; margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.65; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.3rem; }
.form-2col .field { margin-bottom: 0.9rem; }
.form-2col .full { grid-column: 1 / -1; }
.form-2col .field textarea { min-height: 66px; }
.apply-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.3rem; margin-top: 1.2rem; margin-bottom: 2.5rem; }
.apply-actions .form-note { margin-top: 0; }
@media (max-width: 640px) { .form-2col { grid-template-columns: 1fr; } .apply-main { align-items: flex-start; } }

/* ============================================================
   MOBILE — polished small-screen experience
   ============================================================ */
@media (max-width: 680px) {
  /* Use dynamic viewport height so the mobile address bar never clips content */
  body.locked { height: 100dvh; }
  .landing-shell { min-height: 100dvh; }

  /* Nav: compact, breathing room, logo scales down */
  .site-nav { padding: 1.05rem var(--pad); }
  .wm-logo { height: 21px; }
  .nav-links { gap: 0.85rem; font-size: 0.88rem; }
  .hide-mobile { display: none; }
  .nav-cta { padding: 0.5rem 0.85rem; border-radius: 100px; }

  /* Home landing — narrow column with generous side space; more vertical presence */
  .landing { padding: 1.5rem 2rem; }
  .summary { font-size: 1.08rem; line-height: 1.8; max-width: 24ch; }
  .landing-foot { font-size: 0.72rem; padding: 1.1rem var(--pad) 1.3rem; }

  /* Companies logo wall: 2 across, taller cells so logos read well */
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { aspect-ratio: 16 / 10; padding: 0.75rem; }
  .logo-cell img.logo { max-width: 88%; }
  .logo-lockup span { font-size: 1.3rem; }
  .logo-word { font-size: 0.82rem; letter-spacing: 0.12em; }

  /* Apply: let it breathe & scroll naturally on phones */
  .apply-wrap { min-height: auto; }
  .apply-main { min-height: auto; padding: 1.5rem var(--pad) 4.5rem; align-items: flex-start; }
  .form-2col { grid-template-columns: 1fr; gap: 0; }
  .apply-actions { flex-direction: column; align-items: flex-start; gap: 0.9rem; margin-top: 0.6rem; margin-bottom: 3.5rem; }

  /* Section paddings tighten */
  section { padding: 3rem var(--pad); }
}

/* Small phones */
@media (max-width: 380px) {
  .nav-links { gap: 0.65rem; font-size: 0.82rem; }
  .wm-logo { height: 22px; }
}

/* Legal pages ------------------------------------------------- */
.legal-main { flex: 1; display: block; padding: 2.5rem var(--pad) 1rem; }
.legal { width: 100%; max-width: 760px; margin: 0 auto; }
.legal h1 {
  font-family: var(--archivo); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}
.legal .updated {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 2.4rem;
}
.legal .lead {
  font-family: var(--archivo); color: var(--text-dim);
  font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.8rem;
}
.legal h2 {
  font-family: var(--archivo); font-weight: 600; color: var(--text);
  font-size: 1.02rem; letter-spacing: -0.01em; margin: 2.4rem 0 0.7rem;
}
.legal p, .legal li {
  font-family: var(--archivo); color: var(--text-dim);
  font-size: 0.95rem; line-height: 1.72; margin-bottom: 0.9rem;
}
.legal ul { padding-left: 1.15rem; margin-bottom: 0.9rem; }
.legal li { margin-bottom: 0.35rem; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ember); }
.legal .fine-note {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--text-faint);
}

/* Legal links in footers */
.footer-legal {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 0.6rem;
}
.footer-legal a { color: var(--text-faint); text-decoration: none; transition: color 0.3s ease; }
.footer-legal a:hover { color: var(--ember); }
.landing-foot .footer-legal { margin-top: 0; }