/* ─────────────────────────────────────────────────────────────
   Syntelic v2 — site.css
   Design thesis: rent vs. own, rendered as screen vs. paper.
   Ink (#040b08) is the default surface — the product, the platform,
   the digital treadmill. Paper (#f4f1ea) appears only where the
   site shows proof: case studies are filed documents, not cards.
   Green (#40ba89) is the one accent. No pills, no glass, no cards
   stacked as filler, no decoration without a job.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/a22b1dc24103c00d-s.p.woff2) format('woff2');
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/680d078f20ab2e33-s.woff2) format('woff2');
  unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}

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

:root {
  --ink: #040b08;
  --paper: #f4f1ea;
  --green: #40ba89;
  --green-bright: #64d4a8;
  --green-deep: #17845e;

  --ink-body: rgba(244, 241, 230, 0.72);
  --ink-faint: rgba(244, 241, 230, 0.52); /* >= 4.5:1 on ink for small text */
  --ink-line: rgba(244, 241, 230, 0.14);
  --ink-line-2: rgba(244, 241, 230, 0.26);

  --paper-body: rgba(4, 11, 8, 0.72);
  --paper-faint: rgba(4, 11, 8, 0.58); /* >= 4.5:1 on paper for small text */
  --paper-line: rgba(4, 11, 8, 0.15);
  --paper-line-2: rgba(4, 11, 8, 0.28);

  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;
  --nav-h: 68px;
}

/* Offset anchored sections so they never land under the fixed masthead */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }

body {
  font-family: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--ink);
  color: var(--ink-body);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.paper-doc { background: var(--paper); color: var(--paper-body); }

::selection { background: var(--green); color: var(--ink); }

/* Keyboard focus: a visible, on-brand ring on every surface. The green
   ring reads on ink; paper surfaces and the Praxo page need deeper tones. */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
section.paper :focus-visible, .paper-doc .doc-meta :focus-visible { outline-color: var(--green-deep); }
.praxo-page :focus-visible { outline-color: #0d0d9b; }
.praxo-page .praxo-cta :focus-visible { outline-color: #ffffff; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .container { padding: 0 40px; } }

a { color: inherit; }
img { display: block; max-width: 100%; }

/* ─── Surfaces ─── */
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--paper); }
.on-paper h1, .on-paper h2, .on-paper h3, .on-paper h4 { color: var(--ink); }

section.paper {
  background: var(--paper);
  color: var(--paper-body);
}
section.paper h1, section.paper h2, section.paper h3, section.paper h4 { color: var(--ink); }
section.paper .num { color: var(--green-deep); }
section.paper hr, section.paper .rule { border-color: var(--paper-line); }

/* ─── Type ─── */
h1, h2, h3, h4 { font-family: inherit; color: var(--paper); letter-spacing: -0.02em; }

