.page-onboarding main{
  background:#FFFFFF;
  color:#202426
}

.ob-hero[data-hero-form="product-visual"]{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(31rem,1.02fr);
  gap:var(--space-4);
  align-items:start;
  padding-block:var(--hero-pad)
}

.ob-hero .hero-copy,
.ob-hero .hero-stage{
  min-width:0
}

.ob-hero .hero-copy{
  justify-content:flex-start;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#F3EEDD;
  color:#25251F
}

.ob-hero .hero-copy h1{
  max-width:15ch;
  overflow-wrap:anywhere
}

.ob-hero-lead{
  max-width:42rem;
  margin-top:var(--space-3);
  color:#4D4C43
}

.ob-hero .c-actions{
  justify-content:flex-start;
  margin-top:var(--space-3)
}

.ob-hero-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-1);
  margin:var(--space-3) 0 0;
  padding-top:var(--space-3);
  border-top:1px solid color-mix(in srgb,#25251F 13%,transparent)
}

.ob-hero-facts div,
.ob-hero-facts dt,
.ob-hero-facts dd{
  min-width:0;
  overflow-wrap:anywhere
}

.ob-hero-facts dt{
  color:#69675C
}

.ob-hero-facts dd{
  margin-top:.35rem;
  color:#25251F;
  font-weight:700
}

.ob-hero .hero-stage{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#202426;
  color:#F7F7F4
}

.ob-hero .hero-stage-head{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:#202426;
  color:#F7F7F4;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.04em
}

.ob-hero .hero-art{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  height:auto;
  overflow:visible;
  transform:none
}

.ob-review-sheet{
  grid-column:1;
  width:auto;
  min-width:0;
  padding:var(--space-3);
  background:#DDE9F2;
  color:#1D2D38
}

.ob-sheet-title{
  display:flex;
  min-width:0;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-2)
}

.ob-sheet-title>div{
  min-width:0
}

.ob-sheet-label{
  display:block;
  margin-bottom:var(--space-2);
  color:#536876;
  font-family:var(--font-mono);
  font-size:var(--text-xs)
}

.ob-sheet-title h2{
  font-size:var(--text-xl);
  line-height:1.2
}

.ob-sheet-state{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  padding:.4em .9em;
  border-radius:999px;
  background:#873515;
  color:#FFFFFF;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1
}

.ob-sheet-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-1);
  margin:var(--space-3) 0 0
}

.ob-sheet-grid div{
  min-width:0;
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  background:#FFFFFF;
  color:#202426
}

.ob-sheet-grid dt,
.ob-sheet-grid dd{
  min-width:0;
  overflow-wrap:anywhere
}

.ob-sheet-grid dt{
  color:#666D6A
}

.ob-sheet-grid dd{
  margin-top:.35rem;
  color:#202426;
  font-weight:700
}

.ob-stage-flow{
  display:grid;
  gap:0;
  list-style:none;
  margin:var(--space-3) 0 0;
  padding:0;
  border-radius:var(--radius-md);
  background:#E3E2F2;
  color:#29263B
}

.ob-stage-flow li{
  display:grid;
  grid-template-columns:2.5rem minmax(7.5rem,9rem) minmax(0,1fr);
  gap:var(--space-2);
  align-items:start;
  padding:var(--space-2);
  border-bottom:1px solid color-mix(in srgb,#29263B 13%,transparent)
}

.ob-stage-flow li:last-child{
  border-bottom:0
}

.ob-stage-flow span{
  color:#873515;
  font-family:var(--font-mono);
  font-weight:700
}

.ob-stage-flow strong,
.ob-stage-flow small{
  min-width:0;
  overflow-wrap:anywhere
}

.ob-stage-flow small{
  color:#5A566D
}

.ob-checklist{
  border-radius:var(--radius-md);
  background:#FCFBF8;
  color:#202426
}

.ob-check-row{
  display:grid;
  grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
  padding:var(--space-3);
  border-bottom:1px solid color-mix(in srgb,#202426 13%,transparent)
}

.ob-check-row:last-child{
  border-bottom:0
}

.ob-check-number,
.ob-step-index{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  padding:.4em .9em;
  border-radius:999px;
  background:#873515;
  color:#FFFFFF;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:700;
  line-height:1
}

.ob-check-row strong,
.ob-check-row p{
  min-width:0;
  overflow-wrap:anywhere
}

.ob-check-row p{
  color:#555B59
}

.ob-order{
  background:#DDEBE8;
  color:#17312E
}

.ob-order .c-section-head>p{
  color:#445F5B
}

.ob-order-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);
  gap:var(--space-3);
  align-items:start
}

