.support-page main{
  background:#02050b;
  color:#eef2f6
}

.support-hero[data-hero-form="gradient-motion"]{
  position:relative;
  padding-block:var(--space-9) var(--space-8);
  overflow:hidden;
  background:radial-gradient(circle at 50% 10%,#17243b 0,#080d19 42%,#02050b 76%);
  color:#eef2f6
}

.support-hero[data-hero-form="gradient-motion"]::before{
  position:absolute;
  inset:0;
  pointer-events:none;
  content:"";
  opacity:.32;
  background-image:linear-gradient(rgba(151,166,191,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(151,166,191,.08) 1px,transparent 1px);
  background-size:3rem 3rem;
  mask-image:linear-gradient(to bottom,black,transparent 82%)
}

.support-hero-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}

.support-hero-copy .c-kicker{
  align-self:center;
  margin-inline:auto
}

.support-hero-copy h1{
  max-width:58rem;
  overflow-wrap:anywhere
}

.support-hero-lead{
  max-width:48rem;
  margin-top:var(--space-5);
  color:#b8c3d2;
  font-size:var(--fs-3)
}

.support-hero-actions{
  justify-content:flex-start;
  margin-top:var(--space-5);
  margin-bottom:var(--space-5)
}

.support-hero-copy .support-hero-actions{
  justify-content:center
}

.support-hero-note{
  max-width:44rem;
  color:#9aa6b8;
  font-size:var(--fs-1)
}

.support-hero .c-btn-ghost{
  background:#080d19;
  color:#eef2f6;
  border-color:rgba(238,242,246,.38)
}

.support-hero-art{
  position:relative;
  z-index:1;
  width:min(42rem,100%);
  margin:var(--space-7) auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#11192a;
  color:#eef2f6;
  box-shadow:var(--shadow)
}

.support-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  padding:var(--space-5) var(--space-6);
  background:#0c1322;
  color:#eef2f6
}

.support-board-head>div{
  min-width:0
}

.support-board-head strong{
  display:block;
  margin-top:var(--space-2);
  font-family:var(--font-heading);
  font-size:var(--fs-3);
  line-height:1.4
}

.support-board-code{
  color:#d99467;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  letter-spacing:.08em
}

.support-board-state{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  width:fit-content;
  padding:.4em .9em;
  border-radius:999px;
  background:#a13a00;
  color:#fff;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  line-height:1;
  white-space:nowrap
}

.support-board-state::before{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:#fff;
  content:""
}

.support-board-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr)
}

.support-board-item{
  display:grid;
  grid-template-columns:2.5rem minmax(0,1fr) auto;
  gap:var(--space-4);
  align-items:start;
  min-width:0;
  padding:var(--space-5) var(--space-6);
  background:#11192a;
  color:#eef2f6
}

.support-board-item+.support-board-item{
  border-top:1px solid rgba(151,166,191,.2)
}

.support-board-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--radius-sm);
  background:#29160e;
  color:#f4b68f;
  font-family:var(--font-mono);
  font-size:var(--fs-1);
  line-height:1
}

.support-board-item>div{
  min-width:0
}

.support-board-item h2{
  font-size:var(--fs-3);
  line-height:1.35
}

.support-board-item p{
  margin-top:var(--space-2);
  color:#aeb9c9;
  font-size:var(--fs-1)
}

.support-board-output{
  align-self:center;
  padding:.4rem .55rem;
  border-radius:var(--radius-sm);
  background:#0c1322;
  color:#d6dde7;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  line-height:1.4;
  white-space:nowrap
}

.support-board-foot{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-6);
  background:#080d19;
  color:#aeb9c9
}

.support-board-foot span{
  padding:.4rem .6rem;
  border:1px solid rgba(151,166,191,.2);
  border-radius:var(--radius-sm);
  background:#11192a;
  color:#c7d0dd;
  font-size:var(--fs-0);
  line-height:1.4
}

.support-section{
  padding-block:var(--space-9);
  background:#02050b;
  color:#eef2f6
}

.support-section-soft{
  background:#080d19;
  color:#eef2f6
}

.support-section .c-section-head p{
  color:#9aa6b8
}

.guide-rows,
.diagnostic-rows{
  margin:0;
  padding:0;
  list-style:none
}

.guide-row,
.diagnostic-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-5);
  background:#11192a;
  color:#eef2f6
}

.guide-row+.guide-row,
.diagnostic-row+.diagnostic-row{
  border-top:1px solid rgba(151,166,191,.2)
}

.guide-row h3,
.diagnostic-row h3{
  font-size:var(--fs-3)
}

