.remote-page{
  background:var(--zm-surface);
  color:var(--zm-ink);
}

.access-hero{
  padding-block:var(--zm-space-6);
  background:var(--zm-paper);
  color:var(--zm-ink);
}

.access-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(24rem,.95fr);
  gap:var(--zm-space-5);
  align-items:center;
}

.access-hero__copy{
  min-width:0;
}

.access-heading-flow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
}

.access-heading-flow h1{
  max-width:min(36rem,100%);
  overflow-wrap:anywhere;
}

.access-heading-flow p{
  max-width:42rem;
  color:var(--zm-muted);
}

.access-hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:var(--zm-space-1);
  margin-top:var(--zm-space-3);
}

.access-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:var(--zm-space-4) 0 0;
  padding-top:var(--zm-space-3);
  border-top:1px solid var(--zm-line);
}

.access-stats div{
  min-width:0;
  padding-right:var(--zm-space-2);
}

.access-stats div+div{
  padding-left:var(--zm-space-2);
  border-left:1px solid var(--zm-line);
}

.access-stats dt{
  color:var(--zm-ink);
}

.access-stats dd{
  margin-top:var(--zm-space-1);
  color:var(--zm-muted);
  overflow-wrap:anywhere;
}

.connection-sheet{
  min-width:0;
  overflow:hidden;
  border-radius:var(--zm-radius-lg);
  background:var(--zm-ink);
  color:#fff;
  box-shadow:var(--zm-shadow);
}

.connection-sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--zm-space-2);
  padding:var(--zm-space-2) var(--zm-space-3);
  background:var(--zm-yellow);
  color:var(--zm-ink);
}

.connection-sheet__head span{
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-0);
  font-weight:700;
}

.connection-sheet__head strong{
  font-family:var(--zm-font-heading);
  font-size:var(--zm-fs-1);
}

.connection-sheet__body{
  display:grid;
  gap:0;
  padding:var(--zm-space-2) var(--zm-space-3) var(--zm-space-3);
}

.connection-route{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--zm-space-2);
  padding-block:var(--zm-space-2);
  border-bottom:1px solid var(--zm-line-dark);
}

.connection-route__index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:var(--zm-radius-sm);
  background:var(--zm-yellow);
  color:var(--zm-ink);
  font-family:var(--zm-font-mono);
  font-weight:700;
}

.connection-route div{
  min-width:0;
  display:grid;
  gap:var(--zm-space-1);
}

.connection-route strong{
  color:#fff;
  overflow-wrap:anywhere;
}

.connection-route small{
  color:var(--zm-muted-light);
  overflow-wrap:anywhere;
}

.connection-route__status{
  color:var(--zm-yellow);
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-0);
  font-weight:700;
  overflow-wrap:anywhere;
}

.connection-sheet__check{
  display:grid;
  grid-template-columns:minmax(7rem,.45fr) minmax(0,1fr);
  gap:var(--zm-space-2);
  padding-top:var(--zm-space-2);
}

.connection-sheet__check span{
  color:var(--zm-muted-light);
  font-size:var(--zm-fs-1);
}

.connection-sheet__check strong{
  color:#fff;
  font-size:var(--zm-fs-1);
  overflow-wrap:anywhere;
}

.access-section{
  padding-block:var(--zm-space-6);
}

.access-section--paper{
  background:var(--zm-paper);
  color:var(--zm-ink);
}

.access-section--soft{
  background:var(--zm-soft);
  color:var(--zm-ink);
}

.access-section--dark{
  background:var(--zm-ink);
  color:#fff;
}

.access-section--yellow{
  background:var(--zm-yellow);
  color:var(--zm-ink);
}

.section-heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
  max-width:52rem;
}

.section-heading p{
  color:var(--zm-muted);
}

.section-heading--dark h2{
  color:#fff;
}

.section-heading--dark p{
  color:var(--zm-muted-light);
}

