/* Process · Products — mockup card + rail */
.process-showcase{
  position:relative;
  z-index:3;
  background:#eef0f2;
  border-top:none;
  padding:0 0 56px;
}
.process-showcase-intro{
  max-width:var(--landing-card-max,1160px);
  margin:0 auto;
  padding:52px 32px 28px;
  text-align:center;
}
.process-showcase-intro .process-eyebrow{
  color:var(--amber,#c8933f);
  margin-bottom:12px;
}
.process-showcase-intro h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:var(--head-xl,clamp(32px,4.2vw,52px));
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink,#12141a);
  margin:0 auto 12px;
  line-height:1.18;
  max-width:18ch;
  text-wrap:balance;
}
.process-showcase-intro p{
  font-size:var(--copy-sm,18px);
  color:var(--ink2,rgba(18,20,26,.58));
  line-height:var(--copy-sm-lh,1.68);
  max-width:46ch;
  margin:0 auto;
  text-wrap:pretty;
}
.process-showcase-body{
  max-width:var(--landing-card-max,1160px);
  margin:0 auto;
  padding:0 32px 8px;
}
.process-showcase-foot{
  max-width:var(--landing-card-max,1160px);
  margin:0 auto;
  padding:20px 32px 0;
  text-align:center;
  font-size:var(--copy-sm,18px);
  color:var(--ink2,rgba(18,20,26,.58));
  line-height:var(--copy-sm-lh,1.68);
  font-style:italic;
}

.pd-b1{overflow:visible}

