.home-hero__copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-1)
}

.home-hero__copy>p{
  max-width:42rem;
  color:var(--color-muted)
}

.home-hero__mark{
  color:var(--color-primary);
  background:linear-gradient(transparent 76%,var(--color-accent-soft) 0);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.home-hero__copy .c-actions{
  margin-top:var(--space-2)
}

.home-hero__copy .c-btn svg,
.plan-ticket .c-btn svg,
.migration__copy .c-btn svg,
.home-endcap .c-btn svg{
  width:1rem;
  height:1rem;
  flex:0 0 auto
}

.home-ticket{
  display:flex;
  min-width:0;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-2)
}

.home-price{
  display:flex;
  min-width:0;
  align-items:baseline;
  gap:.4rem;
  color:var(--color-ink);
  font-family:var(--font-heading);
  font-weight:900;
  line-height:1
}

.home-price span{
  font-size:var(--fs-5);
  font-variant-numeric:tabular-nums
}

.home-price small{
  color:var(--color-muted);
  font-family:var(--font-body)
}

.home-plan-link{
  margin-top:var(--space-1);
  color:var(--color-primary-deep);
  font-size:var(--fs-2);
  font-weight:750;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);
  text-underline-offset:.25em
}

.home-stage{
  position:relative;
  isolation:isolate
}

.home-stage::before{
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:var(--radius-md);
  background:var(--color-light);
  content:""
}

.stage-label{
  position:absolute;
  left:1rem;
  top:1rem;
  max-width:calc(100% - 2rem);
  padding:.55rem .7rem;
  border-radius:var(--radius-sm);
  background:var(--color-accent);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  font-weight:800;
  line-height:1.25
}

.stage-ticket{
  position:absolute;
  right:1rem;
  top:1rem;
  display:grid;
  width:min(13rem,47%);
  min-width:0;
  gap:.5rem;
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-soft)
}

.stage-ticket b{
  font-family:var(--font-mono);
  font-size:var(--fs-1);
  line-height:1.35;
  overflow-wrap:anywhere
}

.stage-ticket span{
  color:var(--color-muted);
  font-size:var(--fs-0);
  line-height:1.5
}

.home-workflow{
  background:var(--color-surface);
  color:var(--color-ink)
}

.workflow{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding-block:var(--space-3)
}

.workflow h2{
  flex:0 0 auto;
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  letter-spacing:.1em
}

.workflow__tags{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.65rem
}

.workflow__tags span{
  padding:.45rem .7rem;
  border-radius:var(--radius-sm);
  background:var(--color-soft);
  color:var(--color-muted);
  font-family:var(--font-heading);
  font-size:var(--fs-2);
  font-weight:750;
  line-height:1.35
}

.home-heading-stack,
.home-scheduling__copy,
.chart__head,
.plan-ticket,
.migration__copy,
.home-faq-copy,
.home-endcap__copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-1)
}

.home-connect-section{
  background:var(--color-ink);
  color:#effff9
}

.home-connect-section .page-section__head h2,
.home-connect-section .page-section__head p{
  color:#effff9
}

.home-connect-section .page-section__head>p{
  color:#b8cbc6
}

.home-connect-section .page-kicker{
  color:var(--color-accent)
}

.connect{
  display:grid;
  grid-template-columns:minmax(16rem,.72fr) minmax(0,1.28fr);
  align-items:stretch;
  gap:var(--space-4)
}

.steps{
  display:grid;
  min-width:0;
  align-content:start
}

.step{
  display:grid;
  min-width:0;
  grid-template-columns:2.5rem minmax(0,1fr);
  gap:var(--space-2);
  padding:1.1rem 0;
  border-bottom:1px solid var(--color-line-dark);
  background:transparent;
  color:#effff9
}

.step--active{
  padding-inline:var(--space-2);
  border-left:3px solid var(--color-accent);
  background:#102d28;
  color:#effff9
}

.step em{
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:var(--fs-1);
  font-style:normal
}

.step>div{
  display:grid;
  min-width:0;
  gap:.5rem
}

.step h3{
  color:#effff9;
  font-size:var(--fs-3)
}

.step p{
  color:#b8cbc6;
  font-size:var(--fs-2)
}

.step small{
  color:#91aaa4;
  font-family:var(--font-mono);
  overflow-wrap:anywhere
}

.terminal{
  display:flex;
  min-width:0;
  min-height:27rem;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:var(--color-terminal);
  color:#dcece7
}

.terminal-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:#1a2422;
  color:#dcece7
}

.terminal-tabs span{
  min-width:0;
  padding:.8rem;
  color:#dcece7;
  font-size:var(--fs-1);
  font-weight:800;
  line-height:1.35;
  text-align:center;
  overflow-wrap:anywhere
}