.method-switch{
  margin-top:var(--zm-space-4);
  overflow:hidden;
  border-radius:var(--zm-radius-lg);
  background:var(--zm-surface);
  color:var(--zm-ink);
  box-shadow:var(--zm-shadow);
}

.method-tabs{
  min-width:0;
}

.method-tabs .c-tab{
  flex:1 0 auto;
  white-space:nowrap;
}

.method-panel{
  display:grid;
  grid-template-columns:minmax(9rem,.35fr) minmax(0,1fr) minmax(15rem,.65fr);
  gap:var(--zm-space-3);
  align-items:start;
  padding:var(--zm-space-4);
  background:var(--zm-surface);
  color:var(--zm-ink);
}

.method-panel[hidden]{
  display:none;
}

.method-panel__label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
  color:var(--zm-ink);
}

.method-panel__label svg{
  width:2rem;
  height:2rem;
}

.method-panel>div:nth-child(2){
  min-width:0;
  display:grid;
  gap:var(--zm-space-1);
}

.method-panel>div:nth-child(2) p{
  color:var(--zm-muted);
}

.method-panel ul{
  min-width:0;
  margin:0;
  padding-left:1.2rem;
  color:var(--zm-muted);
}

.prepare-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:var(--zm-space-2);
  align-items:start;
  margin:var(--zm-space-4) 0 0;
  padding:0;
  list-style:none;
}

.prepare-grid li{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
  padding:var(--zm-space-3);
  border-radius:var(--zm-radius-md);
  background:var(--zm-paper);
  color:var(--zm-ink);
}

.prepare-grid__number{
  width:fit-content;
  align-self:flex-start;
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-1);
  font-weight:700;
  color:var(--zm-success);
}

.prepare-grid p{
  color:var(--zm-muted);
}

.prepare-notice{
  display:grid;
  justify-items:start;
  gap:var(--zm-space-1);
  margin-top:var(--zm-space-3);
}

.prepare-notice .c-btn{
  margin-top:var(--zm-space-1);
}

.ssh-layout{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--zm-space-4);
  align-items:stretch;
  margin-top:var(--zm-space-4);
}

.ssh-steps{
  display:flex;
  flex-direction:column;
  gap:var(--zm-space-2);
}

.ssh-step{
  flex:1;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--zm-space-2);
  padding:var(--zm-space-3);
  border-radius:var(--zm-radius-md);
  background:#fff;
  color:var(--zm-ink);
}

.ssh-step__number{
  color:var(--zm-success);
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-0);
  font-weight:700;
}

.ssh-step div{
  min-width:0;
  display:grid;
  align-content:start;
  gap:var(--zm-space-1);
}

.ssh-step p{
  color:var(--zm-muted);
}

.ssh-command-stack{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--zm-space-2);
}

.command-card{
  flex:1;
}

.c-terminal-head{
  justify-content:space-between;
}

.command-copy{
  flex:0 0 auto;
  padding:.4rem .7rem;
  border:1px solid var(--zm-line-dark);
  border-radius:var(--zm-radius-pill);
  background:transparent;
  color:#fff;
  font-size:var(--zm-fs-0);
  line-height:1.2;
}

.command-copy:hover{
  background:var(--zm-yellow);
  color:var(--zm-ink);
  border-color:var(--zm-yellow);
}

.copy-status{
  min-height:1.5rem;
  color:var(--zm-yellow);
  font-size:var(--zm-fs-1);
}

.screen-workflow{
  display:grid;
  grid-template-columns:minmax(18rem,.75fr) minmax(0,1.25fr);
  gap:var(--zm-space-3);
  align-items:stretch;
  margin-top:var(--zm-space-4);
}

.screen-workflow__intro{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
  padding:var(--zm-space-4);
  border-radius:var(--zm-radius-lg);
  background:var(--zm-ink);
  color:#fff;
}

.screen-workflow__intro>span{
  color:var(--zm-yellow);
  font-size:var(--zm-fs-0);
}