.display {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.display .accent { color: var(--green); }

h2.head {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  max-width: 780px;
}
.head-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.head-row .num {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.head-dek {
  font-size: 1.08rem;
  max-width: 640px;
  margin-bottom: 48px;
}

.lede {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 600px;
}

p a, .prose a { color: var(--green); text-decoration-color: var(--paper-line-2); text-underline-offset: 3px; }
section.paper p a, section.paper .prose a { color: var(--green-deep); }

/* ─── Nav ─── */
header.masthead {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.brand-lockup { display: flex; align-items: center; text-decoration: none; }
.brand-lockup img { height: 21px; width: auto; }

nav ul { list-style: none; display: flex; gap: 30px; align-items: center; }
nav a {
  color: var(--ink-faint);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s;
}
nav a:hover, nav a[aria-current="page"] { color: var(--paper); }
nav .nav-sep { width: 1px; height: 16px; background: var(--ink-line-2); }
/* Comfortable click target without changing the visual rhythm */
nav ul li > a:not(.nav-cta) { display: inline-block; padding: 8px 0; }
.nav-cta {
  border: 1px solid var(--green);
  color: var(--green) !important;
  padding: 8px 16px;
  transition: background 0.15s, color 0.15s;
  /* Sized to the longest label ("Start a conversation") so the chip —
     and every link left of it — sits identically on all pages. */
  display: inline-block;
  min-width: 200px;
  text-align: center;
}
.nav-cta:hover { background: var(--green); color: var(--ink) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink-line-2);
  color: var(--paper);
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  nav { display: none; }
  nav.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    padding: 8px 24px 28px;
  }
  nav.open ul { flex-direction: column; align-items: flex-start; gap: 0; }
  nav.open li { width: 100%; border-bottom: 1px solid var(--ink-line); }
  /* Padding on the link itself, not the li: full-width 43px tap targets */
  nav.open li > a:not(.nav-cta) { display: block; padding: 14px 0; }
  nav.open .nav-sep { display: none; }
  nav.open .nav-cta { display: inline-block; margin-top: 14px; border-bottom: 1px solid var(--green); }
}

/* ─── Buttons ─── */
.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 28px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-fill {
  background: var(--green);
  color: var(--ink);
  border: 1px solid var(--green);
}
.btn-fill:hover { background: var(--green-bright); border-color: var(--green-bright); }
.btn-outline {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--ink-line-2);
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }
section.paper .btn-outline { color: var(--ink); border-color: var(--paper-line-2); }
section.paper .btn-outline:hover { border-color: var(--green-deep); color: var(--green-deep); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-line-2);
  padding-bottom: 3px;
  transition: border-color 0.15s, color 0.15s;
}
.btn-text:hover { color: var(--green); border-color: var(--green); }
.btn-text .arrow { display: inline-block; transition: transform 0.15s ease; }
.btn-text:hover .arrow { transform: translateX(3px); }
section.paper .btn-text { color: var(--ink); border-color: var(--paper-line-2); }
section.paper .btn-text:hover { color: var(--green-deep); border-color: var(--green-deep); }

/* ─── Hero ─── */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 88px) 0 0;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; padding-bottom: 88px; max-width: 760px; }
.hero .crumb { margin-bottom: 22px; }
.hero .display { margin-bottom: 24px; }
.hero .lede { margin-bottom: 36px; }

/* The one hero visual: the real triangle mark, scaled up, nothing invented.
   Draw-in: the triangle is traced in stroke first, then the fill settles —
   a drafting moment, not a plain fade. */
.hero-mark {
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%);
  width: 46vw;
  max-width: 620px;
  min-width: 260px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-mark.drawn { opacity: 0.9; }
.hero-mark svg { width: 100%; height: auto; display: block; }
.hero-mark path {
  fill: var(--green);
  stroke: var(--green);
  stroke-width: 1px;
  fill-opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.hero-mark.drawn path {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.5, 0, 0.2, 1) 0.15s, fill-opacity 0.7s ease 1s;
  stroke-dashoffset: 0;
  fill-opacity: 1;
}
/* Mid-widths: pull the mark clear of the 760px copy column */
@media (min-width: 980px) and (max-width: 1399px) { .hero-mark { width: 32vw; right: -16%; } }
@media (max-width: 979px) { .hero-mark { display: none; } }

.crumb {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: 8px;
  align-items: center;
}
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--green); }
.crumb .here { color: var(--green); }
section.paper .crumb, section.paper .crumb a { color: var(--paper-faint); }
section.paper .crumb .here { color: var(--green-deep); }

.founders { margin-top: 8px; padding-bottom: 56px; }
.founders .label {
  font-size: 15px;
  color: var(--ink-faint);
  margin-bottom: 16px;
  display: block;
  max-width: 520px;
}
.founders .row { display: flex; gap: 14px; flex-wrap: wrap; }
.founder {
  display: flex;
  align-items: center;
  gap: 10px;
}
.founder img {
  height: 40px;
  width: 40px;
  object-fit: cover;
  border: 1px solid var(--ink-line);
  filter: grayscale(1);
  transition: filter 0.3s ease;
}
.founder:hover img { filter: none; }
.founder span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-body);
}

/* ─── Sections ─── */
section.band { padding: 100px 0; border-top: 1px solid var(--ink-line); }
section.band.tight { padding-top: 0; border-top: none; }
section.paper.band { border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }

