.showcase-page main{
  background:#FCFCFD;
  color:#232938
}

.showcase-hero[data-hero-form="centered-text"]{
  padding-block:var(--hero-pad) var(--space-7);
  background:#FFFFFF;
  color:#232938
}

.showcase-hero[data-hero-form="centered-text"] .showcase-hero-copy{
  width:min(100%,52rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-inline:auto;
  text-align:center
}

.showcase-hero-copy .c-kicker{
  margin-bottom:var(--space-2)
}

.showcase-hero-copy h1{
  max-width:15ch;
  color:#171D2C
}

.showcase-hero-lead{
  max-width:46rem;
  margin-top:var(--space-3);
  color:#5D6574;
  font-size:var(--text-md)
}

.showcase-hero-actions{
  justify-content:center;
  margin-top:var(--space-4)
}

.showcase-hero-note{
  max-width:42rem;
  margin-top:var(--space-2);
  color:#5D6574;
  font-size:var(--text-sm)
}

.showcase-ruler{
  width:min(100%,42rem);
  margin:var(--space-5) auto 0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#171A24;
  color:#FFFFFF;
  box-shadow:var(--shadow-float)
}

.showcase-ruler-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:#171A24;
  color:#FFFFFF
}

.showcase-ruler-head>div{
  min-width:0;
  display:grid;
  gap:.45rem;
  text-align:left
}

.showcase-ruler-head strong{
  color:#FFFFFF;
  font-family:var(--font-heading);
  font-size:var(--text-lg);
  line-height:1.3
}

.showcase-ruler-label{
  color:#B9C0CB;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.08em
}

.showcase-ruler-state{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  flex:0 0 auto;
  padding:.4em .9em;
  border-radius:999px;
  background:#EAF0E8;
  color:#243027;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1
}

.showcase-ruler-track{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.4rem;
  padding:0 var(--space-4)
}

.showcase-ruler-track span{
  height:.35rem;
  border-radius:999px;
  background:#007F86;
  color:#FFFFFF
}

.showcase-ruler-track span:nth-child(2){
  background:#F6F0E8;
  color:#332A21
}

.showcase-ruler-track span:nth-child(3){
  background:#F3E8E2;
  color:#3A2824
}

.showcase-ruler-track span:nth-child(4){
  background:#EEEAF3;
  color:#2D2838
}

.showcase-ruler-track span:nth-child(5){
  background:#EAF0E8;
  color:#243027
}

.showcase-ruler-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2);
  padding:var(--space-4)
}

.showcase-ruler-cell{
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:#242936;
  color:#FFFFFF;
  text-align:left
}

.showcase-ruler-cell>span{
  display:block;
  margin-bottom:var(--space-1);
  color:#8ED2D0;
  font-family:var(--font-mono);
  font-size:var(--text-xs)
}

.showcase-ruler-cell strong{
  display:block;
  color:#FFFFFF;
  font-size:var(--text-base);
  line-height:1.35
}

.showcase-ruler-cell p{
  margin-top:var(--space-1);
  color:#C8CED8;
  font-size:var(--text-sm)
}

.showcase-overview,
.showcase-cicd,
.showcase-configs,
.showcase-record,
.showcase-closing{
  padding-block:var(--space-7)
}

.showcase-ios,
.showcase-remote,
.showcase-mlx,
.showcase-regions{
  padding-block:var(--space-7)
}

.showcase-overview .c-kicker,
.showcase-ios .c-kicker,
.showcase-cicd .c-kicker,
.showcase-mlx .c-kicker,
.showcase-configs .c-kicker,
.showcase-regions .c-kicker,
.showcase-record .c-kicker{
  margin-bottom:var(--space-2)
}

.showcase-role-card{
  gap:var(--space-2)
}

.showcase-role-card .c-btn{
  margin-top:var(--space-3)
}

.showcase-card-mark .c-icon-well{
  background:#FFFFFF;
  color:#0A536B
}

.showcase-plain-list{
  display:grid;
  gap:.45rem;
  margin:0;
  padding-left:1.15rem;
  color:inherit
}

.showcase-plain-list li{
  color:inherit;
  font-size:var(--text-sm)
}

.showcase-flow-list{
  display:grid;
  margin:0;
  padding:0;
  list-style:none
}

.showcase-flow-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-top:1px solid #D9CFC8;
  background:#F3E8E2;
  color:#3A2824
}

