@font-face {
  font-family:Manrope;
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/static/assets/manrope-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family:Manrope;
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/static/assets/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme:dark;
  --paper:#0c0c13;
  --ink:#f5f5f7;
  --muted:#b7b6c2;
  --line:#34343f;
  --accent:#b28aff;
  --band:#08070d;
  --hover:#29193f;
  --radius:8px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:36px;
  text-size-adjust:100%;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}

[hidden],.is-hidden {
  display:none!important;
}

button,input {
  font:inherit;
}

a {
  color:inherit;
  text-decoration:none;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
  opacity:.65;
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}

img {
  display:block;
  max-width:100%;
}

svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

h1,h2,h3,p {
  margin:0;
}

.wrap {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:100;
  background:var(--ink);
  color:white;
  padding:14px;
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:translateY(0);
}

.site-header {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  min-height:100px;
  border-bottom:1px solid var(--line);
  gap:32px;
}

.wordmark {
  display:inline-flex;
  align-items:center;
  gap:11px;
  width:max-content;
  color:var(--accent);
  font-size:20px;
  font-weight:800;
  letter-spacing:-.6px;
}

.wordmark img {
  width:32px;
  height:32px;
  border-radius:50%;
}

.header-nav {
  display:flex;
  gap:44px;
  font-size:15px;
  font-weight:600;
}

.header-nav a,.header-login {
  padding-block:14px;
  transition:color .16s;
}

.header-nav a:hover,.header-login:hover {
  color:var(--accent);
}

.header-login {
  justify-self:end;
  display:inline-flex;
  gap:24px;
  align-items:center;
  font-size:15px;
  font-weight:600;
}

.header-login svg {
  color:var(--accent);
}

.nav-toggle {
  display:none;
}

.hero {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:center;
  column-gap:38px;
  min-height:566px;
  padding-block:84px 64px;
}