.ob-order-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  list-style:none;
  margin:0;
  padding:0
}

.ob-order-steps li{
  display:flex;
  min-width:0;
  min-height:100%;
  flex-direction:column;
  padding:var(--space-3)
}

.ob-order-steps h3{
  margin-top:var(--space-2);
  font-size:var(--text-lg)
}

.ob-order-steps p{
  margin-top:var(--space-1)
}

.ob-payment-card{
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:#202426;
  color:#F7F7F4
}

.ob-payment-card .c-badge{
  margin-bottom:var(--space-2)
}

.ob-payment-card h3{
  font-size:var(--text-lg)
}

.ob-payment-card ul{
  display:grid;
  gap:var(--space-1);
  margin-top:var(--space-3);
  padding-left:1.25rem
}

.ob-payment-card p{
  margin-top:var(--space-3);
  color:#D4DAD7
}

.ob-payment-card .c-actions{
  margin-top:var(--space-3)
}

.ob-receipt .table-scroll{
  background:#FFFFFF;
  color:#202426
}

.ob-receipt .c-table{
  min-width:50rem
}

.ob-receipt .c-table th:first-child,
.ob-receipt .c-table td:first-child{
  width:18%
}

.ob-receipt .c-table th:nth-child(2),
.ob-receipt .c-table td:nth-child(2),
.ob-receipt .c-table th:nth-child(3),
.ob-receipt .c-table td:nth-child(3){
  width:41%;
  text-align:left;
  font-family:var(--font-body);
  font-variant-numeric:normal
}

.ob-access{
  background:#F1E2E5;
  color:#38242A
}

.ob-access .c-section-head>p{
  color:#654B52
}

.ob-access-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  align-items:stretch
}

.ob-access-card{
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
  padding:var(--space-4);
  border-radius:var(--radius-md)
}

.ob-access-card-ssh{
  background:#FFFFFF;
  color:#202426
}

.ob-access-card-vnc{
  background:#E3E2F2;
  color:#29263B
}

.ob-access-mark{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  margin-bottom:var(--space-2)
}

.ob-access-card h3{
  font-size:var(--text-lg)
}

.ob-access-card ol{
  display:grid;
  gap:var(--space-1);
  margin-top:var(--space-3)
}

.ob-access-result{
  margin-top:auto;
  padding-top:var(--space-3)
}

.ob-access-result strong{
  display:block;
  margin-bottom:var(--space-1)
}

.ob-access-card-ssh .ob-access-result{
  border-top:1px solid color-mix(in srgb,#202426 13%,transparent)
}

.ob-access-card-vnc .ob-access-result{
  border-top:1px solid color-mix(in srgb,#29263B 13%,transparent)
}

.ob-access-card-ssh .ob-access-result p{
  color:#555B59
}

.ob-access-card-vnc .ob-access-result p{
  color:#5A566D
}

.ob-terminal-section{
  background:#DDE9F2;
  color:#1D2D38
}

.ob-terminal-section .c-section-head>p{
  color:#506775
}

.ob-terminal{
  background:#202426;
  color:#F7F7F4
}

.ob-command-list{
  display:grid;
  background:#202426;
  color:#F7F7F4
}

.ob-command{
  min-width:0;
  padding:var(--space-3);
  border-bottom:1px solid rgba(255,255,255,.14)
}

.ob-command:last-child{
  border-bottom:0
}

.ob-command-head{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:var(--space-1)
}

.ob-command-head strong{
  min-width:0;
  overflow-wrap:anywhere
}

.ob-command pre{
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  background:#151819;
  color:#F7F7F4
}

.ob-copy-button{
  display:inline-flex;
  min-height:2.25rem;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  padding:.5rem .8rem;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius-sm);
  background:#2A2F31;
  color:#FFFFFF;
  font-size:var(--text-xs);
  font-weight:700;
  line-height:1
}

.ob-copy-button:hover{
  background:#3A4143;
  color:#FFFFFF
}

.ob-copy-status{
  padding:var(--space-2) var(--space-3);
  background:#873515;
  color:#FFFFFF
}

.ob-copy-status[hidden]{
  display:none
}

.ob-acceptance-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:var(--space-3);
  align-items:stretch
}