.showcase-flow-row:last-child{
  border-bottom:1px solid #D9CFC8
}

.showcase-flow-row>*{
  min-width:0
}

.showcase-flow-index{
  width:2.5rem;
  height:2.5rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0A536B;
  color:#FFFFFF;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1
}

.showcase-flow-row>div{
  display:grid;
  gap:.45rem
}

.showcase-flow-row h3{
  color:#3A2824
}

.showcase-flow-row p{
  color:#3A2824
}

.showcase-flow-tag{
  color:#65504A;
  font-family:var(--font-mono);
  font-size:var(--text-xs)
}

.showcase-cycle-layout{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:var(--space-3);
  align-items:start
}

.showcase-cycle-card{
  min-width:0
}

.showcase-cycle-card h3{
  margin-bottom:var(--space-3)
}

.showcase-ledger{
  display:grid;
  margin:0
}

.showcase-ledger>div{
  display:grid;
  grid-template-columns:minmax(7rem,.55fr) minmax(0,1fr);
  gap:var(--space-2);
  padding:var(--space-2) 0;
  border-top:1px solid #DDE1E8
}

.showcase-ledger dt,
.showcase-ledger dd{
  min-width:0;
  overflow-wrap:anywhere
}

.showcase-ledger dd{
  color:#5D6574;
  font-size:var(--text-sm)
}

.showcase-cycle-canvas{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:#171A24;
  color:#FFFFFF
}

.showcase-cycle-stage{
  display:grid;
  grid-template-columns:minmax(5.5rem,auto) minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:#242936;
  color:#FFFFFF
}

.showcase-cycle-stage>div{
  min-width:0
}

.showcase-cycle-stage strong{
  color:#FFFFFF;
  font-size:var(--text-base)
}

.showcase-cycle-stage p{
  margin-top:var(--space-1);
  color:#C8CED8;
  font-size:var(--text-sm)
}

.showcase-cycle-code{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:.4em .9em;
  border-radius:999px;
  background:#EAF0E8;
  color:#243027;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1
}

.showcase-cycle-note,
.showcase-region-note{
  margin-top:var(--space-4)
}

.showcase-cycle-note svg,
.showcase-region-note svg{
  width:1.25rem;
  height:1.25rem;
  flex:0 0 auto
}

.showcase-remote{
  background:#171A24;
  color:#FFFFFF
}

.showcase-dark-head h2,
.showcase-dark-head p{
  color:#FFFFFF
}

.showcase-dark-head>p{
  color:#C8CED8
}

.showcase-dark-kicker{
  background:#EAF0E8;
  color:#243027
}

.showcase-dark-kicker .c-kicker-dot{
  background:#171A24
}

.showcase-remote-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.showcase-dark-card{
  min-width:0;
  display:flex;
  height:100%;
  flex-direction:column;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:#242936;
  color:#FFFFFF
}

.showcase-dark-card h3{
  margin-top:var(--space-2);
  color:#FFFFFF
}

.showcase-dark-card p{
  margin-top:var(--space-1);
  color:#C8CED8
}

.showcase-dark-number{
  color:#8ED2D0;
  font-family:var(--font-mono);
  font-size:var(--text-sm)
}

.showcase-dark-meta{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  color:#AEB8C5;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1.45
}

.showcase-mlx-card{
  display:flex;
  height:100%;
  flex-direction:column;
  gap:var(--space-2);
  background:#FFFFFF;
  color:#232938
}

.showcase-mlx-card h3{
  color:#171D2C
}

.showcase-mlx-card p{
  color:#5D6574
}

.showcase-mlx-code{
  width:fit-content;
  color:#0A536B;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.08em
}

.showcase-config-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.showcase-config-card{
  gap:var(--space-2)
}

.showcase-config-card>.c-badge{
  align-self:flex-start
}

.showcase-specs{
  width:100%;
  display:grid;
  margin:var(--space-2) 0 0
}

.showcase-specs>div{
  display:grid;
  grid-template-columns:minmax(5rem,.55fr) minmax(0,1fr);
  gap:var(--space-2);
  padding:.75rem 0;
  border-top:1px solid color-mix(in srgb,currentColor 15%,transparent)
}

.showcase-specs dt,
.showcase-specs dd{
  min-width:0;
  overflow-wrap:anywhere
}

.showcase-specs dd{
  text-align:right;
  font-family:var(--font-mono);
  font-size:var(--text-sm)
}