.terminal-tabs span:first-child{
  background:var(--color-accent);
  color:var(--color-ink)
}

.terminal pre{
  flex:1;
  max-width:100%;
  margin:0;
  padding:var(--space-3);
  overflow:auto;
  color:#dcece7
}

.terminal code{
  white-space:pre
}

.prompt,
.ok{
  color:var(--color-accent)
}

.dim{
  color:#91aaa4
}

.terminal-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-1);
  padding:var(--space-2) var(--space-3);
  border-top:1px solid var(--color-line-dark);
  background:#1a2422;
  color:#b8cbc6;
  font-family:var(--font-mono);
  font-size:var(--fs-0)
}

.home-connect-note{
  margin-top:var(--space-4);
  background:var(--color-accent);
  color:var(--color-ink)
}

.home-connect-note p{
  color:var(--color-ink)
}

.home-scheduling{
  align-items:stretch
}

.home-scheduling__copy{
  justify-content:center
}

.home-scheduling__copy p{
  color:var(--color-muted)
}

.home-scheduling__copy .c-badge{
  margin-top:var(--space-2)
}

.chart{
  min-width:0;
  overflow:hidden;
  padding:0;
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-soft)
}

.chart-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--color-light);
  color:var(--color-ink)
}

.chart-tabs span{
  min-width:0;
  padding:var(--space-2);
  color:var(--color-ink);
  font-size:var(--fs-1);
  font-weight:800;
  line-height:1.4;
  text-align:center;
  overflow-wrap:anywhere
}

.chart-tabs span:last-child{
  background:var(--color-ink);
  color:#fff
}

.chart__head{
  padding:var(--space-3) var(--space-3) var(--space-2)
}

.chart__head p{
  color:var(--color-muted)
}

.bar{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(5rem,6.5rem) minmax(0,1fr) minmax(2.5rem,auto);
  align-items:center;
  gap:.75rem;
  padding-inline:var(--space-3);
  margin-top:var(--space-2);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:var(--fs-1)
}

.bar span,
.bar b{
  min-width:0;
  overflow-wrap:anywhere
}

.bar-track{
  min-width:0;
  height:1.7rem;
  background:var(--color-soft)
}

.bar-fill{
  height:100%;
  transform-origin:left;
  animation:home-grow .8s var(--ease) both;
  background:var(--color-ink)
}

.bar-fill--local{width:86%}
.bar-fill--shared{width:60%}
.bar-fill--dedicated{width:29%;background:var(--color-accent)}

.chart-legend{
  display:grid;
  gap:var(--space-1);
  margin:var(--space-3);
  padding-top:var(--space-2);
  border-top:1px solid var(--color-line)
}

.chart-legend div{
  display:grid;
  grid-template-columns:minmax(4rem,auto) minmax(0,1fr);
  gap:var(--space-1)
}

.chart-legend dt{
  color:var(--color-primary-deep);
  font-family:var(--font-mono);
  font-weight:800
}

.chart-legend dd{
  color:var(--color-muted)
}

@keyframes home-grow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

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

.plan-ticket{
  min-width:0
}

.plan-ticket__head{
  display:flex;
  min-width:0;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-1);
  width:100%
}

.plan-ticket__code{
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  overflow-wrap:anywhere
}

.plan-ticket>h3{
  margin-top:var(--space-1)
}

.plan-ticket__fit{
  color:var(--color-muted)
}

.c-price-card--featured .plan-ticket__fit{
  color:#31423e
}

.price-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  margin-block:var(--space-2)
}

.price-row div{
  min-width:0;
  padding:.75rem;
  border-right:1px solid var(--color-line)
}

.price-row div:last-child{
  border-right:0
}

.price-row small,
.price-row b{
  display:block;
  overflow-wrap:anywhere
}

.price-row small{
  color:var(--color-muted)
}

.price-row b{
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:var(--fs-2);
  font-variant-numeric:tabular-nums
}

.plan-ticket .c-btn{
  margin-top:var(--space-1)
}

.plan-footnote{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--color-line)
}

.plan-footnote p{
  max-width:50rem;
  color:var(--color-muted)
}

.plan-footnote a{
  flex:0 0 auto;
  color:var(--color-primary-deep);
  font-size:var(--fs-2);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:.25em
}

.region-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:start;
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-soft)
}

.region{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-1);
  padding:var(--space-3)
}

.region+.region{
  border-left:1px solid var(--color-line)
}

.region code{
  color:var(--color-subtle)
}

.region h3{
  font-size:var(--fs-4)
}

.region p{
  color:var(--color-muted);
  font-size:var(--fs-2)
}