/* ─── Register (the one repeating list device — replaces cards) ───
   Rows carry no numeric indices: a page is not a deck. Where a row belongs
   to a named category (Praxo capabilities, sectors, migration phases) the
   category word is the label (.labelled); otherwise the title stands alone. */
.register { border-top: 1px solid var(--ink-line); }
section.paper .register { border-top-color: var(--paper-line); }
.reg-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--ink-line);
}
section.paper .reg-row { border-bottom-color: var(--paper-line); }
@media (min-width: 880px) {
  .reg-row { grid-template-columns: 280px 1fr; }
  .reg-row.labelled { grid-template-columns: 80px 280px 1fr; }
}
.reg-row .num { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--green); padding-top: 4px; white-space: nowrap; }
.reg-row h3 { font-weight: 700; font-size: 1.4rem; line-height: 1.25; }
.reg-row .body { max-width: 640px; font-size: 15.5px; }
.reg-row .body p + p { margin-top: 12px; }
.reg-row .meta-line {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
section.paper .reg-row .meta-line { color: var(--paper-faint); }
.reg-row .meta-line span + span::before { content: ' · '; }

/* Compact two-up register, for longer capability lists */
.register.grid-2 { border-top: none; }
@media (min-width: 780px) {
  .register.grid-2 .reg-row { grid-template-columns: 88px 1fr; }
  .register.grid-2 .reg-row .body { grid-column: 2; }
  .register.grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* ─── Point list (replaces tick-icon check lists) ─── */
.points { list-style: none; }
.points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 10px 0;
  font-size: 15.5px;
  border-bottom: 1px solid var(--ink-line);
}
section.paper .points li { border-bottom-color: var(--paper-line); }
.points li:last-child { border-bottom: none; }
.points li::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--green);
}
.points li strong { color: var(--paper); font-weight: 600; }
section.paper .points li strong { color: var(--ink); }