.ob-acceptance-grid .c-card{
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
  padding:var(--space-3)
}

.ob-acceptance-grid h3{
  margin-top:var(--space-2);
  font-size:var(--text-lg)
}

.ob-acceptance-grid p{
  margin-top:var(--space-1)
}

.ob-acceptance-grid .c-badge,
.ob-acceptance-grid .c-btn{
  margin-top:auto
}

.ob-help-card{
  background:#202426;
  color:#F7F7F4
}

.ob-help-card p{
  color:#D4DAD7
}

.ob-help-card .c-btn{
  margin-top:var(--space-3)
}

.ob-done{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--space-4);
  align-items:start;
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:#F3EEDD;
  color:#25251F
}

.ob-done h3{
  margin-top:var(--space-2);
  font-size:var(--text-lg)
}

.ob-done ul{
  display:grid;
  gap:var(--space-1)
}

.ob-closing{
  padding-block:var(--section-pad) var(--space-4)
}

.ob-closing .c-cta-band{
  padding-inline:clamp(1.5rem,5vw,4rem)
}

.ob-closing-actions{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2)
}

.ob-closing-actions .c-btn{
  width:100%
}

.ob-closing-actions .c-btn-ghost{
  color:#FFFFFF;
  border-color:rgba(255,255,255,.45)
}

@media (max-width:64rem){
  .ob-hero[data-hero-form="product-visual"]{
    grid-template-columns:minmax(0,1fr);
    align-items:start
  }

  .ob-hero .hero-stage,
  .ob-hero .hero-art,
  .ob-review-sheet{
    width:min(calc(100% - var(--gutter)*2),100%);
    height:auto;
    margin-inline:auto;
    overflow:visible;
    transform:none
  }

  .ob-hero .hero-stage{
    overflow:hidden
  }

  .ob-hero .hero-art{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%
  }

  .ob-review-sheet{
    grid-column:1;
    width:auto;
    margin-inline:0
  }

  .ob-order-layout{
    grid-template-columns:minmax(0,1fr)
  }
}

@media (max-width:48rem){
  .ob-hero-facts,
  .ob-sheet-grid,
  .ob-order-steps,
  .ob-access-grid,
  .ob-done{
    grid-template-columns:minmax(0,1fr)
  }

  .ob-check-row,
  .ob-stage-flow li{
    grid-template-columns:2.25rem minmax(0,1fr)
  }

  .ob-check-row>:nth-child(3),
  .ob-stage-flow li>:nth-child(3){
    grid-column:2
  }

  .ob-command-head{
    align-items:flex-start;
    flex-direction:column
  }

  .ob-copy-button{
    width:100%
  }
}

@media (max-width:42rem){
  .ob-hero[data-hero-form="product-visual"]{
    width:min(calc(100% - var(--gutter)*2),var(--container-standard));
    gap:var(--space-3)
  }

  .ob-hero .hero-copy,
  .ob-review-sheet,
  .ob-access-card,
  .ob-payment-card,
  .ob-done{
    padding:var(--space-3)
  }

  .ob-hero .hero-copy h1{
    max-width:none
  }

  .ob-hero .hero-stage-head{
    align-items:flex-start;
    flex-direction:column
  }

  .ob-closing-actions{
    width:100%
  }
}