.hero h1 {
  font-size:clamp(64px,6.4vw,92px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.055em;
  word-spacing:.04em;
}

.hero-description {
  font-size:19px;
  line-height:1.65;
  letter-spacing:-.35px;
  margin-top:28px;
  max-width:590px;
  color:#b7b6c2;
}

.hero-actions {
  display:flex;
  align-items:flex-start;
  gap:32px;
  margin-top:36px;
}

.button {
  min-height:58px;
  padding:16px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-size:15px;
  line-height:1.4;
  font-weight:600;
  transition:background .18s,border-color .18s,color .18s;
}

.button-dark {
  background:var(--ink);
  color:white;
}

.button-dark svg {
  color:#a68afa;
}

.button-dark:hover {
  background:#303036;
}

.button-outline {
  border-color:var(--accent);
  color:var(--accent);
  min-width:180px;
  font-weight:500;
}

.button-outline:hover {
  background:var(--accent);
  color:white;
}

.trial-action {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.trial-action>span {
  font-size:13px;
  color:var(--muted);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--accent);
  font-size:16px;
  line-height:1.6;
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.hero-how {
  margin-top:17px;
  white-space:nowrap;
  color:var(--ink);
  font-size:15px;
}

.hero-how svg {
  color:var(--accent);
}

.connection-diagram {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 142px;
  align-items:center;
  gap:14px;
  color:var(--accent);
  height:320px;
  margin-top:4px;
}

.diagram-origin {
  font-size:24px;
  letter-spacing:-1px;
}

.diagram-lines {
  width:100%;
  height:100%;
  stroke-width:1.5;
  overflow:visible;
}

.diagram-lines circle {
  fill:white;
}

.diagram-devices {
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-block:23px;
  font-size:23px;
  letter-spacing:-1px;
}

.essentials {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding-top:40px;
  padding-bottom:14px;
  border-top:1px solid var(--line);
}

.essentials>div {
  padding-left:50px;
  border-left:1px solid var(--line);
}

.essentials>div:first-child {
  padding-left:16px;
  border-left:0;
}

.essentials h2 {
  font-size:24px;
  font-weight:700;
  letter-spacing:-.75px;
}

.essentials p {
  font-size:16px;
  line-height:1.6;
  margin-top:14px;
  color:#b7b6c2;
}

.section {
  padding-block:112px;
}

.section h2 {
  font-size:clamp(40px,4.7vw,64px);
  line-height:1.09;
  font-weight:800;
  letter-spacing:-.05em;
  word-spacing:.04em;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  margin-bottom:52px;
}

.section-heading>p {
  font-size:19px;
  line-height:1.7;
  padding-bottom:4px;
  color:#b7b6c2;
  max-width:420px;
}

.plan-switch {
  display:flex;
  gap:44px;
  border-bottom:1px solid var(--line);
}

.plan-switch button {
  padding:0 0 20px;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--ink);
  font-size:19px;
  font-weight:500;
  line-height:1.5;
  margin-bottom:-1px;
}

.plan-switch button.is-active {
  color:var(--accent);
  border-color:var(--accent);
  font-weight:650;
}

.plan-row {
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:24px;
  align-items:center;
  padding:34px 8px;
  border-bottom:1px solid var(--line);
  transition:background .16s;
}

.plan-row:hover,.plan-row:focus-within {
  background:var(--hover);
}

.plan-row h3 {
  font-size:25px;
  font-weight:650;
  letter-spacing:-.8px;
}

.plan-row>strong {
  font-size:43px;
  font-weight:650;
  line-height:1.2;
  letter-spacing:-2px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.plan-row>span {
  font-size:18px;
  white-space:nowrap;
  color:#b7b6c2;
  letter-spacing:-.5px;
}

.pricing-note {
  font-size:16px;
  line-height:1.7;
  margin-top:28px;
  color:#b7b6c2;
}

.pricing-note a {
  margin-left:20px;
  color:var(--accent);
}

.pricing-note a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.setup {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:96px;
  padding-top:60px;
}

.setup-heading .text-link {
  margin-top:30px;
}

.setup-steps {
  list-style:none;
  padding:0;
  margin:0;
}

.setup-steps li {
  display:flex;
  gap:28px;
  padding:32px 0;
  border-top:1px solid var(--line);
}

.setup-steps li:first-child {
  border:0;
  padding-top:0;
}

.step-number {
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  min-width:28px;
}

.setup-steps h3 {
  font-size:24px;
  font-weight:650;
  line-height:1.4;
  letter-spacing:-.8px;
}

.setup-steps p {
  font-size:17px;
  line-height:1.75;
  color:#b7b6c2;
  margin-top:9px;
}

.faq-band {
  background:var(--band);
}

.faq {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:96px;
  padding-block:90px;
}

.faq h2 {
  font-size:clamp(38px,3.9vw,54px);
}

.faq-list details {
  border-bottom:1px solid #d6d6dc;
}

.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 0;
  cursor:pointer;
  font-size:19px;
  line-height:1.55;
  letter-spacing:-.5px;
  font-weight:650;
}

.faq-list details:first-child summary {
  padding-top:4px;
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list p {
  font-size:17px;
  line-height:1.75;
  color:#b7b6c2;
  padding:0 30px 28px 0;
}

.faq-list p a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

.disclosure {
  position:relative;
  display:block;
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--accent);
}

.disclosure:before,.disclosure:after {
  content:'';
  position:absolute;
  inset:8px 1px auto;
  height:1.5px;
  background:currentColor;
}

.disclosure:after {
  transform:rotate(90deg);
}

details[open] .disclosure:after {
  transform:rotate(0);
}

.site-footer {
  padding-block:50px 28px;
}

.footer-top,.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.footer-top {
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}

.footer-wordmark {
  font-size:32px;
  font-weight:800;
  letter-spacing:-1.4px;
}

.site-footer nav {
  display:flex;
  gap:30px;
  flex-wrap:wrap;
}

.footer-top nav {
  font-size:15px;
}

.footer-bottom {
  padding-top:26px;
  font-size:12px;
  color:var(--muted);
}

.site-footer a:hover {
  color:var(--accent);
}

@media(min-width:1600px) {
  .hero {
    min-height:640px;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 72px);
  }
  .hero {
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:18px;
  }
  .hero h1 {
    font-size:clamp(54px,6.4vw,70px);
  }
  .hero-description {
    font-size:17px;
  }
  .hero-actions {
    gap:20px;
  }
  .hero-how {
    font-size:13px;
    gap:8px;
  }
  .button {
    padding-inline:18px;
    gap:14px;
  }
  .connection-diagram {
    grid-template-columns:30px minmax(0,1fr) 110px;
    gap:8px;
    height:290px;
  }
  .diagram-devices {
    font-size:18px;
  }
  .diagram-origin {
    font-size:20px;
  }
  .essentials>div {
    padding-left:32px;
  }
  .section-heading>p {
    font-size:17px;
  }
  .plan-row {
    gap:16px;
  }
  .plan-row>strong {
    font-size:36px;
  }
  .plan-row>span {
    font-size:15px;
  }
  .plan-row .button {
    min-width:140px;
  }
  .setup,.faq {
    gap:48px;
  }
  .faq h2 {
    font-size:38px;
  }
  .header-nav {
    gap:28px;
  }
}