.stock{
  display:flex;
  align-items:center;
  gap:.45rem;
  width:fit-content;
  margin-top:var(--space-1);
  color:var(--color-primary-deep);
  font-family:var(--font-mono);
  font-size:var(--fs-0)
}

.stock::before{
  width:.5rem;
  height:.5rem;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--color-accent);
  content:""
}

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

.region-note>div{
  display:grid;
  min-width:0;
  gap:var(--space-1);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:var(--color-light);
  color:var(--color-ink)
}

.region-note p{
  color:var(--color-muted)
}

.home-sla-section{
  background:var(--color-ink);
  color:#effff9
}

.sla{
  display:grid;
  grid-template-columns:minmax(15rem,17rem) minmax(0,1fr);
  gap:var(--space-4);
  color:#effff9
}

.sla-summary{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:var(--space-1);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:var(--color-accent);
  color:var(--color-ink)
}

.sla-summary .page-kicker,
.sla-summary p{
  color:var(--color-ink)
}

.sla-number{
  max-width:100%;
  color:var(--color-ink);
  font-family:var(--font-heading);
  font-size: clamp(2.7rem,5cqi,4.25rem);
  font-weight:900;
  line-height:1;
  overflow-wrap:anywhere
}

.sla-detail{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-1)
}

.sla-detail h2{
  color:#effff9
}

.sla-detail>p{
  color:#b8cbc6
}

.sla-strip{
  display:grid;
  grid-template-columns:repeat(30,minmax(2px,1fr));
  gap:.25rem;
  width:100%;
  margin-block:var(--space-2)
}

.sla-strip i{
  min-width:0;
  height:1.65rem;
  border-radius:var(--radius-sm);
  background:var(--color-accent)
}

.sla-strip i:nth-child(11n){
  background:#8bcfba
}

.sla-terms{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2);
  width:100%
}

.sla-terms>div{
  display:grid;
  min-width:0;
  gap:var(--space-1);
  padding:var(--space-2);
  border-radius:var(--radius-md);
  background:#102d28;
  color:#effff9
}

.sla-terms strong{
  color:var(--color-accent)
}

.sla-terms p{
  color:#b8cbc6;
  font-size:var(--fs-2)
}

.sla-detail .c-btn--ghost{
  margin-top:var(--space-2);
  color:#effff9;
  border-color:color-mix(in srgb,currentColor 45%,transparent)
}

.workload-grid{
  align-items:start
}

.work-card{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-1);
  padding-top:3.75rem;
  background:var(--color-surface);
  color:var(--color-ink)
}

.work-card__icon{
  display:grid;
  width:2.5rem;
  height:2.5rem;
  place-items:center;
  border-radius:var(--radius-sm);
  background:var(--color-light);
  color:var(--color-primary-deep)
}

.work-card__icon svg{
  width:1.3rem;
  height:1.3rem
}

.sticker{
  position:absolute;
  right:1rem;
  top:-1rem;
  display:grid;
  place-items:center;
  width:4.5rem;
  height:4.5rem;
  max-width:58%;
  padding:.5rem;
  clip-path:polygon(50% 0,62% 15%,80% 7%,83% 25%,100% 31%,88% 47%,100% 61%,81% 67%,78% 87%,59% 78%,48% 100%,38% 80%,18% 91%,18% 70%,0 63%,12% 48%,0 34%,20% 27%,22% 7%,40% 16%);
  overflow:hidden;
  background:var(--color-accent);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:900;
  line-height:1.1;
  text-align:center
}

.work-card__recommend{
  color:var(--color-primary-deep);
  font-family:var(--font-mono);
  font-size:var(--fs-2);
  font-weight:800
}

.work-card>p:not(.work-card__recommend){
  color:var(--color-muted)
}

.work-card dl{
  display:grid;
  gap:var(--space-1);
  width:100%;
  margin:var(--space-1) 0 0;
  padding-top:var(--space-2);
  border-top:1px solid var(--color-line)
}

.work-card dl div{
  display:grid;
  min-width:0;
  gap:.4rem
}

.work-card dt{
  color:var(--color-ink);
  font-family:var(--font-mono);
  letter-spacing:.06em
}

.work-card dd{
  color:var(--color-ink);
  overflow-wrap:anywhere
}

.migration{
  display:grid;
  grid-template-columns:minmax(15rem,17rem) minmax(0,1fr);
  align-items:start;
  gap:var(--space-4)
}

.migration__copy p{
  color:var(--color-muted)
}

.migration__copy .c-btn{
  margin-top:var(--space-2)
}

.path{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  border-radius:var(--radius-md);
  background:var(--color-light);
  color:var(--color-ink)
}

.path article{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-1);
  padding:var(--space-3)
}

.path article+article{
  border-left:1px solid var(--color-line)
}

.path code{
  color:var(--color-primary-deep)
}

