/* New pathway — old-pathway look; % circle is the visual lead */
.pathway-console-block{
  --pc-green:var(--brand-green, #009A5D);
  --pc-green-dark:var(--brand-dark-green, #005534);
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid rgba(0,0,0,.06);
}
.pathway-console-head,
.pathway-console-nav,
.pathway-console-stage{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.pathway-console-block.is-inview .pathway-console-head{
  opacity:1;
  transform:none;
  transition-delay:.05s;
}
.pathway-console-block.is-inview .pathway-console-nav,
.pathway-console-block.is-inview .pathway-console-stage{
  opacity:1;
  transform:none;
  transition-delay:.7s;
}
@media(prefers-reduced-motion:reduce){
  .pathway-console-head,
  .pathway-console-nav,
  .pathway-console-stage{
    opacity:1;
    transform:none;
    transition:none;
  }
}
.pathway-console-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 24px;
}
.pathway-console-head .eyebrow{color:var(--pc-green)}
.pathway-console-head h2{
  margin:8px 0 10px;
  font-size:28px;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--brand-dark-gray, #1c2024);
}
.pathway-console-head p{
  margin:0;
  color:var(--muted, #5b6269);
  font-size:15px;
  line-height:1.6;
}

.pathway-console-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:6px;
  margin:0 auto 22px;
  width:fit-content;
  max-width:100%;
  background:#f6f8f7;
  border:1px solid #e6ebee;
  border-radius:999px;
}
.pathway-console-nav [data-pc-tab]{
  appearance:none;
  border:0;
  background:transparent;
  color:#5b6269;
  font:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.pathway-console-nav [data-pc-tab]:hover{
  background:#e7f6ee;
  color:var(--pc-green-dark);
}
.pathway-console-nav [data-pc-tab].is-active{
  background:var(--pc-green);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,85,52,.16);
}
.pathway-console-nav [data-pc-tab]:focus-visible{
  outline:3px solid var(--pc-green);
  outline-offset:4px;
}

.pathway-console-stage{
  --pc-progress-unit:0;
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,1.25fr);
  gap:36px;
  align-items:stretch;
  height:400px;
  min-height:400px;
  max-height:400px;
  padding:36px 40px;
  border-radius:24px;
  border:1px solid rgba(0,154,93,.24);
  background:
    radial-gradient(ellipse 58% 85% at 79% 48%, rgba(0,154,93,.32), transparent 72%),
    radial-gradient(ellipse 45% 60% at 83% 8%, rgba(190,255,220,.1), transparent 70%),
    linear-gradient(135deg, #07110d 0%, #043024 55%, var(--pc-green-dark) 100%);
  color:#fff;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(0,40,24,.12);
  box-sizing:border-box;
}

/* Fixed copy frame so kicker / title / desc / CTA never shift between steps */
.pathway-console-stage .pathway-console-copy.how-build-copy{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  height:100%;
  min-height:0;
  justify-content:center;
}
.pathway-console-stage .how-build-panels [data-how-panel]{
  position:absolute;
  inset-block:50% auto;
  inset-inline:0 auto;
  transform:translateY(-50%);
  width:100%;
  max-width:36ch;
  display:grid!important;
  grid-template-rows:1.3em 3.5em 6.6em auto;
  gap:18px;
  align-content:start;
  align-items:start;
  justify-items:start;
  height:calc(1.3em + 3.5em + 6.6em + 2.75em + 18px * 3);
  box-sizing:border-box;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.pathway-console-stage .how-build-panels [data-how-panel][hidden]{
  display:grid!important;
}
.pathway-console-stage .how-build-panels [data-how-panel].is-active{
  display:grid!important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .45s ease, visibility 0s;
  width:100%;
  max-width:36ch;
  height:calc(1.3em + 3.5em + 6.6em + 2.75em + 18px * 3);
  box-sizing:border-box;
}
.pathway-console-stage .how-build-copy .how-build-kicker,
.pathway-console-stage .how-build-copy h3,
.pathway-console-stage .how-build-copy p:not(.how-build-kicker){
  margin:0;
}
.pathway-console-stage .how-build-copy .how-build-kicker{
  height:1.3em;
  line-height:1.3;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:100%;
}
.pathway-console-stage .how-build-copy h3{
  height:3.5em;
  min-height:0;
  line-height:1.25;
  font-size:28px;
  overflow:hidden;
  max-width:100%;
}
.pathway-console-stage .how-build-copy p:not(.how-build-kicker){
  height:6.6em;
  min-height:0;
  line-height:1.65;
  overflow:hidden;
  max-width:36ch;
  width:100%;
}
.pathway-console-stage .how-build-copy .btn{
  width:max-content;
  max-width:100%;
  height:auto;
  min-height:2.75em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:start;
  justify-self:start;
  padding-inline:18px;
  white-space:nowrap;
  margin:0;
  margin-top:-10px; /* pull CTA closer to description */
}

/* Arabic = same distances as English, mirrored for RTL */
.rtl .pathway-console-head{text-align:center}
.rtl .pathway-console-nav{direction:rtl}
.rtl .pathway-console-stage{
  /* Mirror the green wash toward the circle (now on the inline-start / left in RTL) */
  background:
    radial-gradient(ellipse 58% 85% at 21% 48%, rgba(0,154,93,.32), transparent 72%),
    radial-gradient(ellipse 45% 60% at 17% 8%, rgba(190,255,220,.1), transparent 70%),
    linear-gradient(225deg, #07110d 0%, #043024 55%, var(--pc-green-dark) 100%);
}
.rtl .pathway-console-stage .pathway-console-copy.how-build-copy{
  /* Keep English box size; logical start = right in RTL */
  align-items:flex-start;
  text-align:right;
}
.rtl .pathway-console-stage .how-build-panels [data-how-panel]{
  /* Same absolute slot as EN; inset-inline:0 auto pins to inline-start (right in RTL) */
  inset-inline:0 auto;
}
.rtl .pathway-console-stage .how-build-panels [data-how-panel].is-active{
  align-items:start;
  justify-items:start;
  text-align:right;
}
.rtl .pathway-console-stage .how-build-copy .how-build-kicker,
.rtl .pathway-console-stage .how-build-copy h3,
.rtl .pathway-console-stage .how-build-copy p:not(.how-build-kicker){
  text-align:right!important;
  letter-spacing:0;
}
.rtl .pathway-console-stage .how-build-copy .btn{
  align-self:start;
  justify-self:start;
  /* Override shared .rtl .how-build-copy .btn{align-self:flex-end} from style.css */
}
.rtl .pathway-console-donut-core span{
  letter-spacing:0;
  text-transform:none;
}

.pathway-console-visual{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-width:0;
  padding:8px 4px;
}

/* Percentage circle */
.pathway-console-donut{
  position:relative;
  width:min(248px, 70vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.pathway-console-donut::before{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:rgba(7,17,13,.45);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.pathway-console-donut svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  overflow:visible;
}
.pathway-console-donut-frame{
  display:none;
}
.pathway-console-donut-track{
  display:none;
}
.pathway-console-donut-fill{
  fill:none;
  stroke:url(#pcPathGrad);
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .55s cubic-bezier(.22,.82,.24,1), opacity .2s ease;
  opacity:1;
}
.pathway-console-donut-fill.is-empty{
  opacity:0;
}
.pathway-console-donut.is-pulse svg{
  animation:pc-donut-pulse .7s cubic-bezier(.22,.82,.24,1) 1;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes pc-donut-pulse{
  0%{transform:rotate(-90deg) scale(1)}
  40%{transform:rotate(-90deg) scale(1.07)}
  100%{transform:rotate(-90deg) scale(1)}
}
.pathway-console-donut-core{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  pointer-events:none;
}
.pathway-console-donut-core strong{
  font-size:clamp(40px, 8.5vw, 52px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  color:#fff;
  transition:opacity .28s ease;
}
.pathway-console-donut-core strong.is-swap{
  opacity:0;
}
.pathway-console-donut-core span{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
}
.pathway-console-progress-copy{
  margin:0;
  width:100%;
  max-width:28ch;
  height:3em;
  text-align:center;
  font-size:14px;
  line-height:1.5;
  color:#fff;
  overflow:hidden;
  transition:opacity .28s ease;
}
.pathway-console-progress-copy.is-swap{
  opacity:0;
}

@media(max-width:900px){
  .pathway-console-stage{
    grid-template-columns:1fr;
    gap:24px;
    padding:28px 24px;
    height:auto;
    min-height:0;
    max-height:none;
  }
  .pathway-console-stage .pathway-console-copy.how-build-copy{
    max-width:none;
    height:auto;
    min-height:0;
    order:2;
  }
  .pathway-console-stage .how-build-panels [data-how-panel],
  .pathway-console-stage .how-build-panels [data-how-panel].is-active{
    position:relative;
    inset:auto;
    transform:none;
    gap:14px;
    grid-template-rows:auto auto auto auto;
    height:auto;
    max-width:none;
  }
  .pathway-console-stage .how-build-panels [data-how-panel]:not(.is-active){
    display:none!important;
  }
  .pathway-console-stage .how-build-copy h3{
    font-size:24px;
    height:auto;
    overflow:visible;
  }
  .pathway-console-stage .how-build-copy p:not(.how-build-kicker){
    height:auto;
    overflow:visible;
    max-width:none;
  }
  .pathway-console-stage .how-build-copy .btn{
    margin-top:0;
  }
  .pathway-console-visual{order:1;min-height:280px}
  .pathway-console-donut{width:min(220px, 68vw)}
  .pathway-console-head h2{font-size:24px}
  .pathway-console-nav{gap:4px}
  .pathway-console-nav [data-pc-tab]{padding:10px 12px}

  .rtl .pathway-console-stage .pathway-console-copy.how-build-copy{
    text-align:right;
  }
  .rtl .pathway-console-stage .how-build-panels [data-how-panel].is-active{
    text-align:right;
    justify-items:start;
    align-items:start;
  }
  .rtl .pathway-console-stage .how-build-copy .how-build-kicker,
  .rtl .pathway-console-stage .how-build-copy h3,
  .rtl .pathway-console-stage .how-build-copy p:not(.how-build-kicker){
    text-align:right!important;
  }
  .rtl .pathway-console-stage .how-build-copy .btn{
    align-self:start;
    justify-self:start;
  }
}
@media(max-width:560px){
  .pathway-console-stage{
    padding:24px 18px;
    border-radius:22px;
    gap:22px;
  }
  .pathway-console-stage .pathway-console-copy.how-build-copy{
    height:auto;
    min-height:0;
  }
}
@media(prefers-reduced-motion:reduce){
  .pathway-console-donut-fill{transition:none}
  .pathway-console-donut.is-pulse svg{animation:none}
  .pathway-console-stage .how-build-panels [data-how-panel],
  .pathway-console-stage .how-build-panels [data-how-panel].is-active,
  .pathway-console-progress-copy,
  .pathway-console-donut-core strong{
    transition:none;
  }
}