:root {
  --bg: #070b10;
  --surface: #101823;
  --surface-2: #0b1119;
  --ink: #edf4fb;
  --muted: #9cafc2;
  --quiet: #6f8498;
  --line: rgba(184, 207, 228, .16);
  --line-strong: rgba(77,166,255, .34);
  --blue: #4da6ff;
  --blue-2: #0078d4;
  --green: #42d69a;
  --amber: #f0b429;
  --red: #f05050;
  --r: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  background: transparent;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

/* ONE INFINITE CANVAS, matching the home and tools pages: a fixed ambience
   layer that stays put in the viewport, plus one document-length dot grid
   that pans with the scroll. Painted from theme variables so the same stack
   works on CoLateral Dark and on every light theme. No section may paint an
   opaque background of its own or the canvas visibly stops there. */
.canvas-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 40%),
    radial-gradient(circle at 84% 6%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 42%),
    radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--green) 10%, transparent), transparent 46%),
    var(--bg);
}

.canvas-bg:before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--blue) 12%, transparent), transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--blue) 9%, transparent), transparent);
  background-position: 20% 28%, 80% 62%;
  background-size: 55% 55%, 50% 50%;
  background-repeat: no-repeat;
  filter: blur(46px);
  opacity: .6;
  animation: canvasDrift 34s ease-in-out infinite alternate;
}

@keyframes canvasDrift {
  0% { transform: translate3d(-4%, -2%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.02); }
}

.canvas-dots {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 20%, transparent) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

/* CANVAS TOOLS: small tool / note / RFI cards pinned into the page gutters,
   mirroring real objects from the Project Canvas. They are anchored to the
   document so they scroll away like canvas objects, sit behind the content
   (.wrap is z-index 1), and are purely decorative. */
.sec-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.cvf {
  position: absolute;
  width: 236px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  overflow: hidden;
  opacity: .88;
  animation: cvfFloat 11s ease-in-out infinite alternate;
}

.cvf-sm { width: 210px; }

.cvf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.cvf-ic { display: inline-flex; flex: none; color: var(--blue); }
.cvf-ic svg { width: 14px; height: 14px; }
.cvf-ic-dim { color: var(--muted); opacity: .85; }

.cvf-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }

.cvf-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cvf-sub {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--quiet);
  white-space: nowrap;
}

.cvf-body {
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cvf-metric {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.cvf-metric b { color: var(--ink); font-weight: 750; white-space: nowrap; }

.cvf-util { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

.cvf-util-bar {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.cvf-util-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.cvf-pass,
.cvf-open {
  flex: none;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 999px;
}

.cvf-pass {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
}

.cvf-open {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
}

.cvf-note-body { font-size: 11px; line-height: 1.5; color: var(--muted); }

.cvf-spark { display: block; width: 100%; height: auto; }
.cvf-spark .axis { stroke: color-mix(in srgb, var(--ink) 32%, transparent); }
.cvf-spark .curve { stroke: var(--blue); fill: color-mix(in srgb, var(--blue) 14%, transparent); }

@keyframes cvfFloat {
  from { transform: translateY(-6px); }
  to { transform: translateY(7px); }
}

/* The gutter cards need real side room; below this they would crowd the copy. */
@media (max-width: 1359px) { .sec-canvas { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .canvas-bg:before,
  .cvf { animation: none; }
}

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

.wrap { position: relative; z-index: 1; width: min(1120px, calc(100% - 36px)); margin: auto; }

main { position: relative; display: block; }

.public-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 16, .84);
  backdrop-filter: blur(18px);
}

.public-nav-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.public-brand-logo {
  width: 26px;
  height: 26px;
  flex: none;
}

.public-brand-word span { color: var(--blue); }

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

.public-links a {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.public-links a:hover,
.public-links a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, .035);
}

.public-links .nav-cta {
  color: #fff;
  border-color: transparent;
  background: var(--blue-2);
}

.hero {
  padding: 78px 0 34px;
}

.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .14em;
}

h1 {
  max-width: 900px;
  margin: 14px 0 18px;
  color: var(--ink);
  font-size: clamp(42px, 6vw, 72px);
  line-height: .98;
  letter-spacing: -.05em;
}

h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

p { color: var(--muted); margin: 0 0 14px; }

.lede {
  max-width: 760px;
  font-size: 18px;
}

.hero-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.hero-badge-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: 12px;
  font-weight: 720;
}

