/* vpnonly — split layout, like the product: two lanes, one of them special. */
:root {
  --paper: #fcfcfd;
  --ink: #0e0f13;       /* the only heavy, dark thing on the page */
  --body: #8b8f97;      /* body recedes — light weight, light tone */
  --faint: #b0b4bb;
  --line: #e6e7ea;
  --accent: #15161a;      /* the accent is just ink — no colour competing with the UI */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--body);
  font: 400 17px/1.78 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #3f434b; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #cfd2d8; }
a:hover { text-decoration-color: var(--ink); }

.shell { max-width: 1120px; margin: 0 auto; padding: 0 34px; }

/* top bar */
.top {
  display: flex; gap: 22px; align-items: center;
  padding: 26px 0 0; font-size: 15px;
}
.top .me { display: flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; }
.top .me svg { width: 17px; height: 20px; }
.top .me b { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.top a { color: var(--faint); text-decoration: none; }
.top a:hover { color: var(--ink); }

/* two lanes */
.lanes {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 74px;
  padding: 66px 0 110px;
  align-items: start;
}
@media (max-width: 940px) {
  .lanes { grid-template-columns: 1fr; gap: 54px; padding-top: 46px; }
  .left { position: static !important; }
}

.left { position: sticky; top: 44px; }

.hello { font-size: 16.5px; color: var(--body); margin-bottom: 20px; }
.hello b { color: var(--ink); font-weight: 620; }

h1 {
  color: var(--ink);
  font-size: clamp(32px, 3.7vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 830;
  margin-bottom: 20px;
  text-wrap: balance;
}
h1 em { font-style: normal; }

.left p { margin-bottom: 17px; font-size: 16.5px; }

/* the status block — ours, not decoration: it's what the app shows */
.state {
  font: 13.5px/2 var(--mono);
  border-left: 2px solid var(--line);
  padding: 4px 0 4px 16px;
  margin: 26px 0 28px;
  color: var(--faint);
}
.state .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.state .in { background: #3f434b; }
.state .out { border: 1.5px solid #c9ccd3; }
.state b { color: #3f434b; font-weight: 560; }

.actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.btn {
  display: inline-block; border-radius: 10px; padding: 13px 24px;
  font-size: 16px; font-weight: 580; text-decoration: none;
  background: var(--ink); color: var(--paper);
  transition: transform .12s;
}
.btn:hover { transform: translateY(-1px); }
.alt { font-size: 15px; color: var(--faint); }
.alt a { color: var(--body); }
.terms { font-size: 13.5px; color: var(--faint); margin-top: 4px; }

/* right lane */
.right > section { padding-bottom: 42px; }
.right > section + section { border-top: 1px solid var(--line); padding-top: 38px; }
h2 {
  color: var(--faint); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 15px;
}
h2::before { content: ""; display: inline-block; width: 12px; height: 1px; background: #d5d8de; vertical-align: 4px; margin-right: 9px; }
.right p { margin-bottom: 16px; max-width: 62ch; }
.right p:last-child { margin-bottom: 0; }
.right strong { color: #3f434b; font-weight: 560; }

.shot {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #f1f2f4; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 42px;
}
.shot video, .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot .ph { font: 13.5px var(--mono); color: #aeb2ba; }

.right ul { list-style: none; max-width: 62ch; }
.right li { position: relative; padding-left: 20px; margin-bottom: 11px; }
.right li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 1.5px; background: #c2c5cc;
}

.qa { margin-bottom: 20px; max-width: 62ch; }
.qa .q { color: #3f434b; font-weight: 560; margin-bottom: 3px; }
.qa p { margin-bottom: 0; }

pre {
  background: #f4f5f7; border-radius: 10px; padding: 15px 17px;
  overflow-x: auto; margin-bottom: 16px; max-width: 62ch;
}
code { font: 13.5px var(--mono); color: #3a3d44; }
pre code { line-height: 1.65; }

.foot {
  border-top: 1px solid var(--line);
  padding: 22px 0 60px; font-size: 14.5px; color: var(--faint);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.foot a { color: var(--faint); }

/* deep pages keep one readable column */
.solo { max-width: 660px; padding: 54px 0 40px; }
.solo h1 { margin-bottom: 22px; }
.solo h2 { font-size: 19px; text-transform: none; letter-spacing: -0.01em; margin: 38px 0 12px; }
.solo h2::before { content: none; }
.solo p, .solo ul { margin-bottom: 16px; max-width: 62ch; }
.solo ul { list-style: none; }
.solo li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.solo li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 6px; height: 1.5px; background: #c2c5cc;
}

/* who + what it works with */
.who { text-decoration: none; }
.who b { border-bottom: 1px solid transparent; transition: border-color .15s; }
.who:hover b { border-bottom-color: #b9bcc3; }
.works {
  font-size: 13.5px; line-height: 1.6; color: var(--faint);
  margin: 22px 0 26px; max-width: 34ch;
}
.works span { color: #a2a6ad; }