.path article>p{
  color:var(--color-muted)
}

.path dl{
  display:grid;
  gap:var(--space-1);
  width:100%;
  margin:var(--space-1) 0 0
}

.path dl div{
  display:grid;
  min-width:0;
  gap:.4rem
}

.path dt{
  color:var(--color-ink);
  font-family:var(--font-mono)
}

.path dd{
  color:var(--color-ink);
  overflow-wrap:anywhere
}

.home-faq-copy{
  justify-content:flex-start
}

.home-faq-copy p{
  color:var(--color-muted)
}

.home-faq-copy .c-btn{
  margin-top:var(--space-2)
}

.home-endcap-section{
  background:var(--color-accent);
  color:var(--color-ink)
}

.home-endcap{
  background:var(--color-ink);
  color:#effff9
}

.home-endcap h2{
  color:#effff9
}

.home-endcap p{
  color:#b8cbc6
}

.home-endcap .page-kicker{
  color:var(--color-accent)
}

.home-endcap__actions{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:stretch;
  gap:.625rem
}

.home-endcap__actions .c-btn{
  width:100%
}

.home-endcap__actions .c-btn--secondary{
  background:var(--color-surface);
  color:var(--color-ink);
  border-color:var(--color-surface)
}

.home-endcap__actions .c-btn--ghost{
  color:#effff9;
  border-color:color-mix(in srgb,currentColor 45%,transparent)
}

@media (max-width:64rem){
  .connect,
  .migration{
    grid-template-columns:1fr
  }

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

  .region+.region{
    border-left:0
  }

  .region:nth-child(even){
    border-left:1px solid var(--color-line)
  }

  .region:nth-child(n+3){
    border-top:1px solid var(--color-line)
  }

  .region:last-child{
    grid-column:1 / -1
  }

  .sla{
    grid-template-columns:minmax(13rem,.6fr) minmax(0,1.4fr)
  }

  .sla-strip{
    grid-template-columns:repeat(18,minmax(2px,1fr))
  }

  .sla-terms{
    grid-template-columns:1fr
  }

  .path{
    grid-template-columns:1fr
  }

  .path article+article{
    border-top:1px solid var(--color-line);
    border-left:0
  }
}

@media (max-width:48rem){
  .plan-board,
  .sla{
    grid-template-columns:1fr
  }

  .workflow{
    align-items:flex-start;
    flex-direction:column
  }

  .workflow__tags{
    justify-content:flex-start
  }

  .plan-footnote{
    align-items:flex-start;
    flex-direction:column
  }

  .plan-footnote a{
    flex:0 1 auto
  }

  .sla-summary{
    container-type:inline-size
  }
}

@media (max-width:42rem){
  .home-ticket{
    align-items:flex-start;
    flex-direction:column
  }

  .home-plan-link{
    overflow-wrap:anywhere
  }

  .stage-ticket{
    top:auto;
    bottom:4.75rem;
    width:min(13rem,60%)
  }

  .stage-label{
    font-size:var(--fs-0)
  }

  .connect{
    gap:var(--space-3)
  }

  .step{
    grid-template-columns:2rem minmax(0,1fr)
  }

  .terminal{
    min-height:24rem
  }

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

  .bar{
    grid-template-columns:minmax(4.5rem,5.5rem) minmax(0,1fr)
  }

  .bar b{
    grid-column:2
  }

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

  .price-row div:nth-child(2){
    border-right:0
  }

  .price-row div:nth-child(n+3){
    border-top:1px solid var(--color-line)
  }

  .region-grid{
    grid-template-columns:1fr
  }

  .region:nth-child(even){
    border-left:0
  }

  .region:nth-child(n+2){
    border-top:1px solid var(--color-line)
  }

  .region:last-child{
    grid-column:auto
  }

  .region-note{
    grid-template-columns:1fr
  }

  .sla-strip{
    grid-template-columns:repeat(15,minmax(2px,1fr))
  }

  .sla-strip i{
    height:1.25rem
  }

  .home-endcap__actions{
    width:100%
  }
}

@media (max-width:24.375rem){
  .node-overlay i{
    width:.8rem;
    height:.8rem;
    border-width:3px
  }

  .stage-ticket{
    right:.65rem;
    bottom:4.5rem;
    width:62%;
    padding:.75rem
  }

  .stage-label{
    left:.65rem;
    top:.65rem
  }

  .chart-tabs span{
    padding:.75rem .45rem
  }

  .bar{
    grid-template-columns:1fr
  }

  .bar b{
    grid-column:auto
  }

  .chart-legend div{
    grid-template-columns:1fr
  }
}

@media (prefers-reduced-motion:reduce){
  .bar-fill{
    animation:none
  }
}