.screen-workflow__intro p{
  color:var(--zm-muted-light);
}

.screen-address{
  width:100%;
  display:grid;
  gap:var(--zm-space-1);
  margin-top:auto;
  padding-top:var(--zm-space-3);
  border-top:1px solid var(--zm-line-dark);
}

.screen-address span{
  color:var(--zm-muted-light);
  font-size:var(--zm-fs-1);
}

.screen-address code{
  overflow-wrap:anywhere;
  color:var(--zm-yellow);
}

.screen-workflow__steps{
  min-width:0;
  display:grid;
  gap:var(--zm-space-2);
  margin:0;
  padding:0;
  list-style:none;
}

.screen-workflow__steps li{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--zm-space-2);
  padding:var(--zm-space-3);
  border-radius:var(--zm-radius-md);
  background:var(--zm-paper);
  color:var(--zm-ink);
}

.screen-workflow__steps li>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.35rem;
  height:2.35rem;
  border-radius:var(--zm-radius-sm);
  background:var(--zm-yellow);
  color:var(--zm-ink);
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-0);
  font-weight:700;
}

.screen-workflow__steps div{
  min-width:0;
  display:grid;
  gap:var(--zm-space-1);
}

.screen-workflow__steps p{
  color:var(--zm-muted);
}

.cross-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  gap:var(--zm-space-3);
  align-items:start;
  margin-top:var(--zm-space-4);
}

.cross-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
  background:var(--zm-surface);
  color:var(--zm-ink);
}

.cross-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:var(--zm-radius-sm);
  background:var(--zm-yellow);
  color:var(--zm-ink);
}

.cross-card__icon svg{
  width:1.45rem;
  height:1.45rem;
}

.cross-card p,
.cross-card ul{
  color:var(--zm-muted);
}

.cross-card ul{
  margin:var(--zm-space-1) 0 0;
  padding-left:1.2rem;
}

.cross-notice{
  display:grid;
  gap:var(--zm-space-1);
  margin-top:var(--zm-space-3);
  background:var(--zm-surface);
  color:var(--zm-ink);
}

.runner-layout{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--zm-space-3);
  align-items:stretch;
  margin-top:var(--zm-space-4);
}

.runner-flow{
  display:flex;
  flex-direction:column;
  gap:var(--zm-space-2);
  margin:0;
  padding:0;
  list-style:none;
}

.runner-flow li{
  flex:1;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--zm-space-2);
  padding:var(--zm-space-3);
  border-radius:var(--zm-radius-md);
  background:var(--zm-paper);
  color:var(--zm-ink);
}

.runner-flow__marker{
  color:var(--zm-success);
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-0);
  font-weight:700;
}

.runner-flow li div{
  min-width:0;
  display:grid;
  gap:var(--zm-space-1);
}

.runner-flow p{
  color:var(--zm-muted);
}

.runner-example{
  min-width:0;
  overflow:hidden;
  border-radius:var(--zm-radius-lg);
  background:var(--zm-ink);
  color:#fff;
}

.runner-example__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--zm-space-2);
  padding:var(--zm-space-2) var(--zm-space-3);
  background:var(--zm-yellow);
  color:var(--zm-ink);
}

.runner-example__head span{
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-0);
  font-weight:700;
}

.runner-example__head strong{
  font-family:var(--zm-font-heading);
  font-size:var(--zm-fs-1);
}

.runner-example__body{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.runner-example pre{
  flex:1;
  max-width:100%;
  margin:0;
  padding:var(--zm-space-3);
  overflow-x:auto;
  color:#eeeef0;
}

.runner-example code{
  white-space:pre;
}

.runner-example__notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--zm-space-2);
  padding:var(--zm-space-3);
  border-top:1px solid var(--zm-line-dark);
}

.runner-example__notes span{
  min-width:0;
  color:var(--zm-muted-light);
  font-size:var(--zm-fs-1);
  overflow-wrap:anywhere;
}