/* Desktop rail */
.pd-b1-bar-wrap{margin-bottom:26px}
.pd-b1 .pd-b1-bar{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:flex-start;
  gap:0;
  position:relative;
  overflow:visible;
  padding:12px 0 8px;
}
.pd-b1 .pd-b1-bar::before{
  content:'';
  position:absolute;
  top:41px;
  left:calc(100%/14);
  right:calc(100%/14);
  height:3px;
  background:rgba(18,20,26,.12);
  border-radius:99px;
  z-index:0;
}
.pd-b1 .pd-b1-bar-fill{
  position:absolute;
  top:41px;
  left:calc(100%/14);
  height:3px;
  width:0;
  max-width:calc(100% - 100%/7);
  background:linear-gradient(90deg,var(--amber2,#e3b262),var(--amber,#c8933f));
  border-radius:99px;
  z-index:1;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.pd-b1 .pd-b1-bar-pulse{display:none}

.pd-b1 .pd-b1-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  position:relative;
  z-index:2;
  cursor:pointer;
  padding:0 6px;
  border:none;
  background:none;
  font:inherit;
  color:inherit;
  min-width:0;
}
.pd-b1 .pd-b1-bubble{
  width:58px;
  height:58px;
  border-radius:50%;
  background:#fff;
  border:2.5px solid rgba(18,20,26,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .3s,background .3s,transform .3s,box-shadow .3s,border-radius .3s;
  box-shadow:0 0 0 4px #eef0f2,0 4px 14px rgba(12,13,16,.06);
  flex-shrink:0;
}
.pd-b1 .pd-b1-step-index{display:none}
.pd-b1 .pd-b1-bubble-ic{
  width:24px;
  height:24px;
  stroke:rgba(18,20,26,.45);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .3s;
}
.pd-b1 .pd-b1-step.is-done .pd-b1-bubble{
  border-color:rgba(200,147,63,.85);
  background:#fff;
}
.pd-b1 .pd-b1-step.is-done .pd-b1-bubble-ic{stroke:#1a1206}
.pd-b1 .pd-b1-step.is-active .pd-b1-bubble{
  border-color:transparent;
  background:linear-gradient(135deg,var(--amber2,#e3b262),var(--amber,#c8933f));
  border-radius:12px;
  transform:scale(1.08);
  box-shadow:0 0 0 4px #eef0f2,0 10px 24px rgba(200,147,63,.32);
}
.pd-b1 .pd-b1-step.is-active .pd-b1-bubble-ic{stroke:#1a1206}
.pd-b1 .pd-b1-step-label{
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  color:rgba(18,20,26,.45);
  line-height:1.32;
  width:100%;
  max-width:148px;
  min-height:3.2em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  transition:color .25s,font-weight .25s;
}
.pd-b1 .pd-b1-step.is-active .pd-b1-step-label{
  color:var(--ink,#12141a);
  font-weight:800;
}
.pd-b1 .pd-b1-step.is-done .pd-b1-step-label{color:rgba(18,20,26,.72)}
.pd-b1 .pd-b1-step:hover .pd-b1-bubble{border-color:rgba(200,147,63,.55)}

/* Stage card — fixed height so every step matches */
.pd-b1 .pd-b1-stage{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  height:480px;
  min-height:480px;
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(18,20,26,.08);
  box-shadow:0 18px 48px rgba(12,13,16,.08);
  position:relative;
  align-items:stretch;
}
.pd-b1 .pd-b1-stage.is-leaving-forward{animation:pd-stage-leave-forward .2s ease forwards}
.pd-b1 .pd-b1-stage.is-leaving-back{animation:pd-stage-leave-back .2s ease forwards}
.pd-b1 .pd-b1-stage.is-enter-forward{animation:pd-stage-enter-forward .4s cubic-bezier(.16,1,.3,1) both}
.pd-b1 .pd-b1-stage.is-enter-back{animation:pd-stage-enter-back .4s cubic-bezier(.16,1,.3,1) both}

.pd-stage-visual{
  position:relative;
  min-height:0;
  height:100%;
  background:#15171c;
  overflow:hidden;
}
.pd-stage-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s ease;
}
.pd-b1 .pd-b1-stage.is-enter-forward .pd-stage-visual img,
.pd-b1 .pd-b1-stage.is-enter-back .pd-stage-visual img{
  animation:pd-img-in .55s ease both;
}
.pd-stage-visual::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(12,13,16,.28) 100%);
  pointer-events:none;
}

.pd-stage-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,4vw,48px);
  gap:14px;
  min-height:0;
  height:100%;
  overflow:auto;
  scrollbar-width:none;
}
.pd-stage-copy::-webkit-scrollbar{display:none}
.pd-stage-product{
  display:inline-flex;
  align-self:flex-start;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1a1206;
  background:linear-gradient(135deg,var(--amber2,#e3b262),var(--amber,#c8933f));
  padding:8px 13px;
  border-radius:999px;
}
.pd-b1 .pd-b1-stage-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(24px,2.7vw,34px);
  font-weight:700;
  color:var(--ink,#12141a);
  line-height:1.18;
  letter-spacing:-.025em;
  text-wrap:balance;
  max-width:16ch;
  margin:0;
}
.pd-b1 .pd-b1-stage-desc{
  font-size:var(--copy-sm,18px);
  color:var(--ink2,rgba(18,20,26,.62));
  line-height:var(--copy-sm-lh,1.6);
  max-width:38ch;
  text-wrap:pretty;
  margin:0;
}
.pd-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:flex-start;
  margin-top:6px;
  padding:13px 22px;
  border-radius:999px;
  background:#1a1c22;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border:none;
  box-shadow:0 8px 20px rgba(12,13,16,.18);
  transition:transform .18s,background .18s;
}
.pd-cta:hover{transform:translateY(-1px);background:#0c0d10}
.pd-cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}

.pd-publish-flags{margin-top:2px}
.pd-publish-flags-label{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(18,20,26,.4);margin-bottom:10px
}
.pd-publish-flags-row{display:flex;flex-wrap:wrap;gap:8px}
.pd-publish-flag{
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px 8px 10px;border-radius:999px;
  background:rgba(18,20,26,.04);border:1px solid rgba(18,20,26,.08)
}
.pd-publish-flag-emoji{font-size:16px;line-height:1}
.pd-publish-flag-name{font-size:12px;font-weight:700;color:var(--ink,#12141a)}

/* Desktop prev/next — removed */
.pd-b1-nav,
.pd-b1-mobile-nav{display:none!important}

/* hide legacy bits */
.pd-ic-wrap,.pd-step-num,.pd-mobile-stage-head{display:none}
.pd-b1-mobile-head,.pd-b1-mobile-steps{display:none}
.pd-stage-play{display:none!important}

@keyframes pd-stage-enter-forward{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes pd-stage-enter-back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes pd-stage-leave-forward{from{opacity:1}to{opacity:0;transform:translateX(-12px)}}
@keyframes pd-stage-leave-back{from{opacity:1}to{opacity:0;transform:translateX(12px)}}
@keyframes pd-img-in{from{opacity:.4;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

.pd-b1.is-restarting .pd-b1-stage{opacity:.55;transition:opacity .35s}

/* ── Mobile: 2-column tool grid + tap-to-expand (50+) ── */
.pd-m{display:none}

@media(max-width:900px){
  .process-showcase{padding:0 0 52px}
  .process-showcase-intro{padding:48px var(--mobile-gutter,20px) 28px}
  .process-showcase-intro h2{font-size:clamp(30px,7.8vw,40px);max-width:none;line-height:1.2;padding:0 2px}
  .process-showcase-intro p{font-size:20px;line-height:1.72;padding:0 2px}
  .process-showcase-body{
    padding:22px 16px 24px;
    margin:0 var(--mobile-gutter,20px);
    max-width:calc(100% - 2 * var(--mobile-gutter,20px));
    box-sizing:border-box;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.85);
    border-radius:24px;
    box-shadow:0 14px 40px rgba(12,13,16,.06)
  }
  .process-showcase-foot{padding:20px var(--mobile-gutter,20px) 0;font-size:19px;line-height:1.72;text-wrap:pretty}

  .pd-b1{display:none!important}

  .pd-m{display:block}
  .pd-m-hint{
    font-size:18px;line-height:1.65;color:var(--ink2,rgba(18,20,26,.62));
    text-align:center;margin:0 0 18px;padding:0 4px
  }
  .pd-m-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px
  }
  .pd-m-tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    min-height:112px;padding:16px 12px;border-radius:22px;border:2px solid rgba(18,20,26,.1);
    background:#fff;color:var(--ink,#12141a);cursor:pointer;font:inherit;text-align:center;
    transition:background .22s,border-color .22s,color .22s,box-shadow .22s,transform .18s;
    -webkit-tap-highlight-color:transparent
  }
  .pd-m-tile:active{transform:scale(.98)}
  .pd-m-tile-icon{
    width:48px;height:48px;border-radius:16px;background:rgba(18,20,26,.06);
    display:flex;align-items:center;justify-content:center;flex-shrink:0
  }
  .pd-m-tile-ic{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none}
  .pd-m-tile-label{font-size:16px;font-weight:800;line-height:1.35;letter-spacing:.01em;text-wrap:balance;max-width:100%;padding:0 6px;box-sizing:border-box}
  .pd-m-tile.is-active{
    border-color:transparent;
    background:linear-gradient(145deg,var(--amber2,#e3b262),var(--amber,#c8933f));
    color:#1a1206;box-shadow:0 10px 28px rgba(200,147,63,.22)
  }
  .pd-m-tile.is-active .pd-m-tile-icon{background:rgba(26,18,6,.1)}
  .pd-m-tile:nth-child(7):last-child{grid-column:1/-1;max-width:calc(50% - 6px);margin:0 auto;width:100%}

  .pd-m-detail{margin-top:4px}
  .pd-m-detail-card{
    background:#fff;border:1px solid rgba(18,20,26,.08);border-radius:24px;overflow:hidden;
    box-shadow:0 14px 40px rgba(12,13,16,.08)
  }
  .pd-m-detail-visual{height:min(52vw,240px);background:rgba(18,20,26,.04);overflow:hidden}
  .pd-m-detail-visual img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .pd-m-detail-copy{padding:24px 22px 28px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
  .pd-m-detail-tag{
    align-self:flex-start;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--amber,#c8933f);padding:8px 14px;border-radius:999px;background:rgba(200,147,63,.12);max-width:100%;box-sizing:border-box
  }
  .pd-m-detail-title{
    font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,6.8vw,34px);font-weight:700;
    letter-spacing:-.02em;line-height:1.18;color:var(--ink,#12141a);margin:0;text-wrap:pretty;overflow-wrap:break-word
  }
  .pd-m-detail-desc{font-size:19px;line-height:1.72;color:var(--ink2,rgba(18,20,26,.62));margin:0;text-wrap:pretty;overflow-wrap:break-word}
  .pd-m-detail-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;
    padding:16px 24px;border-radius:999px;background:#1a1c22;color:#fff;
    font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
    align-self:stretch;justify-content:center
  }
  .pd-m-detail-cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}
  .pd-m-detail .pd-publish-flags{margin-top:4px}
  .pd-m-detail .pd-publish-flag-name{font-size:14px}
}

@media(max-width:480px){
  .process-showcase-intro{padding:40px var(--mobile-gutter,18px) 24px}
  .process-showcase-body{padding:0 var(--mobile-gutter,18px) 8px;margin:0 var(--mobile-gutter,18px);max-width:calc(100% - 2 * var(--mobile-gutter,18px))}
  .pd-m-grid{gap:10px}
  .pd-m-tile{min-height:104px;padding:14px 10px;border-radius:20px}
  .pd-m-tile-label{font-size:15px;padding:0 4px}
  .pd-m-detail-copy{padding:22px 18px 26px}
  .pd-m-detail-desc{font-size:18px}
}

@media(prefers-reduced-motion:reduce){
  .pd-b1 .pd-b1-stage.is-leaving-forward,
  .pd-b1 .pd-b1-stage.is-leaving-back,
  .pd-b1 .pd-b1-stage.is-enter-forward,
  .pd-b1 .pd-b1-stage.is-enter-back,
  .pd-b1 .pd-b1-stage.is-enter-forward .pd-stage-visual img,
  .pd-b1 .pd-b1-stage.is-enter-back .pd-stage-visual img{animation:none}
}