.hero-actions,
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .055);
  color: var(--ink);
  font-weight: 820;
}

.btn.primary {
  border-color: transparent;
  background: var(--blue-2);
  color: #fff;
}

.section {
  padding: 32px 0 60px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card,
.form-panel,
.policy-panel,
.status-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(19, 31, 44, .88), rgba(12, 18, 26, .9));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.card { padding: 20px; min-height: 148px; }

.card p:last-child { margin-bottom: 0; }

a.card { display: block; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.card:hover,
a.card:focus-visible {
  border-color: rgba(77,166,255, .45);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.chip,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.status-chip.implemented { color: var(--green); }
.status-chip.in-progress { color: var(--blue); }
.status-chip.planned { color: var(--amber); }
.status-chip.enterprise-roadmap { color: var(--muted); }

.form-panel { padding: 24px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.form-grid .wide { grid-column: 1 / -1; }

.form-grid input,
.form-grid textarea,
.form-grid select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 12px 13px;
}

.form-grid textarea { min-height: 150px; resize: vertical; }
.form-grid select option { background: var(--surface); color: var(--ink); }

.note {
  color: var(--quiet);
  font-size: 12px;
}

.policy-panel {
  padding: 10px 0;
  overflow: hidden;
}

.policy-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
}

.policy-row:first-child { border-top: 0; }

.policy-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.policy-row h2 {
  margin: 0;
  font-size: 20px;
}

.policy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(77,166,255, .28);
  background: linear-gradient(135deg, rgba(77,166,255, .16), rgba(0,120,212, .08));
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.policy-icon svg { width: 21px; height: 21px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card-iconed .chip { margin: 0; }

.card .policy-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.card .policy-icon svg { width: 19px; height: 19px; }

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.roadmap-column {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(8, 14, 21, .72);
}

.roadmap-column ul,
.plain-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.roadmap-column li,
.plain-list li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
}

.status-panel {
  padding: 6px 0;
}

.status-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.status-row:first-child { border-top: 0; }

/* The footer floats on the same canvas - no wash or competing grid of its own. */
.public-footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 58px 0 46px;
  background: transparent;
}

.footer-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: 18px;
}

.footer-logo {
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.05em;
}

.footer-logo span { color: var(--blue); }

.footer-note {
  max-width: 330px;
  color: var(--muted);
  font-size: 13px;
}

.footer-col h3 {
  margin: 0 0 18px;
  color: var(--quiet);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  white-space: nowrap;
}

.footer-col a {
  display: block;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.footer-col a:hover { color: var(--ink); }

/* Home column: every entry leads back to the public site, so the links read as
   one grouped set of buttons instead of three loose text links. */
.footer-col-home {
  display: grid;
  align-content: start;
  gap: 8px;
}

.footer-col-home h3 { margin: 0 0 10px; }

.footer-col-home a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  font-size: 12.5px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.footer-col-home a:after {
  content: "\2192";
  font-size: 12px;
  opacity: .45;
  transition: transform .2s ease, opacity .2s ease;
}

.footer-col-home a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

.footer-col-home a:hover:after {
  opacity: .9;
  transform: translateX(3px);
}

.footer-socials {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.social-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.social-btn:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(77,166,255, .1);
}

/* Footer email button: match the width and height of the Contact button
   below it so the two read as one stacked action group. */
.footer-brand .footer-socials { display: grid; }

.footer-brand .social-btn {
  width: 100%;
  height: auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 820;
}

.footer-legal-bar {
  position: relative;
  border-top: 1px solid var(--line);
  margin-top: 46px;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-legal-bar p {
  font-size: 12px;
  color: var(--quiet);
  margin: 0;
}

.footer-legal-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.footer-legal-links a {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  padding: 5px 10px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.footer-legal-links a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .05);
}

@media (max-width: 980px) {
  .grid,
  .grid.four,
  .footer-layout {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .public-nav { position: static; }
  .public-nav-inner { align-items: flex-start; flex-direction: column; padding: 16px 0; }
  .public-links { margin-left: 0; }
  .hero { padding-top: 54px; }
  .section-head { display: block; }
  .grid,
  .grid.two,
  .grid.four,
  .roadmap,
  .form-grid,
  .policy-row,
  .status-row,
  .footer-layout {
    grid-template-columns: 1fr;
  }

  .policy-row { gap: 10px; }
}