@font-face{font-family:Plex;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:PlexMono;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--bg:#111113;--fg:#ecebe8;--muted:#8f8d88;--line:rgb(255 255 255 / 6%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;position:relative;background:var(--bg);color:var(--fg);font-family:Plex,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
.mono{font-family:PlexMono,ui-monospace,monospace}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}
.wash{position:absolute;inset:0 0 auto;height:620px;overflow:hidden;z-index:-1;-webkit-mask-image:linear-gradient(#000 25%,transparent);mask-image:linear-gradient(#000 25%,transparent)}
.wash div{position:absolute;inset:-64px;background:url(/img/wash.webp) center 30%/cover;opacity:.3}
nav{position:sticky;top:0;z-index:10;height:60px;border-bottom:1px solid var(--line);background:rgb(17 17 19 / 60%);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.navin{display:flex;align-items:center;gap:24px;height:100%}
nav a{font-size:13px;color:var(--muted)}
nav a:hover{color:var(--fg)}
nav .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--fg)}
nav .signin{color:var(--fg)}
.grow{flex:1}
.btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:6px;font-size:14px;font-weight:500}
.btn.pri{background:var(--fg);color:var(--bg)}
.btn.out{border:1px solid rgb(255 255 255 / 14%)}
.btn.out:hover{background:rgb(255 255 255 / 5%)}
.btn.sm{height:30px;font-size:13px}
.hero{padding:88px 0 56px}
h1{font-size:44px;line-height:1.08;font-weight:600;letter-spacing:-.02em;margin:0;max-width:560px}
.nowrap{white-space:nowrap}
.lead{font-size:15px;line-height:1.6;color:rgb(236 235 232 / 75%);max-width:500px;margin:16px 0 28px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.meta{font-size:11px;color:var(--muted);margin-top:14px}
.frame{margin:0;border:1px solid rgb(255 255 255 / 8%);border-radius:10px;overflow:hidden;background:var(--bg);box-shadow:0 24px 60px rgb(0 0 0 / 50%)}
.frame img{display:block;width:100%;height:auto}
section.f{display:grid;grid-template-columns:300px 1fr;gap:56px;padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:60px}
section.f h2{font-size:20px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
section.f p{font-size:14px;line-height:1.6;color:rgb(236 235 232 / 70%);margin:0}
table{width:100%;border-collapse:collapse;font-size:14px}
td{padding:14px 0;border-top:1px solid var(--line);vertical-align:middle}
tr:first-child td{border-top:0;padding-top:0}
td.plat{width:90px}
td.m{color:var(--muted);font-size:12px;padding-right:16px;overflow-wrap:anywhere}
td.act{text-align:right;white-space:nowrap}
footer{border-top:1px solid var(--line);padding:24px 0 40px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:24px}
footer a:hover{color:var(--fg)}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .navin{gap:16px}
  .navin a[href="#features"]{display:none}
  .hero{padding:56px 0 40px}
  h1{font-size:34px}
  section.f{grid-template-columns:1fr;gap:24px;padding:40px 0}
  footer{flex-direction:column;gap:12px}
  table tr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 16px;padding:14px 0;border-top:1px solid var(--line)}
  table tr:first-child{border-top:0;padding-top:0}
  table td,tr:first-child td{display:block;border:0;padding:0}
  td.plat{width:auto}
  td.m{grid-column:1 / -1;grid-row:2;padding-right:0}
  td.act{grid-column:2;grid-row:1}
}