@layer components {
/* ─── Steps section (how to order) ──────────── */
.tm-section-steps{
  background:var(--color-surface-alt);
  padding:var(--space-8) 0;
}
.tm-section-steps__title{
  font-size:var(--text-h1);
  font-weight:700;
  margin-bottom:var(--space-4);
  max-width:var(--content-width);
}
.tm-section-steps__subtitle{
  font-size:var(--text-body);
  line-height:1.7;
  color:var(--color-ink-secondary);
  margin-bottom:var(--space-7);
  max-width:var(--content-width);
}
/* Steps — frosted glass card in header/hero style (Frosted Terminal Pill tokens) */
.tm-steps{
  display:flex;
  gap:0;
  counter-reset:step;
  position:relative;
  background:hsla(0,0%,100%,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(26,26,26,.08);
  border-radius:var(--radius-md);
  box-shadow:0 4px 20px rgba(26,26,26,.08);
  padding:var(--space-6) var(--space-5);
}
@supports not (backdrop-filter:blur(12px)){
  .tm-steps{ background:var(--color-surface-alt); border-color:var(--color-border); }
}
.tm-steps::before{
  content:'';
  position:absolute;
  top:calc(var(--space-6) + 15px);
  left:calc(var(--space-5) + (100% - var(--space-5) - var(--space-5)) / 12);
  right:calc(var(--space-5) + (100% - var(--space-5) - var(--space-5)) / 12);
  height:2px;
  background:var(--color-border);
  z-index:0;
}
.tm-steps__item{
  flex:1;
  text-align:center;
  position:relative;
  z-index:1;
  padding:0 var(--space-3);
}
.tm-steps__num{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--color-brand-to);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:var(--text-body-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-3);
  position:relative;
  z-index:2;
}
.tm-steps__title{
  font-size:var(--text-body-lg);
  font-weight:700;
  line-height:1.4;
  margin-bottom:var(--space-2);
}
.tm-steps__desc{
  font-size:var(--text-body-sm);
  color:var(--color-ink-secondary);
  line-height:1.6;
  margin:0;
}
@media (max-width:767px){
  .tm-steps{
    flex-direction:column;
    gap:0;
    padding:var(--space-5) var(--space-6);
  }
  .tm-steps::before{
    top:var(--space-5);
    bottom:var(--space-5);
    left:calc(var(--space-6) - 11px);
    right:auto;
    width:2px;
    height:auto;
  }
  .tm-steps__item{
    text-align:left;
    padding:0 0 var(--space-6);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .tm-steps__item:last-child{
    padding-bottom:0;
  }
.tm-steps__num{
    margin:0 0 var(--space-2);
    position:absolute;
    left:calc(-1 * var(--space-6) + 6px);
    top:0;
  }
  .tm-section-steps__title{
    font-size:1.375rem;
  }
}
}