/* The public site. Same palette and type as the product, because the first
   screenshot a visitor sees should look like the thing they sign in to. */
:root{
  --chrome:#16181C; --chrome-2:#1E2126; --chrome-3:#262A31; --canvas:#FCFCFA;
  --ink:#E8E9EC; --ink-2:#B4B9C2; --muted:#858B95; --rule:#2C3138;
  --accent:#5B7CFF; --accent-dim:#2A3768;
  --warn:#E0A020; --err:#E05C5C; --storm:#189E77;
  --ui:"Barlow",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--chrome);color:var(--ink);font-family:var(--ui);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.015em;text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;
  padding:14px var(--pad);background:rgba(22,24,28,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.mark img{display:block;height:26px;width:auto}
.mark--text{font-family:var(--mono);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink)}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--ink-2)}
.nav nav a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:18px}
.quiet{color:var(--ink-2);font-size:14px}
.quiet:hover{color:var(--ink)}
.cta{background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  padding:9px 16px;border-radius:4px;white-space:nowrap}
.cta:hover{filter:brightness(1.08)}
.cta.big{font-size:16px;padding:13px 24px}
@media (max-width:820px){.nav nav{display:none}}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(48px,8vw,104px) var(--pad)}
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.08;margin:0 0 18px;
  font-weight:600}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);margin:0 0 14px;
  max-width:54ch}
.sub{color:var(--muted);font-size:15px;margin:0 0 28px;max-width:54ch}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fine{color:var(--muted);font-size:13px;margin:14px 0 0}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

/* The screenshot stand-in: the product's own inspector, drawn rather than
   photographed so it stays true when the UI moves. */
.shot{display:grid;grid-template-columns:1fr 260px;margin:0;
  background:var(--chrome-2);border:1px solid var(--rule);border-radius:7px;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.shot-plan{position:relative;background:var(--canvas);padding:14px}
.shot-plan svg{width:100%;height:auto;display:block}
.shot-plan .faint path{fill:none;stroke:#C9CBD0;stroke-width:1}
.shot-plan .run{fill:none;stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round}
.shot-plan .run.storm{stroke:var(--storm)}
.shot-plan .node{fill:var(--storm)}
.shot-label{position:absolute;top:10px;left:12px;font-family:var(--mono);
  font-size:11px;color:#6B7079}
.shot-tag{font-family:var(--mono);font-size:9px;fill:var(--storm)}
.shot-side{padding:16px 18px;border-left:1px solid var(--rule)}
.shot-h{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.shot-side dl{margin:0;display:grid;gap:11px}
.shot-side dt{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.shot-side dd{margin:2px 0 0;font-family:var(--mono);font-size:12px;
  color:var(--ink)}
.shot-side dd.accent{color:var(--accent)}
.chip{background:#3A2E12;color:var(--warn);font-size:10px;padding:1px 6px;
  border-radius:3px;margin-left:5px}
@media (max-width:620px){.shot{grid-template-columns:1fr}
  .shot-side{border-left:0;border-top:1px solid var(--rule)}}

/* ---- bands ---- */
.band{padding:clamp(44px,6vw,84px) var(--pad);border-top:1px solid var(--rule)}
.band.alt{background:#13151A}
.band h2{font-size:clamp(24px,2.8vw,33px);margin:0 0 14px;font-weight:600}
.band-lede{color:var(--ink-2);font-size:17px;max-width:64ch;margin:0 0 34px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px}
.cards article{background:var(--chrome-2);border:1px solid var(--rule);
  border-radius:6px;padding:20px 22px}
.cards h3{font-size:16px;margin:0 0 9px;font-weight:600}
.cards p{color:var(--ink-2);font-size:14.5px;margin:0}

.flow{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.flow li{counter-increment:step;background:var(--chrome-2);
  border:1px solid var(--rule);border-left:2px solid var(--accent);
  border-radius:5px;padding:16px 18px}
.flow li span{display:block;font-weight:600;font-size:15px;margin-bottom:5px}
.flow li span::before{content:counter(step);font-family:var(--mono);
  color:var(--muted);font-size:11px;margin-right:9px}
.flow li p{margin:0;color:var(--ink-2);font-size:14px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);
  align-items:start}
.split p{color:var(--ink-2);max-width:56ch}
.split h2{margin-top:0}
@media (max-width:860px){.split{grid-template-columns:1fr}
  .split.reverse>div:first-child{order:2}}

.panelette{background:var(--chrome-2);border:1px solid var(--rule);
  border-radius:6px;padding:16px 18px}
.pn-h{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 9px;display:flex;align-items:center;gap:9px}
.pn-h:first-child{margin-top:0}
.pill{background:var(--accent-dim);color:var(--ink);font-family:var(--mono);
  font-size:10px;letter-spacing:.04em;padding:2px 7px;border-radius:3px;
  text-transform:none}
.pn-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink-2)}
.pn-row b{font-family:var(--mono);color:var(--ink);font-weight:500}
.pn-stat{display:flex;flex-direction:column;padding:9px 0;
  border-bottom:1px solid var(--rule)}
.pn-stat b{font-family:var(--mono);font-size:20px;font-weight:600}
.pn-stat b.bad{color:var(--storm)}
.pn-stat span{color:var(--muted);font-size:12.5px}
.pn-note{color:var(--warn);font-size:13px;line-height:1.45;margin-top:12px}

.diffbox{background:var(--chrome-2);border:1px solid var(--rule);
  border-radius:6px;padding:8px 16px}
.diff-row{display:grid;grid-template-columns:88px 150px 1fr;gap:14px;
  align-items:baseline;padding:10px 0 10px 12px;
  border-bottom:1px solid var(--rule);border-left:2px solid var(--rule);
  font-size:14px;color:var(--ink-2)}
.diff-row:last-child{border-bottom:0}
.diff-row span:first-child,.diff-row span:nth-child(2){font-family:var(--mono);
  font-size:12px;color:var(--ink)}
.diff-row.changed{border-left-color:var(--warn)}
.diff-row.added{border-left-color:var(--storm)}
.diff-row.unverified{border-left-color:var(--muted)}

.trial{text-align:center;padding:clamp(52px,7vw,92px) var(--pad);
  border-top:1px solid var(--rule);background:#13151A}
.trial h2{font-size:clamp(26px,3vw,36px);margin:0 0 12px;font-weight:600}
.trial p{color:var(--ink-2);margin:0 0 26px}
.trial .fine{margin-top:18px}

.faq{display:grid;gap:10px;max-width:78ch}
.faq details{background:var(--chrome-2);border:1px solid var(--rule);
  border-radius:6px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-family:var(--mono);
  margin-right:11px}
.faq details[open] summary::before{content:"–"}
.faq p{color:var(--ink-2);font-size:14.5px;margin:11px 0 0}

footer{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:26px var(--pad);border-top:1px solid var(--rule);color:var(--muted)}
.foot-links{display:flex;gap:20px;margin-left:auto;font-size:14px;
  color:var(--ink-2)}
.foot-links a:hover{color:var(--ink)}
footer .fine{margin:0;width:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}