.guide-row p,
.diagnostic-row p{
  color:#aeb9c9
}

.guide-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--radius-sm);
  background:#a13a00;
  color:#fff;
  font-family:var(--font-mono);
  font-size:var(--fs-1);
  line-height:1
}

.connection-grid,
.cicd-grid,
.workload-grid,
.security-grid{
  align-items:stretch
}

.connection-card,
.cicd-card,
.workload-card,
.security-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  padding:var(--space-6);
  background:#11192a;
  color:#eef2f6
}

.connection-mark,
.workload-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-4)
}

.connection-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--radius-sm);
  background:#222d42;
  color:#e7edf5
}

.connection-icon svg{
  width:1.125rem;
  height:1.125rem
}

.connection-card h3,
.cicd-card h3,
.workload-card h3,
.security-card h3{
  font-size:var(--fs-4);
  overflow-wrap:anywhere
}

.connection-card>p,
.cicd-card>p,
.workload-card>p,
.security-card>p{
  margin-top:var(--space-3);
  color:#aeb9c9
}

.connection-card ul{
  margin-top:var(--space-5);
  padding-inline-start:1.2rem;
  color:#c4cedb
}

.connection-card li+li{
  margin-top:var(--space-2)
}

.card-foot{
  margin-top:auto;
  padding-top:var(--space-5);
  color:#d9966d;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  line-height:1.5
}

.cicd-card>.c-badge{
  margin-bottom:var(--space-4)
}

.support-kv{
  width:100%;
  margin:var(--space-5) 0 0
}

.support-kv>div{
  display:grid;
  grid-template-columns:minmax(7rem,.8fr) minmax(0,1.2fr);
  gap:var(--space-3);
  padding-block:var(--space-3);
  border-top:1px solid rgba(151,166,191,.2)
}

.support-kv dt,
.support-kv dd{
  min-width:0;
  overflow-wrap:anywhere
}

.support-kv dt{
  color:#8f9bae
}

.support-kv dd{
  color:#dbe2eb
}

.cicd-notice{
  margin-top:var(--space-6);
  background:#17121a;
  color:#eef2f6
}

.development-table caption{
  padding:var(--space-4);
  background:#e9edf3;
  color:#131925;
  font-family:var(--font-heading);
  font-size:var(--fs-1);
  font-weight:650;
  text-align:left
}

.development-table th,
.development-table td{
  text-align:left
}

.development-table th:first-child,
.development-table td:first-child{
  width:15%;
  min-width:8rem
}

.workload-list{
  margin-top:var(--space-5);
  padding-inline-start:1.2rem;
  color:#c4cedb
}

.workload-list li+li{
  margin-top:var(--space-3)
}

.workload-list strong{
  color:#eef2f6
}

.ticket-card{
  margin-top:var(--space-7);
  padding:var(--space-6);
  border-radius:var(--radius-md);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-6);
  background:#11192a;
  color:#eef2f6
}

.ticket-card-copy{
  min-width:0
}

.ticket-card-copy h3{
  font-size:var(--fs-4)
}

.ticket-card-copy p{
  margin-top:var(--space-3);
  color:#aeb9c9
}

.ticket-checklist{
  margin:0;
  padding:0;
  list-style:none
}

.ticket-checklist li{
  position:relative;
  padding:.65rem 0 .65rem 1.6rem;
  border-bottom:1px solid rgba(151,166,191,.2);
  color:#cbd4df
}

.ticket-checklist li::before{
  position:absolute;
  left:0;
  top:1.05rem;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:#c45613;
  content:""
}

.ticket-actions{
  grid-column:1/-1;
  justify-content:flex-start;
  margin-top:var(--space-3)
}

.ticket-actions .c-btn-ghost{
  background:transparent;
  color:#eef2f6;
  border-color:rgba(238,242,246,.38)
}

.sla-panel{
  display:grid;
  grid-template-columns:minmax(16rem,.72fr) minmax(0,1.28fr);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#11192a;
  color:#eef2f6
}

.sla-summary{
  min-width:0;
  padding:var(--space-7);
  background:#29160e;
  color:#f7eee8
}

.sla-summary .c-kicker{
  background:#a13a00;
  color:#fff
}

.sla-value{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-top:var(--space-5)
}

.sla-value strong{
  font-family:var(--font-mono);
  font-size:clamp(2.5rem,8cqi,4rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

.sla-value span{
  color:#edc7af;
  font-family:var(--font-heading);
  font-size:var(--fs-3)
}

.sla-summary p{
  margin-top:var(--space-5);
  color:#dfc8ba
}

.sla-ledger{
  min-width:0;
  padding:var(--space-7);
  background:#11192a;
  color:#eef2f6
}

.sla-ledger-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-5)
}