@media(max-width:820px) {
  .wrap {
    width:calc(100% - 48px);
  }
  .site-header {
    grid-template-columns:1fr auto auto;
    min-height:80px;
    gap:22px;
  }
  .wordmark {
    font-size:18px;
  }
  .wordmark img {
    width:29px;
    height:29px;
  }
  .header-nav {
    display:none;
    position:absolute;
    top:79px;
    left:-24px;
    right:-24px;
    background:var(--paper);
    padding:24px;
    flex-direction:column;
    gap:4px;
    border-bottom:1px solid var(--line);
    z-index:12;
  }
  .site-header.is-open .header-nav {
    display:flex;
  }
  .header-login {
    font-size:14px;
    gap:12px;
  }
  .header-login svg {
    width:20px;
  }
  .nav-toggle {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:28px;
    height:44px;
    padding:0;
    background:none;
    border:0;
    z-index:13;
  }
  .nav-toggle span {
    height:1.5px;
    width:24px;
    background:var(--ink);
    transition:transform .18s;
  }
  .nav-toggle.is-active span:first-child {
    transform:translateY(3.75px) rotate(45deg);
  }
  .nav-toggle.is-active span:last-child {
    transform:translateY(-3.75px) rotate(-45deg);
  }
  .nav-backdrop {
    position:fixed;
    inset:80px 0 0;
    background:rgba(22,22,25,.15);
    z-index:10;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:54px 42px;
    min-height:0;
    gap:38px;
  }
  .hero h1 {
    font-size:clamp(54px,9.5vw,76px);
    letter-spacing:-.065em;
  }
  .hero-description {
    font-size:18px;
  }
  .hero-actions {
    gap:28px;
  }
  .hero-how {
    font-size:15px;
  }
  .connection-diagram {
    max-width:500px;
    width:100%;
    height:220px;
    grid-template-columns:36px minmax(0,1fr) 132px;
    justify-self:center;
    margin-top:4px;
    gap:14px;
  }
  .diagram-origin {
    font-size:22px;
  }
  .diagram-devices {
    font-size:21px;
    padding-block:12px;
  }
  .essentials {
    padding-top:28px;
    gap:24px;
  }
  .essentials>div {
    padding-left:0;
    border:0;
  }
  .essentials>div:first-child {
    padding-left:0;
  }
  .essentials h2 {
    font-size:18px;
  }
  .essentials p {
    font-size:14px;
    margin-top:10px;
  }
  .section {
    padding-block:76px;
  }
  .section-heading {
    align-items:flex-start;
    gap:24px;
    flex-direction:column;
    margin-bottom:34px;
  }
  .section h2 {
    font-size:49px;
  }
  .plan-switch {
    gap:28px;
  }
  .plan-switch button {
    font-size:16px;
  }
  .plan-row h3 {
    font-size:21px;
  }
  .plan-row>strong {
    font-size:33px;
  }
  .plan-row>span {
    font-size:13px;
  }
  .plan-row .button {
    min-width:115px;
    font-size:13px;
    gap:10px;
    padding-inline:12px;
    min-height:48px;
  }
  .plan-row .button svg {
    width:18px;
  }
  .pricing-note {
    font-size:14px;
  }
  .setup,.faq {
    grid-template-columns:1fr;
    gap:44px;
  }
  .setup {
    padding-top:0;
  }
  .setup-heading .text-link {
    margin-top:20px;
  }
  .setup-steps h3 {
    font-size:23px;
  }
  .faq h2 {
    font-size:44px;
  }
  .faq-list summary {
    font-size:18px;
  }
  .footer-top {
    align-items:flex-start;
  }
  .footer-top nav {
    font-size:13px;
    gap:18px;
  }
  .footer-bottom {
    align-items:flex-start;
    font-size:11px;
  }
  .footer-bottom nav {
    gap:16px;
  }
  .footer-bottom>span {
    white-space:nowrap;
  }
}

