/* ===== Payr × Zuba — shared design system (lifted from the Payr engine) ===== */
:root{
  --ink:#0a0a0a;--body:#28344A;--muted:#52617C;--faint:#8B97AC;--line:#E7EDF6;
  --lime:#C6F24E;--lime-d:#9bc62e;--lime-dd:#7a9a1e;--lime-bg:#f6fce0;
  --paper:#f5f8fc;--card:#fff;--green-z:#ECF4EE;--green-b:#1B4332;
  --blue-z:#eef4fc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--body);font:15px/1.6 'Hanken Grotesk',sans-serif;
  background:radial-gradient(1200px 600px at 82% -12%,#ededed 0,transparent 55%),var(--paper);min-height:100vh}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.ey{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
a{color:inherit}

/* header / nav */
header.top{padding:15px 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(9px);position:sticky;top:0;z-index:50}
header.top .brand{font:800 21px 'Space Grotesk',sans-serif;letter-spacing:-.04em;color:var(--ink)}
header.top .brand span{color:var(--lime-d)}
header.top .tag{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:5px 11px;background:#fff}
header.top nav{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
header.top nav a{font:600 12px 'Hanken Grotesk';text-decoration:none;color:var(--muted);padding:7px 12px;border-radius:9px;transition:.15s}
header.top nav a:hover{background:var(--lime-bg);color:var(--ink)}
header.top nav a.on{background:var(--ink);color:#fff}

/* hero */
.hero{text-align:center;padding:64px 0 30px}
.hero h1{font:300 52px/1.08 'Hanken Grotesk';color:var(--ink);margin:18px auto 16px;letter-spacing:-.025em;max-width:920px}
.hero h1 em{font-style:normal;font-weight:500;color:var(--lime-d)}
.hero .lead{color:var(--muted);font-size:18px;max-width:680px;margin:0 auto;line-height:1.6}
.hero.sm{padding:48px 0 14px}
.hero.sm h1{font-size:40px;max-width:840px}

/* section title */
.secttl{display:flex;align-items:baseline;gap:14px;margin:64px 0 10px;border-top:1px solid var(--line);padding-top:30px}
.secttl h2{font:600 13px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0}
.secttl .sub{color:var(--faint);font-size:13px}
.lead-p{font-size:16.5px;color:var(--body);max-width:760px;line-height:1.7;margin:16px 0 0}
.lead-p b{color:var(--ink)}

/* cards */
.grid{display:grid;gap:16px;margin:26px 0 0}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px;
  box-shadow:0 1px 2px rgba(10,26,55,.03),0 18px 44px -36px rgba(10,26,55,.28);transition:.2s cubic-bezier(.22,.61,.36,1)}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(10,26,55,.04),0 26px 56px -36px rgba(10,26,55,.4)}
.card .k{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.card h3{font:600 18px Newsreader,serif;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
.card p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.card.own{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 18px 44px -34px rgba(155,198,46,.5)}
.card.own .k{color:var(--lime-dd)}
.card.zuba{border-color:#0c7c6b40;box-shadow:0 0 0 1px #0c7c6b22,0 18px 44px -36px rgba(12,124,107,.3)}
.card.zuba .k{color:#0c7c6b}

/* stat band */
.band{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:18px;margin:30px 0 0;overflow:hidden;
  box-shadow:0 18px 50px -38px rgba(10,26,55,.4)}
.band .b{flex:1;min-width:170px;padding:22px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.band .b:last-child{border-right:0}
.band .b .k{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.band .b .v{font:600 31px Newsreader,serif;color:var(--ink);line-height:1.05}
.band .b .v small{font-size:14px;color:var(--muted);font-family:'Hanken Grotesk'}
.band .b.hl{background:var(--lime-bg)}.band .b.hl .v{color:#3a4a12}

/* pill row */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.pill{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 12px}
.pill.lime{background:var(--lime-bg);border-color:#e4f0bf;color:#3a4a12}

/* journey rail (reused from engine) */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 16px;margin:28px 0 0}
.node{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px 16px;
  box-shadow:0 1px 2px rgba(10,26,55,.03),0 18px 44px -36px rgba(10,26,55,.28)}
.node.own{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 18px 44px -34px rgba(155,198,46,.5)}
.node.zuba{border-color:#0c7c6b55;box-shadow:0 0 0 1px #0c7c6b22,0 18px 44px -36px rgba(12,124,107,.3)}
.node .num{position:absolute;top:-11px;left:18px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;
  font:700 12px 'JetBrains Mono',monospace;display:flex;align-items:center;justify-content:center}
.node.own .num{background:var(--lime);color:#1c2a06}.node.zuba .num{background:#0c7c6b;color:#fff}
.node .role{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 7px;color:var(--faint)}
.node .role.r-own{color:var(--lime-dd)}.node .role.r-zuba{color:#0c7c6b}.node .role.r-client{color:#FF5A5F}
.node h3{font:600 16px Newsreader,serif;color:var(--ink);margin:0 0 6px}
.node p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 0 11px}
.node .money{font:600 11px 'JetBrains Mono',monospace;color:var(--ink);background:#f3f6fb;border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.node.own .money{background:var(--lime-bg);border-color:#e4f0bf}
.node.zuba .money{background:#e9f6f3;border-color:#bfe6dd}

/* table */
table.t{width:100%;border-collapse:collapse;font-size:13.5px;margin:24px 0 0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
table.t th{background:#f7faff;text-align:left;padding:13px 16px;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
table.t td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top;line-height:1.55}
table.t tr:last-child td{border-bottom:0}
table.t td b{color:var(--ink)}
table.t .own td:first-child{box-shadow:inset 3px 0 0 var(--lime)}
table.t .zuba td:first-child{box-shadow:inset 3px 0 0 #0c7c6b}

/* callout */
.callout{background:linear-gradient(180deg,#0e1a33,#0a1426);border-radius:16px;padding:26px 28px;color:#cdd9ee;margin:30px 0 0}
.callout h4{color:#fff;font:600 12px 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;margin:0 0 12px}
.callout .big{font:500 30px Newsreader,serif;color:var(--lime);line-height:1.18;margin:0 0 12px;letter-spacing:-.01em}
.callout p{font-size:14px;color:#9db2d2;line-height:1.65;margin:0}
.callout.lime{background:var(--lime-bg);color:#3a4a12}.callout.lime h4{color:#2a3a0a}.callout.lime .big{color:#2a3a0a}.callout.lime p{color:#4a5a28}

/* spanning rail */
.spanrail{display:flex;align-items:center;gap:14px;margin:24px 0 0;padding:14px 22px;background:var(--lime-bg);border:1px solid #e4f0bf;border-radius:12px}
.spanrail .ln{height:2px;flex:1;background:repeating-linear-gradient(90deg,var(--lime-d) 0,var(--lime-d) 7px,transparent 7px,transparent 13px);opacity:.7}
.spanrail .cap{font-size:12.5px;color:#3a4a12;text-align:center;flex:none;max-width:780px;line-height:1.55}
.spanrail .cap b{color:#2a3a0a}

.foot{text-align:center;color:var(--faint);font-size:12px;padding:54px 0 56px;line-height:1.8;border-top:1px solid var(--line);margin-top:60px}
.foot b{color:var(--muted)}
.conf{display:inline-block;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#b4651e;background:#fdf3e7;border:1px solid #f3d9bd;border-radius:6px;padding:4px 9px;margin-bottom:10px}

@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.rail{grid-template-columns:1fr}.hero h1{font-size:38px}}
@media(max-width:640px){.g2,.g4{grid-template-columns:1fr}.hero h1{font-size:31px}.wrap{padding:0 20px}}