.join{background:var(--paper)}
.join a{text-decoration:none;color:inherit}
.join-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.join__split{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:start;
  min-height:100vh;
}

.pane{
  position:sticky;top:0;
  height:100vh;overflow:hidden;
  background:var(--paper);
  border-right:var(--hairline);
  padding:clamp(24px,3vw,44px);
  display:flex;flex-direction:column;gap:clamp(24px,3vw,44px);
}

.pane__logo{display:flex;min-height:44px;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;width:fit-content}
.pane__logo img{height:clamp(22px,2.2vw,28px);width:auto}
.pane__baseline{
  font-family:var(--font-semi-mono);
  text-transform:uppercase;white-space:nowrap;
  font-size:clamp(6.5px,.72vw,8px);letter-spacing:.3em;
  padding-left:26.2%;
  color:var(--brand-navy);
}

.mosaic{
  position:relative;isolation:isolate;overflow:visible;
  flex:1;min-height:0;width:100%;
  max-width:min(100%,520px);margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(6,1fr);
  gap:clamp(8px,1vw,14px);
}
.mosaic__item{
  position:relative;overflow:hidden;
  background:var(--deep-night);
}
.mosaic__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(.98) brightness(.9);
}

.m1{grid-column:1;grid-row:1/3}
.m2{grid-column:2;grid-row:2/4}
.m3{grid-column:1;grid-row:3/6}
.m4{grid-column:2;grid-row:4/6}
.m5{grid-column:1;grid-row:6/7}
.m6{grid-column:2;grid-row:6/7}

.tunnel{
  background:var(--white);
  display:flex;justify-content:center;
  padding:clamp(28px,4vw,64px) clamp(20px,3vw,48px);
}
.tunnel__inner{width:100%;max-width:520px}
.checkout,.checkout-section{width:100%}
.checkout-section{min-width:0;margin:0;padding:0;border:0}
.checkout-section--payment{margin-top:clamp(40px,5vw,64px)}

.steps{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:clamp(40px,6vw,80px)}
.step{
  text-align:center;padding:14px 8px;
  border-top:2px solid rgba(42,32,27,.18);
  color:var(--ink);opacity:.45;
}
.step.is-done{border-top-color:var(--brand-navy);opacity:.7}
.step.is-active{border-top-color:var(--copper-cta);opacity:1}

.tunnel__title{font-size:clamp(26px,2.6vw,34px);text-align:center;font-weight:400}
.tunnel__intro{text-align:center;margin-top:10px;font-size:15px;opacity:.75}

.plans{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(26px,3vw,38px);
}
.plan{
  position:relative;cursor:pointer;
  border:var(--hairline);padding:18px 18px 16px;
  min-height:144px;
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;
  align-items:start;
  transition:border-color .2s ease, background .2s ease;
}
.plan:hover{border-color:rgba(42,32,27,.5)}
.plan input{position:absolute;width:1px;height:1px;opacity:0}
.plan:has(input:focus-visible){outline:2px solid var(--ember);outline-offset:3px}

.plan__check{
  grid-column:2;grid-row:1;
  width:17px;height:17px;border:var(--hairline-strong);
  display:block;position:relative;
}
.plan:has(input:checked){border-color:var(--brand-navy);background:rgba(58,80,107,.04)}
.plan:has(input:checked) .plan__check{background:var(--brand-navy);border-color:var(--brand-navy)}
.plan:has(input:checked) .plan__check::after{
  content:"";position:absolute;left:5px;top:2px;
  width:5px;height:9px;border:solid var(--paper);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}

.plan__name{grid-column:1;grid-row:1;font-size:19px}
.plan__badge{
  grid-column:1;grid-row:2;justify-self:start;
  background:var(--copper-cta);color:var(--cream);padding:3px 7px;
}
.plan__price{grid-column:1/-1;font-size:clamp(22px,2.2vw,27px);margin-top:8px}
.plan__detail{grid-column:1/-1;opacity:.62;line-height:1.55;letter-spacing:.1em}

