.region-hero{
  position:relative;
  overflow:hidden;
  padding-block:var(--mr-space-6);
  background:var(--mr-light)
}

.region-hero::before{
  position:absolute;
  top:-40%;
  right:-12%;
  width:58%;
  max-width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,168,.16),rgba(0,194,168,0) 68%);
  content:"";
  pointer-events:none
}

.region-hero__lead{
  max-width:660px;
  margin-bottom:var(--mr-space-3);
  font-size:var(--mr-fs-md)
}

.region-hero .p-kicker{
  width:fit-content;
  margin-bottom:var(--mr-space-2)
}

.region-hero h1{
  margin-bottom:var(--mr-space-3)
}

.region-hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--mr-space-1);
  margin-bottom:var(--mr-space-3)
}

.region-hero .p-hero__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--mr-space-1)
}

.region-hero__price{
  margin-top:var(--mr-space-2);
  margin-bottom:0;
  color:var(--mr-muted);
  font-size:var(--mr-fs-sm);
  font-variant-numeric:tabular-nums
}

.region-hero__visual{
  position:relative;
  min-height:520px;
  min-width:0
}

.region-hero__visual .p-hero__scene{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:contain
}

.region-float{
  position:absolute;
  display:grid;
  gap:var(--mr-space-1);
  min-width:0;
  padding:var(--mr-space-2);
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--mr-radius-md);
  background:rgba(255,255,255,.92);
  box-shadow:var(--mr-shadow-raised);
  backdrop-filter:blur(12px)
}

.region-float strong{
  color:var(--mr-dark);
  font-family:var(--mr-font-heading)
}

.region-float span{
  overflow-wrap:anywhere;
  color:var(--mr-text);
  font-size:var(--mr-fs-xs)
}

.region-float__label{
  color:var(--mr-primary);
  font-family:var(--mr-font-mono);
  font-weight:700;
  letter-spacing:.08em
}

.region-float--build{
  top:12%;
  left:0;
  width:min(245px,48%)
}

.region-float--node{
  top:43%;
  right:0;
  width:min(230px,46%)
}

.region-float--device{
  right:12%;
  bottom:7%;
  width:min(250px,50%)
}

.region-float .p-progress{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:var(--mr-line)
}

.region-float .p-progress span{
  display:block;
  width:78%;
  height:100%;
  border-radius:inherit;
  background:var(--mr-accent)
}

.region-plans .p-section__head,
.region-steps .p-section__head,
.region-faq .p-section__head{
  max-width:760px;
  margin-inline:auto;
  margin-bottom:var(--mr-space-4);
  text-align:center
}

.region-plans .p-section__head .p-kicker,
.region-steps .p-section__head .p-kicker,
.region-faq .p-section__head .p-kicker{
  width:fit-content;
  margin-inline:auto;
  margin-bottom:var(--mr-space-2)
}

.region-plan-grid{
  align-items:stretch
}

.region-plan-grid .c-price{
  display:flex;
  flex-direction:column
}

.region-plan-grid .c-price .c-badge{
  width:fit-content;
  align-self:flex-start;
  margin-bottom:var(--mr-space-2)
}

.region-plan-grid .c-price h3{
  margin-bottom:var(--mr-space-1)
}

.region-plan__fit{
  min-height:78px;
  margin-bottom:var(--mr-space-3)
}

.region-plan__cta{
  width:100%;
  margin-top:auto
}

.region-billing-note{
  margin-top:var(--mr-space-3)
}

.region-network{
  padding-block:var(--mr-space-6);
  background:var(--mr-dark);
  color:#DDF7F3
}

.region-network__copy{
  min-width:0
}

.region-network__copy .p-kicker{
  width:fit-content;
  margin-bottom:var(--mr-space-2);
  color:var(--mr-accent)
}

.region-network__copy h2{
  margin-bottom:var(--mr-space-3);
  color:var(--mr-surface)
}

.region-network__copy p{
  color:#C6DADD
}

.region-network__checks{
  display:grid;
  gap:var(--mr-space-2);
  margin-top:var(--mr-space-3)
}

.region-network__checks div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--mr-space-1);
  min-width:0
}

.region-network__checks svg{
  width:22px;
  height:22px;
  margin-top:2px;
  color:var(--mr-accent)
}

.region-network__meter{
  min-width:0;
  padding:var(--mr-space-4);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--mr-radius-lg);
  background:rgba(255,255,255,.06);
  box-shadow:var(--mr-shadow-raised)
}

.region-meter__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--mr-space-2);
  padding-bottom:var(--mr-space-2);
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#9FB8BE;
  font-size:var(--mr-fs-sm)
}

.region-meter__head strong{
  color:var(--mr-surface);
  overflow-wrap:anywhere
}

.region-meter__value{
  margin-block:var(--mr-space-4);
  color:var(--mr-surface);
  font-size:clamp(3rem,8vw,var(--mr-fs-hero));
  font-weight:700;
  letter-spacing:-.07em;
  line-height:1;
  font-variant-numeric:tabular-nums
}