.security-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:var(--zm-space-2);
  align-items:start;
  margin-top:var(--zm-space-4);
}

.security-grid article{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
  padding:var(--zm-space-3);
  border-radius:var(--zm-radius-md);
  background:var(--zm-ink);
  color:#fff;
}

.security-grid__index{
  width:fit-content;
  align-self:flex-start;
  color:var(--zm-yellow);
  font-family:var(--zm-font-mono);
  font-size:var(--zm-fs-1);
  font-weight:700;
}

.security-grid p{
  color:var(--zm-muted-light);
}

.troubleshoot-table{
  margin-top:var(--zm-space-4);
}

.troubleshoot-table table{
  min-width:52rem;
}

.troubleshoot-table caption{
  padding:0 0 var(--zm-space-2);
  color:var(--zm-muted);
  text-align:left;
}

.troubleshoot-table td{
  vertical-align:top;
}

.diagnostic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));
  gap:var(--zm-space-3);
  align-items:start;
  margin-top:var(--zm-space-3);
}

.diagnostic-command pre{
  max-width:100%;
}

.support-package{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(17rem,.45fr);
  gap:var(--zm-space-4);
  align-items:center;
  margin-top:var(--zm-space-4);
  padding:var(--zm-space-4);
  border-radius:var(--zm-radius-lg);
  background:var(--zm-paper);
  color:var(--zm-ink);
}

.support-package>div:first-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
}

.support-package p{
  color:var(--zm-muted);
}

.support-package__actions{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--zm-space-1);
}

.access-cta__copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--zm-space-1);
  max-width:48rem;
}

.access-cta__copy h2{
  color:#fff;
}

.access-cta__copy p{
  color:var(--zm-muted-light);
}

.access-cta__actions{
  min-width:min(100%,18rem);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--zm-space-1);
}

.c-cta-band .c-btn-ghost{
  color:#fff;
  border-color:color-mix(in srgb,currentColor 45%,transparent);
}

@media(max-width:64rem){
  .access-hero__inner,
  .ssh-layout,
  .screen-workflow,
  .runner-layout,
  .support-package{
    grid-template-columns:1fr;
  }

  .access-heading-flow h1{
    max-width:15ch;
  }

  .method-panel{
    grid-template-columns:minmax(8rem,.3fr) minmax(0,1fr);
  }

  .method-panel ul{
    grid-column:1 / -1;
  }

  .connection-sheet{
    max-width:44rem;
  }

  .screen-workflow__intro{
    min-height:22rem;
  }

  .support-package__actions{
    width:min(100%,26rem);
  }
}

@media(max-width:48rem){
  .access-hero{
    padding-block:var(--zm-space-5);
  }

  .access-hero__inner{
    gap:var(--zm-space-4);
  }

  .access-hero__actions{
    flex-direction:column;
  }

  .access-stats{
    grid-template-columns:1fr;
  }

  .access-stats div{
    padding:var(--zm-space-2) 0;
  }

  .access-stats div+div{
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--zm-line);
  }

  .connection-sheet__check{
    grid-template-columns:1fr;
    gap:var(--zm-space-1);
  }

  .method-panel{
    grid-template-columns:1fr;
    padding:var(--zm-space-3);
  }

  .method-panel ul{
    grid-column:auto;
  }

  .runner-example__notes{
    grid-template-columns:1fr;
  }

  .support-package{
    padding:var(--zm-space-3);
  }

  .support-package__actions{
    width:100%;
  }
}

@media(max-width:24.375rem){
  .connection-sheet__head,
  .runner-example__head{
    align-items:flex-start;
    flex-direction:column;
  }

  .connection-route{
    grid-template-columns:auto minmax(0,1fr);
  }

  .connection-route__status{
    grid-column:2;
  }

  .ssh-step,
  .screen-workflow__steps li,
  .runner-flow li{
    grid-template-columns:1fr;
  }

  .c-terminal-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .command-copy{
    width:100%;
  }
}