.showcase-fit{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:var(--space-3);
  padding:.4em .9em;
  border-radius:999px;
  background:#FFFFFF;
  color:#303746;
  font-size:var(--text-xs);
  line-height:1.35
}

.showcase-config-actions{
  justify-content:flex-start;
  margin-top:var(--space-4)
}

.showcase-region-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
  gap:var(--space-3);
  align-items:stretch
}

.showcase-region-card{
  display:flex;
  height:100%;
  flex-direction:column;
  background:#FFFFFF;
  color:#232938
}

.showcase-region-card h3{
  margin-top:var(--space-2);
  color:#171D2C
}

.showcase-region-card p{
  margin-top:var(--space-1);
  color:#5D6574
}

.showcase-region-code{
  color:#0A536B;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.08em
}

.showcase-region-pill{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  width:fit-content;
  margin-top:var(--space-3);
  padding:.4em .9em;
  border-radius:999px;
  background:#EAF0E8;
  color:#243027;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1
}

.showcase-region-pill::before{
  width:.4rem;
  height:.4rem;
  flex:0 0 auto;
  border-radius:50%;
  background:#0A536B;
  content:""
}

.showcase-record-table{
  min-width:50rem
}

.showcase-record-table caption{
  padding:0 0 var(--space-2);
  color:#5D6574;
  font-size:var(--text-sm);
  text-align:left
}

.showcase-record-table th:nth-child(1),
.showcase-record-table td:nth-child(1){
  width:18%
}

.showcase-record-table th:nth-child(2),
.showcase-record-table td:nth-child(2){
  width:50%
}

.showcase-record-table th:nth-child(3),
.showcase-record-table td:nth-child(3){
  width:32%
}

.showcase-record-guidance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  align-items:stretch;
  margin-top:var(--space-4)
}

.showcase-record-guidance .c-card{
  display:flex;
  height:100%;
  flex-direction:column
}

.showcase-record-guidance p{
  margin-top:var(--space-1)
}

.showcase-closing{
  padding-top:var(--space-6);
  padding-bottom:var(--space-7)
}

.showcase-closing .c-cta-band{
  padding-inline:var(--space-5)
}

.showcase-closing-kicker{
  display:block;
  margin-bottom:var(--space-2);
  color:#8ED2D0;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.07em
}

.showcase-closing .c-cta-band p{
  max-width:43rem;
  margin-top:var(--space-2);
  color:#C8CED8
}

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

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

.showcase-closing-actions .c-btn-ghost{
  border-color:color-mix(in srgb,#FFFFFF 35%,transparent);
  color:#FFFFFF
}

@media(max-width:48rem){
  .showcase-ruler-grid,
  .showcase-config-grid,
  .showcase-remote-grid,
  .showcase-record-guidance{
    grid-template-columns:minmax(0,1fr)
  }

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

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

  .showcase-flow-row>:nth-child(3){
    grid-column:2
  }

  .showcase-ruler-head{
    align-items:flex-start
  }

  .showcase-ruler-grid{
    padding:var(--space-3)
  }
}

@media(max-width:42rem){
  .showcase-hero[data-hero-form="centered-text"]{
    padding-block:var(--hero-pad) var(--space-6)
  }

  .showcase-hero-copy h1{
    max-width:none;
    font-size:clamp(2.35rem,11vw,3.35rem)
  }

  .showcase-ruler{
    width:min(calc(100% - var(--gutter)*2),100%);
    margin-inline:auto;
    height:auto;
    overflow:hidden;
    transform:none
  }

  .showcase-ruler-head{
    display:grid;
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-ruler-state{
    justify-self:start
  }

  .showcase-ruler-track{
    padding-inline:var(--space-3)
  }

  .showcase-cycle-stage{
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-ledger>div,
  .showcase-specs>div{
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-specs dd{
    text-align:left
  }

  .showcase-config-actions{
    justify-content:flex-start
  }

  .showcase-config-actions .c-btn{
    width:100%
  }

  .showcase-closing .c-cta-band{
    padding-inline:var(--space-3)
  }
}

@media(max-width:24.375rem){
  .showcase-ruler-head,
  .showcase-ruler-grid,
  .showcase-cycle-canvas,
  .showcase-dark-card{
    padding:var(--space-3)
  }

  .showcase-flow-row{
    gap:var(--space-2)
  }
}