.sla-ledger-head>div{
  min-width:0
}

.sla-ledger-head h2{
  font-size:var(--fs-5)
}

.sla-ledger-head p{
  margin-top:var(--space-3);
  color:#9aa6b8
}

.sla-status{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  width:fit-content;
  padding:.4em .9em;
  border-radius:999px;
  background:#173328;
  color:#a7e4c9;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  line-height:1;
  white-space:nowrap
}

.sla-status::before{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:#53b68c;
  content:""
}

.sla-periods{
  display:grid;
  gap:var(--space-4);
  margin-top:var(--space-6)
}

.sla-period{
  display:grid;
  grid-template-columns:minmax(8rem,.8fr) minmax(8rem,1.2fr) minmax(8rem,1fr);
  gap:var(--space-4);
  align-items:center;
  min-width:0;
  padding:var(--space-4);
  background:#0c1322;
  color:#eef2f6
}

.sla-period>div,
.sla-period small{
  min-width:0;
  overflow-wrap:anywhere
}

.sla-period strong,
.sla-period span{
  display:block
}

.sla-period>div>span{
  margin-top:var(--space-1);
  color:#7f8ca0;
  font-size:var(--fs-0)
}

.sla-period small{
  color:#9aa6b8
}

.sla-track{
  position:relative;
  height:.5rem;
  overflow:hidden;
  border-radius:999px;
  background:#222d42;
  color:#eef2f6
}

.sla-track i{
  display:block;
  width:99.9%;
  height:100%;
  border-radius:999px;
  background:#53b68c
}

.sla-credit{
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid rgba(151,166,191,.2)
}

.sla-credit strong{
  font-family:var(--font-heading);
  font-size:var(--fs-3)
}

.sla-credit p{
  margin-top:var(--space-3);
  color:#9aa6b8
}

.security-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  margin-bottom:var(--space-4);
  border-radius:var(--radius-sm);
  background:#29160e;
  color:#f4b68f;
  font-family:var(--font-mono);
  font-size:var(--fs-1);
  line-height:1
}

.support-closing-section{
  padding-block:var(--space-9);
  background:#02050b;
  color:#eef2f6
}

.support-closing{
  padding:var(--space-7);
  background:#0c1322;
  color:#eef2f6
}

.support-closing>div:first-child{
  max-width:45rem
}

.support-closing h2{
  font-size:var(--fs-5)
}

.support-closing p{
  color:#9aa6b8
}

.support-closing-actions{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
  min-width:min(100%,15rem)
}

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

.support-closing-actions .c-btn-ghost{
  background:transparent;
  color:#eef2f6;
  border-color:rgba(238,242,246,.38)
}

@media(max-width:64rem){
  .support-hero[data-hero-form="gradient-motion"]{
    padding-block:var(--space-8)
  }

  .sla-panel{
    grid-template-columns:minmax(0,1fr)
  }

  .ticket-card{
    grid-template-columns:minmax(0,1fr)
  }

  .ticket-actions{
    grid-column:auto
  }

  .sla-ledger-head{
    flex-direction:column
  }
}

@media(max-width:42rem){
  .support-hero[data-hero-form="gradient-motion"]{
    padding-block:var(--space-7)
  }

  .support-hero-art{
    width:min(calc(100% - var(--gutter)*2),100%);
    margin-inline:auto;
    height:auto;
    overflow:hidden;
    transform:none;
    grid-template-columns:minmax(0,1fr)
  }

  .support-board-head{
    align-items:flex-start;
    flex-direction:column;
    padding:var(--space-5)
  }

  .support-board-item{
    grid-template-columns:2.25rem minmax(0,1fr);
    padding:var(--space-5)
  }

  .support-board-output{
    grid-column:2;
    justify-self:start;
    white-space:normal
  }

  .support-board-foot{
    padding:var(--space-5)
  }

  .support-section,
  .support-closing-section{
    padding-block:var(--space-8)
  }

  .guide-row,
  .diagnostic-row{
    grid-template-columns:2.25rem minmax(0,1fr)
  }

  .guide-row>:nth-child(3),
  .diagnostic-row>:nth-child(3){
    grid-column:2
  }

  .support-kv>div{
    grid-template-columns:minmax(0,1fr)
  }

  .ticket-card,
  .sla-summary,
  .sla-ledger,
  .support-closing{
    padding:var(--space-5)
  }

  .sla-period{
    grid-template-columns:minmax(0,1fr)
  }

  .support-closing-actions{
    width:100%;
    align-items:stretch
  }
}