@font-face { font-family: "PP Neue Montreal"; font-weight: 400; font-style: normal; font-display: swap; src: url("/site/home/vendor/pp-neue-montreal-400.woff2") format("woff2"); }
@font-face { font-family: "PP Neue Montreal"; font-weight: 500; font-style: normal; font-display: swap; src: url("/site/home/vendor/pp-neue-montreal-500.woff2") format("woff2"); }
@font-face { font-family: "PP Editorial Old Variable Regular"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/site/home/vendor/ebb026805a-ftqdM948I1ShqZpIq6eii7D4U3M.woff2") format("woff2"); }
:root{
--bg:#050505;--surface:#0a0a0a;--elev1:#161616;--elev2:#1b1b1b;
--line:#2a2a2a;--line-soft:#1a1c1d;
--ink:#fff;--ink2:#c2c2c2;--muted:#b3b3b3;--dim:#7a7a80;
--serif:"PP Editorial Old Variable Regular",Georgia,serif;
--sans:"PP Neue Montreal",sans-serif;
--ease:cubic-bezier(0.23,1,0.32,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;transition:color 120ms ease}
a:hover{color:var(--muted)}
img{max-width:100%}
.shell{width:min(100%,1120px);margin:0 auto;padding:0 40px}
/* ---------- nav ---------- */
/* Top bar: mirrors the marketing homepage nav (64px, 36px gutters, wordmark 28px, LOG IN + BOOK A CALL). */
.nav{position:relative;z-index:50;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.nav-inner{display:flex;align-items:center;gap:9px;height:64px;padding:0 36px}
.nav-brand{display:flex;align-items:center;margin-right:auto}
.nav-brand img{height:28px;width:auto;display:block}
.nav-login{display:inline-flex;align-items:center;height:40px;padding:0 20px;background:#1c1c1c;border:0.5px solid #5e5e5e;color:#b3b3b3;font-family:"Geist Mono",monospace;font-size:14px;font-weight:600;white-space:nowrap;transition:background 120ms ease}
.nav-login:hover{background:#262626;color:#fff}
.nav-cta{display:inline-flex;align-items:center;height:40px;padding:0 20px;background:#fff;border:0.5px solid #5e5e5e;color:#0a0a0a;font-family:"Geist Mono",monospace;font-size:14px;font-weight:600;white-space:nowrap;transition:background 120ms ease}
.nav-cta:hover{background:#dbdbdb;color:#050505}
.nav-burger{display:none;width:48px;height:48px;margin-right:-14px;background:none;border:0;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.nav-burger i{display:block;width:24px;height:1.5px;background:var(--ink)}
.nav-mobile{display:none;border-top:1px solid var(--line-soft);padding:24px 10px 28px;flex-direction:column;align-items:center;gap:12px}
.nav-mobile.open{display:flex}
/* ---------- reveal ---------- */
@keyframes rvIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rv{animation:rvIn .9s var(--ease) var(--d,0s) both}
.rule{height:1px;background:var(--line);transform-origin:left center;animation:ruleIn 1.1s var(--ease) var(--d,0s) both}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.rv,.rule{animation:none}}
/* ---------- hero ---------- */
.hero{padding:80px 0}
.eyebrow{margin:0 0 22px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.7vw,96px);line-height:1.2;letter-spacing:-.031em;max-width:14ch;text-wrap:pretty}
.hero-support{margin:26px 0 0;max-width:560px;color:var(--ink2);font-size:18px;line-height:1.55}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:36px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;background:#fff;color:#000;font-family:var(--sans);font-size:14px;font-weight:500;border:0;cursor:pointer;transition:background 120ms ease}
.tlink{font-size:14px;color:var(--ink)}
.tlink span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--dim)}
.tlink:hover span{text-decoration-color:var(--ink)}
.btn:hover{background:var(--ink2);color:#000}
.btn:focus-visible,.tlink:focus-visible,.nav a:focus-visible,.nav button:focus-visible,.faq-q:focus-visible{outline:1.5px solid var(--ink2);outline-offset:2px}
/* ---------- proof strip ---------- */
/* ---------- sections ---------- */
.sec{padding:80px 0 0}
.sec-head{margin:0 0 40px;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.4;letter-spacing:-.028em}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.pillar{background:var(--surface);padding:24px 20px 28px;display:flex;flex-direction:column;gap:10px;transition:background 160ms ease}
.pillar:hover{background:var(--elev1)}
.pillar h3{margin:0;font-size:15px;font-weight:500;line-height:1.3}
.pillar p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.pillar p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pillar p a:hover{color:var(--muted)}
/* why */
.why-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(280px,1fr);column-gap:56px;row-gap:0;align-items:start}
.why-grid .sec-head{grid-column:1;grid-row:1}
.why{grid-column:1;grid-row:2;max-width:640px}
/* The visual starts level with the heading and runs alongside the copy. */
.why-visual{grid-column:2;grid-row:1/span 2;justify-self:end;width:100%;max-width:440px}
/* Device-native vs API comparison (why-visual.js). Laid out at 1080px and scaled to the
   column with --dn-s so the type stays proportional; it has no box of its own. */
.dn{position:relative;width:100%;aspect-ratio:1/1;overflow:visible}
.dn-stage{position:absolute;left:0;top:0;width:1080px;height:1080px;padding:0 24px;transform-origin:0 0;transform:scale(var(--dn-s,.4));color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.dn-cols{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100%}
.dn-divider{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform-origin:top;transform:scaleY(0)}
.dn-col{position:relative;padding:0 40px;display:flex;flex-direction:column;align-items:center}
.dn-left{padding-left:0}.dn-right{padding-right:0}
.dn-lbl{align-self:flex-start;font-size:28px;font-weight:500;color:var(--muted);height:34px;opacity:0}
.dn-left .dn-lbl{color:var(--dim)}
.dn-phone{position:relative;width:240px;height:460px;margin-top:32px}
.dn-phone>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dn-frame{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:1400;stroke-dashoffset:1400}
.dn-left .dn-frame{stroke:var(--dim);stroke-dasharray:10 10;stroke-dashoffset:0;opacity:0}
.dn-screen{position:absolute;left:14px;top:14px;right:14px;bottom:14px;overflow:hidden}
.dn-app{position:absolute;left:50%;top:24px;width:40px;height:40px;transform:translateX(-50%);color:var(--ink);opacity:0}
.dn-left .dn-app{color:var(--dim)}
.dn-app svg{width:100%;height:100%;display:block;fill:currentColor}
.dn-app .dn-cloud{fill:none;stroke:currentColor;stroke-width:2}
.dn-feed{position:absolute;left:18px;right:18px;top:88px;bottom:18px}
.dn-post{position:absolute;left:0;right:0;height:96px;border:1px solid var(--line);background:var(--elev1);opacity:0;transform:translateY(-140px)}
.dn-post i{position:absolute;left:12px;top:14px;width:36px;height:1px;background:var(--dim)}
.dn-post b{position:absolute;left:12px;bottom:10px;font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.dn-left .dn-post{border-style:dashed;background:transparent}
.dn-left .dn-post b{color:var(--dim)}
.dn-dot{position:absolute;right:12px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.dn-metric{width:100%;margin-top:36px}
.dn-k{font-size:26px;color:var(--dim)}
.dn-v{font-family:var(--serif);font-weight:400;font-size:120px;line-height:1;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.dn-left .dn-v{color:var(--muted)}
.dn-bar{position:relative;height:2px;background:var(--line);margin-top:22px;overflow:hidden}
.dn-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.dn-left .dn-bar i{background:var(--dim)}
.dn-rows{width:100%;margin-top:26px;display:flex;flex-direction:column;gap:12px}
.dn-row{display:flex;align-items:center;gap:14px;font-size:28px;white-space:nowrap;line-height:1.3;color:var(--ink2);opacity:0;transform:translateY(8px)}
.dn-left .dn-row{color:var(--dim)}
.dn-row .m{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.dn-row .m svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dn-right .dn-row .m{color:var(--ink)}
/* Same two columns as .dn-cols so each caption sits under its own column's content. */
.dn-foot{position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);font-size:24px;color:var(--dim);opacity:0}
.dn-foot span:last-child{padding-left:40px}
.why p{margin:0 0 22px;font-size:18px;line-height:1.6;color:var(--ink2)}
.why p:last-child{margin-bottom:0}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.step{border-top:1px solid var(--line);padding-top:18px}
.step-num{font-family:var(--serif);font-size:15px;color:var(--ink);display:block;margin-bottom:14px}
.step h3{margin:0 0 8px;font-size:15px;font-weight:500}
.step p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
/* comparison */
.compare{border:1px solid var(--line-soft)}
.compare-row{display:grid;grid-template-columns:minmax(140px,.9fr) repeat(3,minmax(0,1fr))}
.compare-row + .compare-row{border-top:1px solid var(--line-soft)}
.compare-cell{padding:16px 18px;font-size:13px;line-height:1.45;color:var(--muted)}
.compare-cell + .compare-cell{border-left:1px solid var(--line-soft)}
.compare-head .compare-cell{font-size:13px;font-weight:500;color:var(--ink2);background:var(--surface)}
.compare-cell.us{color:var(--ink);background:var(--elev1)}
.compare-head .compare-cell.us{color:#000;background:#fff}
.compare-label{color:var(--dim)}
/* pricing teaser */
.teaser{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-top:1px solid var(--line-soft);padding-top:22px;flex-wrap:wrap}
.teaser p{margin:0;font-size:14px;color:var(--muted);max-width:560px}
/* faq */
.faq{max-width:760px}
.faq-item{border-top:1px solid var(--line-soft)}
.faq-item:last-child{border-bottom:1px solid var(--line-soft)}
.faq-q{display:flex;align-items:baseline;justify-content:space-between;gap:24px;width:100%;padding:20px 0;background:none;border:0;color:var(--ink);font-family:var(--sans);font-size:16px;text-align:left;cursor:pointer}
.faq-q .faq-x{flex:none;font-family:var(--serif);font-size:18px;color:var(--dim);transition:transform .3s var(--ease)}
.faq-item.open .faq-x{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-item.open .faq-a{max-height:260px}
.faq-a p{margin:0;padding:0 40px 22px 0;font-size:14px;line-height:1.6;color:var(--muted)}
/* cross links */
.cross{padding:60px 0 0;font-size:14px;color:var(--muted)}
.cross a{color:var(--ink)}.cross a:hover{color:var(--muted)}
/* cta */
.cta{margin-top:80px;border-top:1px solid var(--line-soft);background:var(--surface)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:80px;flex-wrap:wrap}
.cta h2{margin:0;font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.2;letter-spacing:-.042em;max-width:15ch}
.cta p{margin:16px 0 0;font-size:14px;color:var(--muted);max-width:420px}
/* footer */
/* Footer: same as the marketing homepage (graphic, wordmark, tagline, service lines, links, Discord). */
.foot{position:relative;overflow:hidden;padding:80px;min-height:500px;background:#050505;color:#fff}
.foot-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The homepage's two tints over the graphic: a green-black wash and a fade into the page at the bottom. */
.foot::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgb(10,10,10) 0%,rgba(5,20,17,.6) 40.4%,rgb(5,21,17) 100%)}
.foot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:116px;z-index:1;background:linear-gradient(rgba(8,8,8,0) 0%,rgb(8,8,8) 100%)}
.foot-inner{position:relative;z-index:2}
.foot-brand{display:inline-block}
.foot-brand img{display:block;height:31px;width:auto}
.foot-tag{margin:48px 0 0;font-family:var(--serif);font-weight:400;font-size:64px;line-height:1;letter-spacing:-.05em;color:#fff}
.foot-lines{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.foot-lines li{display:flex;align-items:center;gap:10px;font-family:"Chivo Mono",monospace;font-size:16px;line-height:1.2;color:#c4c4c4}
.foot-ico{display:inline-flex;flex:none;width:22px;height:16px}
.foot-ico svg{display:block;width:22px;height:16px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px}
.foot-links{display:flex;flex-direction:column;gap:5px}
.foot-links a{font-size:11px;line-height:1.2;color:#b3b3b3}
.foot-links a:hover{color:#fff}
.foot-links p{margin:0;font-size:11px;line-height:1.2;color:rgba(238,238,238,.5)}
.foot-discord{display:inline-flex;color:#fff}
.foot-discord svg{display:block}
/* ---------- responsive ---------- */
@media (max-width:1023px){
.why-grid{gap:40px}
.why-visual{max-width:360px}
.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillars .pillar:nth-child(4){grid-column:1/3}
.pillars .pillar:nth-child(5){grid-column:3/-1}
.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
@media (max-width:809px){
.shell{padding:0 20px}
.foot{padding:40px 20px;min-height:0}
.foot-tag{font-size:44px}
.hero-support,.why p{font-size:16px}
.cta h2{font-size:42px}
.why-grid{grid-template-columns:1fr;row-gap:32px}
.why-grid .sec-head{grid-row:auto;margin-bottom:0}
.why{grid-row:auto}
.why-visual{grid-column:auto;grid-row:auto;justify-self:start;max-width:420px}
.pillars .pillar:nth-child(4),.pillars .pillar:nth-child(5){grid-column:auto}
.nav-inner{height:48px;padding:0 10px}
.nav-brand img{height:21px}
.nav .nav-desktop{display:none}
.nav-burger{display:flex}
.hero{padding:40px 0}
.hero-actions{flex-direction:column;align-items:stretch}
.hero-actions .btn{width:100%}
.sec{padding:40px 0 0}
.pillars{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.compare-row{grid-template-columns:1fr}
.compare-cell + .compare-cell{border-left:0;border-top:1px solid var(--line-soft)}
.compare-head{display:none}
.compare-cell[data-col]::before{content:attr(data-col);display:block;margin-bottom:4px;font-size:11px;color:var(--dim)}
.compare-cell.us[data-col]::before{color:var(--ink2)}
.cta-inner{padding-block:40px;flex-direction:column;align-items:flex-start}
.cta .btn{width:100%}
}

/* ---------- hero visual: the network wall ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:72px;align-items:center}
.hero-visual{position:relative;height:540px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent)}
.hero-visual.horiz{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.wall{display:grid;gap:14px;height:100%;grid-auto-flow:column}
.wall-col{display:flex;flex-direction:column;gap:14px;min-height:0;animation:wallUp var(--spd,30s) linear infinite}
.wall-col.rev{animation-direction:reverse}
.hero-visual.horiz .wall{grid-auto-flow:row;grid-auto-rows:1fr}
.hero-visual.horiz .wall-col{flex-direction:row;animation-name:wallLeft;min-width:0}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wallLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tile{flex:none;position:relative;border:1px solid #222;background:#111;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.045) 50%,transparent 62%);background-size:240% 100%;animation:tileSheen 7s ease-in-out infinite;animation-delay:var(--sd,0s)}
@keyframes tileSheen{0%{background-position:200% 0}55%,100%{background-position:-140% 0}}
.tile i{position:absolute;left:12px;top:12px;width:22px;height:1px;background:#2e2e2e}
.tile b{position:absolute;left:12px;bottom:10px;font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.tile s{position:absolute;left:12px;bottom:34px;font-size:9px;letter-spacing:.06em;color:var(--dim);text-decoration:none}
.tile.live::before{content:"";position:absolute;right:12px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--ink);animation:livePulse 2.4s ease-in-out infinite;animation-delay:var(--sd,0s)}
@keyframes livePulse{0%,100%{opacity:.25}50%{opacity:1}}
/* The clip box is padded past the glyph box so the serif's ascenders, descenders, and side overhangs are never cut; negative margins keep the layout unchanged. */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding:.2em .1em .3em;margin:-.2em -.1em -.3em}
@keyframes hwIn{from{transform:translateY(112%)}to{transform:translateY(0)}}
.hw>span{display:inline-block;animation:hwIn 1.05s var(--ease) var(--d,0s) both}
@media (max-width:1023px){.hero-grid{gap:44px}.hero-visual{height:440px}}
@media (max-width:809px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero-visual{height:300px}.tile b{font-size:17px}.tile s{bottom:28px}}
@media (prefers-reduced-motion: reduce){.wall-col,.tile::after,.tile.live::before,.hw>span{animation:none}}

/* ---------- platform icons ---------- */
.picon{display:inline-flex;flex:none;color:inherit}
.picon svg{display:block}
.hero-eyerow{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.hero-eyerow .eyebrow{margin:0}
.hero-chip{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.cross a{display:inline;white-space:nowrap}
.cross a .picon{display:inline-block;vertical-align:-2px;margin-right:6px}
.cross a .picon{color:var(--muted);transition:color 120ms ease}
.cross a:hover .picon{color:var(--ink)}
.tile .pmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#1f1f1f}

/* ---------- feature icons ---------- */
.fico{display:inline-flex;flex:none}
.fico svg{display:block}
.pillar .fico{color:var(--dim);margin-bottom:8px;transition:color 160ms ease}
.pillar:hover .fico{color:var(--ink)}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.step-top .step-num{margin-bottom:0}
.step-top .fico{color:var(--dim)}
.compare-cell[data-col]{display:flex;align-items:flex-start;gap:9px}
.compare-cell .cico{display:inline-flex;flex:none;margin-top:2px}
.compare-cell.us .cico{color:var(--ink)}
.compare-cell:not(.us) .cico{color:var(--dim)}
@media (max-width:809px){
.compare-cell[data-col]{flex-wrap:wrap}
.compare-cell[data-col]::before{width:100%}
}
.tile.has-post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile.has-post .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 62%)}
.tile.has-post i{display:none}
.tile.has-post .pmark{left:auto;top:auto;right:10px;bottom:10px;transform:none;color:rgba(255,255,255,.85)}
.tile.has-post .pmark svg{width:16px;height:16px;display:block}
.tile.has-post s{color:rgba(255,255,255,.7)}
.tile.has-post b{color:#fff}