.region-meter__value small{
  margin-left:var(--mr-space-1);
  color:var(--mr-accent);
  font-size:var(--mr-fs-md);
  letter-spacing:0
}

.region-meter__line{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.1)
}

.region-meter__line span{
  display:block;
  width:74%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--mr-primary),var(--mr-accent))
}

.region-meter__scale{
  display:flex;
  justify-content:space-between;
  gap:var(--mr-space-1);
  margin-top:var(--mr-space-1);
  color:#88A5AC;
  font-size:var(--mr-fs-xs)
}

.region-meter__node{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--mr-space-2);
  margin-top:var(--mr-space-4);
  padding-top:var(--mr-space-3);
  border-top:1px solid rgba(255,255,255,.12)
}

.region-meter__node svg{
  width:34px;
  height:34px;
  color:var(--mr-accent)
}

.region-meter__node div{
  display:grid;
  min-width:0
}

.region-meter__node span{
  color:#91ABB1;
  font-size:var(--mr-fs-xs)
}

.region-meter__node strong{
  overflow-wrap:anywhere;
  color:var(--mr-surface);
  font-family:var(--mr-font-heading);
  font-size:var(--mr-fs-lg)
}

.region-step-list{
  display:grid;
  gap:var(--mr-space-2);
  margin:0;
  padding:0;
  list-style:none
}

.region-step-list > li{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:start;
  gap:var(--mr-space-3)
}

.region-step-list > li:hover{
  transform:none;
  box-shadow:none
}

.region-step__number{
  color:var(--mr-primary);
  font-size:var(--mr-fs-sm);
  font-weight:700
}

.region-step__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  flex:0 0 auto;
  border-radius:var(--mr-radius-sm);
  background:var(--mr-light);
  color:var(--mr-primary)
}

.region-step__icon svg{
  width:24px;
  height:24px
}

.region-step__body{
  min-width:0
}

.region-step__heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--mr-space-1);
  margin-bottom:var(--mr-space-1)
}

.region-step__heading h3{
  margin-bottom:0
}

.region-step__heading .c-badge{
  width:fit-content;
  flex:0 0 auto
}

.region-step__body p{
  margin-bottom:0
}

.region-faq .c-faq__content{
  padding-top:var(--mr-space-2);
  border-top:1px solid var(--mr-line)
}

.region-faq__link{
  display:flex;
  justify-content:center;
  margin-top:var(--mr-space-3)
}

.region-cta__box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--mr-space-4);
  padding:var(--mr-space-4);
  overflow:hidden;
  border-radius:var(--mr-radius-lg);
  background:var(--mr-primary);
  color:var(--mr-surface)
}

.region-cta__box .p-kicker{
  width:fit-content;
  margin-bottom:var(--mr-space-2);
  color:#C9FFF5
}

.region-cta__box h2{
  margin-bottom:var(--mr-space-2);
  color:var(--mr-surface)
}

.region-cta__box p{
  max-width:720px;
  margin-bottom:0;
  color:#D5F2EF
}

.region-cta__actions{
  display:grid;
  gap:var(--mr-space-1);
  min-width:0
}

.region-cta__actions .c-btn--secondary{
  border-color:var(--mr-surface);
  background:var(--mr-surface);
  color:var(--mr-primary)
}

.region-cta__actions .c-btn--ghost{
  color:var(--mr-surface)
}

.region-cta__actions .c-btn--ghost:hover{
  background:rgba(255,255,255,.12)
}

@media(max-width:900px){
  .region-hero__visual{
    min-height:440px
  }

  .region-hero__visual .p-hero__scene{
    min-height:440px
  }

  .region-network__meter{
    padding:var(--mr-space-3)
  }

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

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

@media(max-width:640px){
  .region-hero{
    padding-block:var(--mr-space-5)
  }

  .region-hero .p-hero__actions,
  .region-hero .p-hero__actions .c-btn{
    width:100%
  }

  .region-hero__visual{
    min-height:360px
  }

  .region-hero__visual .p-hero__scene{
    min-height:360px
  }

  .region-float{
    padding:var(--mr-space-1)
  }

  .region-float--build{
    top:8%;
    width:54%
  }

  .region-float--node{
    top:42%;
    width:52%
  }

  .region-float--device{
    right:5%;
    bottom:3%;
    width:58%
  }

  .region-plan__fit{
    min-height:0
  }

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

  .region-step-list > li{
    grid-template-columns:auto minmax(0,1fr);
    gap:var(--mr-space-2)
  }

  .region-step__number{
    grid-column:1/-1
  }

  .region-cta__box{
    padding:var(--mr-space-3)
  }

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

  .region-cta__actions .c-btn{
    width:100%;
    white-space:normal
  }
}

@media(max-width:390px){
  .region-hero__visual{
    min-height:320px
  }

  .region-hero__visual .p-hero__scene{
    min-height:320px
  }

  .region-float--build{
    width:58%
  }

  .region-float--node{
    width:56%
  }

  .region-float--device{
    width:62%
  }

  .region-step-list > li{
    grid-template-columns:1fr
  }

  .region-step__number{
    grid-column:auto
  }
}