/* ─── Quote ─── */
.quote-block { max-width: 920px; }
.quote-block::before {
  content: '\201C';
  display: block;
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 0.75;
  letter-spacing: -0.02em;
  color: var(--green);
  margin-bottom: 18px;
}
section.paper .quote-block::before { color: var(--green-deep); }
.quote-block .quote {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 24px;
}
section.paper .quote-block .quote { color: var(--ink); }
.quote-block .quote em { font-style: normal; color: var(--green); }
.quote-block .cite {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
section.paper .quote-block .cite { color: var(--paper-faint); }

.pullquote { margin: 40px 0; }
.pullquote p::before { content: '\201C'; color: var(--green-deep); font-weight: 800; margin-right: 2px; }
.pullquote p::after { content: '\201D'; color: var(--green-deep); font-weight: 800; margin-left: 2px; }
.pullquote p {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.pullquote .who {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ─── Deed / certificate cards (case-study previews on paper) ─── */
.deed-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); }
@media (min-width: 860px) { .deed-grid { grid-template-columns: 1fr 1fr 1fr; } }
.deed {
  background: var(--paper);
  padding: 40px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.deed .file-no {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 18px;
}
.deed h3 { font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin-bottom: 14px; }
.deed p { font-size: 15px; margin-bottom: 22px; }
.deed .facts { margin-top: auto; }
.deed .facts div { font-family: var(--mono); font-size: 12.5px; color: var(--paper-body); padding: 7px 0; border-top: 1px solid var(--paper-line); }
.deed .go { margin-top: 22px; font-family: var(--mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-deep); display: inline-flex; align-items: center; gap: 8px; }
.deed .go .arrow { transition: transform 0.15s ease; }
.deed:hover .go .arrow { transform: translateX(3px); }
/* Hover lifts the document off the stack */
.deed:hover {
  background: #eeeade;
  box-shadow: 0 16px 36px rgba(4, 11, 8, 0.12);
  transform: translateY(-2px);
}

/* ─── Case-study document header (meta register) ─── */
.doc-meta { border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.doc-meta-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .doc-meta-row { grid-template-columns: repeat(4, 1fr); } }
.doc-meta-cell { padding: 22px 24px 22px 0; border-right: 1px solid var(--paper-line); border-top: 1px solid var(--paper-line); }
.doc-meta-cell:nth-child(2n) { border-right: none; padding-left: 24px; }
.doc-meta-cell:nth-child(-n+2) { border-top: none; }
@media (min-width: 860px) {
  .doc-meta-cell { border-top: none; padding-left: 24px; }
  .doc-meta-cell:first-child { padding-left: 0; }
  .doc-meta-cell:nth-child(2n) { border-right: 1px solid var(--paper-line); }
  .doc-meta-cell:last-child { border-right: none; }
}
.doc-meta-cell .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 6px; }
.doc-meta-cell .v { font-size: 15px; font-weight: 700; color: var(--ink); }
.doc-meta-cell .v.green { color: var(--green-deep); }

.doc-body { padding: 80px 0; }
.doc-cols { display: grid; grid-template-columns: 1fr; gap: 56px; }
@media (min-width: 1020px) { .doc-cols { grid-template-columns: 1fr 300px; } }

.split-2 { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 820px) { .split-2 { grid-template-columns: 1fr 1fr; gap: 56px; } }

.prose { max-width: 680px; }
.prose h2 { font-weight: 700; font-size: 1.6rem; margin: 48px 0 16px; line-height: 1.25; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
.prose strong { color: var(--ink); font-weight: 700; }
section:not(.paper) .prose strong { color: var(--paper); }
.prose ul { list-style: none; margin: 0 0 18px; }
.prose ul li {
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.65;
  border-bottom: 1px solid var(--paper-line);
}
.prose ul li:last-child { border-bottom: none; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 8px;
  background: var(--green);
}

.stamp {
  border: 1px solid var(--paper-line-2);
  padding: 28px;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
.stamp img { height: 20px; width: auto; margin-bottom: 24px; }
.stamp .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 20px; }
.stamp dl { display: grid; gap: 16px; }
.stamp dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 3px; }
.stamp dd { font-size: 14px; line-height: 1.55; }
.stamp .divider { border-top: 1px solid var(--paper-line); margin: 20px 0; }
.stamp .note { font-size: 13.5px; line-height: 1.6; color: var(--paper-faint); }
.stamp .note a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.stamp .note a:hover { text-decoration: underline; }

/* ─── Stat register (replaces boxed stat-grid pills) ─── */
.stat-register { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--paper-line); border-left: 1px solid var(--paper-line); }
@media (min-width: 820px) { .stat-register { grid-template-columns: repeat(4, 1fr); } }
.stat-register .cell { padding: 30px 26px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.stat-register .n { font-family: var(--mono); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-register .d { font-size: 13.5px; color: var(--green-deep); margin-top: 8px; line-height: 1.4; }

/* ─── Big CTA (always ink — the bookend) ─── */
.big-cta {
  background: var(--ink);
  color: var(--ink-body);
  padding: 120px 0;
  text-align: center;
}
.big-cta .glyph { width: 40px; height: 40px; margin: 0 auto 30px; display: block; }
.big-cta h2 {
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 780px;
  margin: 0 auto 18px;
}
.big-cta p { font-size: 1.1rem; max-width: 560px; margin: 0 auto 38px; }
.big-cta .cta-row { justify-content: center; }

/* ─── Footer (always ink) ─── */
footer.site-footer { background: var(--ink); color: var(--ink-body); border-top: 1px solid var(--ink-line); padding: 68px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 52px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-grid .blurb img { height: 20px; width: auto; }
.footer-grid .blurb p { font-size: 14px; color: var(--ink-faint); line-height: 1.6; margin-top: 18px; max-width: 300px; }
.footer-col h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 6px; }
.footer-col a { color: var(--ink-body); text-decoration: none; font-size: 14.5px; display: inline-block; padding: 6px 0; }
.footer-col a:hover { color: var(--green); }
.footer-row {
  border-top: 1px solid var(--ink-line);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
}

/* ─── Praxo product branding (praxo.html content sections only) ───
   Maps Praxo's own tokens onto the accent slots: periwinkle on ink
   (their dark-mode primary), deep indigo on paper (light primary).
   Nav, footer and the closing CTA stay Syntelic green. */
.praxo-accent {
  --green: #5777ff;
  --green-bright: #7b93ff;
  --green-deep: #0d0d9b;
}
/* Selection matches Praxo's palette, not Syntelic green, on this page */
.praxo-page ::selection { background: #5777ff; color: #ffffff; }
.hero-mark img { width: 100%; height: auto; display: block; }
.product-lockup { height: 40px; width: auto; margin-bottom: 28px; }

/* Praxo hero headline: "AI era" in brand indigo */
.praxo-accent .display .accent { color: #0d0d9b; }

/* Praxo on paper: indigo primary buttons, periwinkle accents */
section.paper.praxo-accent .btn-fill {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--paper);
}
section.paper.praxo-accent .btn-fill:hover { background: #2a2ec4; border-color: #2a2ec4; }

/* Praxo page chrome: same nav/footer structure, re-surfaced light.
   Praxo's world is cool white, not Syntelic's warm paper — remap the
   surface token for this page only. */
body.praxo-page { --paper: #ffffff; background: var(--paper); }
.praxo-page header.masthead { background: var(--paper); border-bottom-color: var(--paper-line); }
.praxo-page nav a { color: var(--paper-faint); }
.praxo-page nav a:hover, .praxo-page nav a[aria-current="page"] { color: var(--ink); }
.praxo-page nav .nav-sep { background: var(--paper-line-2); }
.praxo-page .nav-cta { border-color: #0d0d9b; color: #0d0d9b !important; }
.praxo-page .nav-cta:hover { background: #0d0d9b; color: var(--paper) !important; }
.praxo-page .nav-toggle { border-color: var(--paper-line-2); color: var(--ink); }
.praxo-page nav.open { background: var(--paper); border-bottom-color: var(--paper-line); }
.praxo-page nav.open li { border-bottom-color: var(--paper-line); }
.praxo-page footer.site-footer { background: var(--paper); color: var(--paper-body); border-top-color: var(--paper-line); }
.praxo-page .footer-grid .blurb p { color: var(--paper-faint); }
.praxo-page .footer-col h5 { color: var(--paper-faint); }
.praxo-page .footer-col a { color: var(--paper-body); }
.praxo-page .footer-col a:hover { color: #0d0d9b; }
.praxo-page .footer-row { border-top-color: var(--paper-line); color: var(--paper-faint); }

/* Alternating band surface: cool periwinkle tint, like Praxo's app panels */
.praxo-page section.tint { background: #f2f4fc; }

/* ─── Blurred parallax orbs (praxo page) ───
   Soft depth layer behind content: blurred brand-colour circles that
   drift slower than the page (JS sets translate3d from scroll; static
   colour washes without JS or with reduced motion). */
.orb-host { position: relative; z-index: 0; overflow: hidden; }
.orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  will-change: transform;
}
.orb-peri { background: rgba(87, 119, 255, 0.18); }
.orb-cyan { background: rgba(56, 207, 242, 0.16); }
.orb-pink { background: rgba(248, 182, 249, 0.28); }
.orb-indigo { background: rgba(13, 13, 155, 0.12); }

/* Praxo brand-dot markers — the page's list motif */
.dot-mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: -1px;
}
.dot-peri { background: #5777ff; }
.dot-cyan { background: #38cff2; }
.dot-pink { background: #f8b6f9; }
.dot-indigo { background: #0d0d9b; }

/* Round, palette-cycled bullets replace the square ticks in praxo scope */
.praxo-accent .points li::before { border-radius: 50%; width: 10px; height: 10px; }
.praxo-accent .points li:nth-child(4n+1)::before { background: #5777ff; }
.praxo-accent .points li:nth-child(4n+2)::before { background: #38cff2; }
.praxo-accent .points li:nth-child(4n+3)::before { background: #f8b6f9; }
.praxo-accent .points li:nth-child(4n+4)::before { background: #0d0d9b; }

/* Side-by-side demo pair: same task, clicked vs told */
.window-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 56px;
  align-items: start;
}
@media (max-width: 860px) { .window-pair { grid-template-columns: 1fr; gap: 40px; } }
.window-pair figure { margin: 0; }
.window-label {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* Phone frame for iOS / phone-width captures */
.device {
  margin: 0;
  width: min(320px, 82vw);
  border-radius: 46px;
  border: 10px solid #10101c;
  background: #10101c;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(13, 13, 155, 0.16);
}
.device img, .device video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 36px;
}
.device-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 32px;
  margin-top: 56px;
}
@media (max-width: 700px) { .device-grid { grid-template-columns: 1fr; } }
.device-cell { display: flex; flex-direction: column; align-items: center; }
.device-cell .shot-caption { max-width: 340px; text-align: center; }

/* Terminal window: the MCP/CLI door — real text, not a capture */
.terminal-body {
  margin: 0;
  background: #0e1020;
  padding: 24px 28px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
  color: rgba(244, 241, 234, 0.88);
  overflow-x: auto;
}
.terminal-body .tp { color: #7b93ff; }
.terminal-body .tc { color: #7d84a3; }
.terminal-body .to { color: #38cff2; }

/* Stacked paper bands: one hairline between, not two */
section.paper.band + section.paper.band { border-top: none; }

/* Praxo closing band: indigo, not ink */
.big-cta.praxo-cta { background: var(--green-deep); color: rgba(255, 255, 255, 0.82); }
.big-cta.praxo-cta h2 { color: var(--paper); }
.big-cta.praxo-cta .glyph-dots { width: 76px; height: 20px; }
.big-cta.praxo-cta .btn-fill { background: var(--paper); border-color: var(--paper); color: var(--green-deep); }
.big-cta.praxo-cta .btn-fill:hover { background: #ffffff; border-color: #ffffff; }
.big-cta.praxo-cta .btn-outline { color: var(--paper); border-color: rgba(244, 241, 230, 0.4); }
.big-cta.praxo-cta .btn-outline:hover { border-color: var(--paper); color: var(--paper); }

/* ─── Product shots ─── */
.shot { border: 1px solid var(--ink-line-2); margin: 0; }
section.paper .shot { border-color: var(--paper-line-2); }
.shot img { width: 100%; height: auto; display: block; }

/* macOS-style window chrome for desktop-app captures */
.window {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ink-line-2);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}
section.paper .window { border-color: var(--paper-line-2); box-shadow: 0 20px 50px rgba(4, 11, 8, 0.14); }
.window-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  background: #ececec;
  border-bottom: 1px solid #d9d9d9;
}
.window-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.window-bar .dot.r { background: #ff5f57; }
.window-bar .dot.y { background: #febc2e; }
.window-bar .dot.g { background: #28c840; }
.window-bar .url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: #6b6b6b;
  letter-spacing: 0.02em;
}
.window img, .window video { width: 100%; height: auto; display: block; }
.shot-caption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
section.paper .shot-caption { color: var(--paper-faint); }
.shot-narrow { max-width: 860px; }

.phone-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 24px;
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 560px) { .phone-shots { gap: 14px; } }

/* ─── Founders ─── */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  margin-bottom: 64px;
}
@media (min-width: 880px) { .founder-grid { grid-template-columns: repeat(4, 1fr); } }
.founder-card { background: var(--ink); padding: 22px; }
.founder-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 18px;
  border: 1px solid var(--ink-line);
  filter: grayscale(1);
  transition: filter 0.3s ease;
}
.founder-card:hover img { filter: none; }
/* Touch devices have no hover — show the photos in colour there */
@media (hover: none) { .founder img, .founder-card img { filter: none; } }
.founder-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.founder-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); }

/* ─── Letter — the one paper object on the ink surface ─── */
.letter-sheet {
  background: var(--paper);
  color: var(--paper-body);
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 52px;
  /* A physical sheet on a dark desk */
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 4px 18px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) { .letter-sheet { padding: 36px 26px; } }
.letter-sheet .salutation {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 26px;
}
.letter-sheet p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 18px; }
.letter-sheet .signoff { margin-top: 30px; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.letter-sheet .signoff-role { font-family: var(--mono); font-size: 12px; color: var(--paper-faint); margin-top: 6px; }

/* ─── Motion ─── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}