.prototype-note{
  margin-top:20px;padding:14px 16px;border-left:3px solid var(--copper-cta);
  background:var(--paper);font-size:13px;line-height:1.55;
}
.prototype-note strong{font-weight:600}
.field{margin-top:clamp(20px,2.6vw,30px)}
.field__label{display:block;opacity:.7;margin-bottom:9px}
.field__input{
  width:100%;min-height:50px;padding:14px 16px;
  border:var(--hairline);background:var(--paper);
  font-family:var(--font-semi-mono);font-size:16px;letter-spacing:.06em;
  color:var(--ink);
}
.field__input:focus{border-color:var(--brand-navy)}
.field__input:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.field__input[aria-invalid="true"]{border-color:var(--vermilion)}
.field__input::placeholder{color:rgba(42,32,27,.34)}
.field__help,.field__error,.promo__status{margin-top:8px;font-size:12px;line-height:1.5}
.field__help{opacity:.72}
.field__error{color:var(--vermilion);opacity:1}

.link-promo{
  min-height:44px;margin-top:10px;background:none;border:none;padding:10px 0;cursor:pointer;
  font-family:var(--font-regular);font-size:14px;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
.link-promo:hover{color:var(--vermilion)}
.link-promo:focus-visible,.promo__apply:focus-visible,.btn-submit:focus-visible,.join-success__link:focus-visible{
  outline:2px solid var(--ember);outline-offset:3px;
}

.promo{margin-top:10px;padding:18px;background:var(--paper);border:var(--hairline)}
.promo__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.promo__apply{
  min-width:94px;min-height:50px;padding:0 18px;border:0;
  background:var(--brand-navy);color:var(--cream);cursor:pointer;
}
.promo__apply:hover{background:var(--vermilion)}
.promo__apply:disabled{opacity:.62;cursor:default}
.promo__status{min-height:18px;color:var(--brand-navy)}
.promo__status:empty{display:none}

.recap{margin-top:clamp(28px,3.4vw,42px);border-top:var(--hairline);padding-top:18px}
.recap__line{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:15px}
.recap__line--discount{color:var(--vermilion)}
.recap__line--strong{font-size:17px;border-top:var(--hairline);margin-top:8px;padding-top:14px}
.recap dd{text-align:right}

.mention{
  margin-top:18px;font-size:12px;line-height:1.6;opacity:.62;
  font-family:var(--font-semi-mono);letter-spacing:.02em;
}
.mention strong{font-weight:500;opacity:.9}

.btn-submit{
  width:100%;margin-top:clamp(24px,3vw,34px);
  background:var(--copper-cta);color:var(--cream);
  min-height:56px;border:none;padding:16px 30px;cursor:pointer;
}
.btn-submit:hover{background:var(--vermilion)}
.btn-submit:disabled{background:var(--brand-navy);cursor:default;opacity:.7}

.tunnel__threshold{
  margin-top:clamp(30px,4vw,48px);text-align:center;
  font-size:17px;opacity:.6;
}

.join-success{padding:clamp(30px,5vw,52px);background:var(--paper);border:1px solid var(--copper-cta)}
.join-success:focus{outline:none}
.join-success:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.join-success h1{margin-top:14px;font-size:clamp(34px,4vw,48px);font-weight:400;line-height:1}
.join-success .t-news{margin-top:20px;font-size:19px;line-height:1.5}
.join-success__note{margin-top:16px;font-size:13px;line-height:1.55;opacity:.66}
.join-success__link{
  display:inline-flex;align-items:center;min-height:44px;margin-top:26px;
  color:var(--vermilion);border-bottom:1px solid currentColor;
}

@media (max-width:900px){
  .join__split{display:block;min-height:100vh}
  .pane{
    position:static;height:78px;min-height:0;
    border-right:none;border-bottom:var(--hairline);
    padding:18px 20px;justify-content:center;
  }
  .pane__logo img{height:22px}
  .mosaic{display:none}
  .tunnel{background:var(--paper)}
}
@media (max-width:520px){
  .tunnel{padding:28px 18px 44px}
  .plans{grid-template-columns:1fr}
  .plan{min-height:128px}
  .steps{margin-bottom:clamp(28px,6vw,48px)}
  .prototype-note{font-size:12px}
  .promo__row{grid-template-columns:1fr}
  .promo__apply{width:100%}
  .recap__line{font-size:14px}
  .recap__line--strong{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .plan,.btn-submit{transition:none}
}