@media(max-width:540px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    gap:14px;
    min-height:76px;
  }
  .header-nav {
    top:75px;
    left:-20px;
    right:-20px;
    padding:20px;
  }
  .nav-backdrop {
    top:76px;
  }
  .hero {
    padding-top:44px;
    gap:24px;
  }
  .hero h1 {
    font-size:clamp(44px,12.8vw,64px);
    letter-spacing:-.07em;
  }
  .hero-description {
    font-size:16px;
    line-height:1.7;
    margin-top:22px;
  }
  .desktop-break {
    display:none;
  }
  .hero-actions {
    margin-top:26px;
    gap:17px;
    flex-wrap:wrap;
  }
  .button {
    min-height:54px;
    font-size:14px;
    padding-inline:18px;
    gap:18px;
  }
  .hero-how {
    font-size:13px;
    margin-top:16px;
    gap:8px;
  }
  .hero-how svg {
    width:19px;
  }
  .trial-action>span {
    font-size:11px;
  }
  .connection-diagram {
    height:177px;
    grid-template-columns:28px minmax(0,1fr) 115px;
    gap:12px;
    margin-top:15px;
  }
  .diagram-origin {
    font-size:19px;
  }
  .diagram-devices {
    font-size:19px;
    padding-block:7px;
  }
  .essentials {
    grid-template-columns:1fr;
    gap:0;
    padding-top:8px;
    padding-bottom:0;
  }
  .essentials>div {
    display:grid;
    grid-template-columns:.9fr 1fr;
    gap:14px;
    padding-block:21px;
    border-bottom:1px solid var(--line);
  }
  .essentials h2 {
    font-size:16px;
    letter-spacing:-.6px;
    line-height:1.5;
  }
  .essentials p {
    font-size:13px;
    margin-top:0;
    line-height:1.65;
  }
  .essentials br {
    display:none;
  }
  .section {
    padding-block:60px;
  }
  .section h2 {
    font-size:40px;
  }
  .section-heading {
    gap:22px;
    margin-bottom:32px;
  }
  .section-heading>p {
    font-size:15px;
    line-height:1.75;
  }
  .plan-switch {
    gap:26px;
  }
  .plan-switch button {
    font-size:16px;
    text-align:left;
    line-height:1.6;
    padding-bottom:14px;
  }
  .plan-switch button span {
    display:block;
    font-size:12px;
    color:var(--muted);
  }
  .plan-switch button.is-active span {
    color:var(--accent);
  }
  .plan-row {
    grid-template-columns:1fr auto;
    gap:6px 18px;
    padding:23px 0;
  }
  .plan-row h3 {
    font-size:20px;
    grid-column:1;
    grid-row:1;
  }
  .plan-row>strong {
    font-size:32px;
    grid-column:2;
    grid-row:1;
    letter-spacing:-1.5px;
    text-align:right;
  }
  .plan-row>span {
    grid-column:1;
    grid-row:2;
    align-self:end;
    margin-bottom:8px;
    font-size:12px;
  }
  .plan-row .button {
    grid-column:2;
    grid-row:2;
    min-height:43px;
    min-width:113px;
    margin-top:9px;
    font-size:13px;
    padding:9px 13px;
  }
  .pricing-note {
    font-size:13px;
    margin-top:23px;
    line-height:1.8;
  }
  .pricing-note a {
    display:inline-block;
    margin-left:7px;
  }
  .setup {
    padding-top:18px;
    gap:38px;
  }
  .setup-heading .text-link {
    font-size:14px;
    margin-top:20px;
  }
  .setup-steps li {
    gap:20px;
    padding-block:24px;
  }
  .step-number {
    font-size:15px;
    line-height:1.8;
    min-width:22px;
  }
  .setup-steps h3 {
    font-size:20px;
  }
  .setup-steps p {
    font-size:15px;
    line-height:1.7;
    margin-top:8px;
  }
  .faq {
    gap:31px;
  }
  .faq-list summary {
    font-size:16px;
    padding-block:22px;
  }
  .faq-list p {
    font-size:14px;
    padding-right:8px;
    padding-bottom:25px;
  }
  .footer-top {
    display:block;
    padding-bottom:28px;
  }
  .footer-wordmark {
    font-size:30px;
  }
  .footer-top nav {
    margin-top:25px;
    gap:22px;
    font-size:12px;
  }
  .footer-bottom {
    flex-direction:column;
    gap:24px;
    font-size:11px;
    padding-top:23px;
  }
  .footer-bottom nav {
    gap:14px;
    line-height:1.8;
  }
  .site-footer {
    padding-top:34px;
    padding-bottom:24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}