/* Product walkthrough v4 (note 19, option 1): one screen, steps left, laptop + phone right */
.product-walk{background:var(--paper,#F5F1EA);padding:110px 0 120px;border-top:1px solid rgba(14,13,11,.08);overflow:hidden}
.pw-wrap{max-width:1360px;margin:0 auto;padding:0 clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.pw-copy .section-h2{text-wrap:balance}
.pw-copy .section-lead{margin-bottom:0}
.pw-steps{display:grid;gap:6px;margin-top:32px}
.pw-step{appearance:none;font:inherit;text-align:left;cursor:pointer;display:flex;gap:14px;align-items:flex-start;width:100%;padding:16px 18px;border-radius:16px;border:1px solid transparent;background:transparent;color:inherit;transition:background .35s,border-color .35s,box-shadow .35s}
.pw-step:hover{background:rgba(255,253,249,.55)}
.pw-step.is-on{background:#fffdf9;border-color:#e6ddcd;box-shadow:0 20px 40px -28px rgba(30,22,12,.35)}
.pw-step:focus-visible{outline:2px solid #C4332A;outline-offset:2px}
.pw-n{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#C4332A;padding-top:5px;flex:0 0 auto}
.pw-txt{display:block;flex:1;min-width:0}
.pw-txt b{display:block;font-size:18px;font-weight:600;color:#8a8276;transition:color .3s}
.pw-step.is-on .pw-txt b{color:#0E0D0B}
.pw-body{display:grid;grid-template-rows:0fr;opacity:0;font-size:14.5px;line-height:1.55;color:#5d574d;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1),opacity .35s,margin .45s;overflow:hidden}
.pw-body{display:block;max-height:0;margin-top:0}
.pw-step.is-on .pw-body{max-height:120px;opacity:1;margin-top:6px}
.pw-l1{color:#0E0D0B;font-weight:500}
.pw-prog{display:block;height:2px;margin-top:0;border-radius:2px;background:#e3d9cc;overflow:hidden;max-height:0;transition:margin .45s,max-height .45s}
.pw-step.is-on .pw-prog{max-height:2px;margin-top:14px}
.pw-prog i{display:block;height:100%;width:100%;background:#C4332A;transform:scaleX(0);transform-origin:left}
.pw-step.is-on .pw-prog i{animation:pw-fill var(--pw-dur,6.5s) linear forwards}
.product-walk.is-paused .pw-prog i{animation-play-state:paused}
@keyframes pw-fill{to{transform:scaleX(1)}}

/* devices */
.pw-devices{position:relative;padding:0 9% 34px 0}
.pw-laptop{position:relative}
.pw-lid{background:#1b1a18;border-radius:18px 18px 6px 6px;padding:13px 13px 17px;box-shadow:0 44px 90px -44px rgba(30,22,12,.5),inset 0 0 0 1px #2c2a27}
.pw-lid::before{content:"";position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#33312d}
.pw-screen{position:relative;aspect-ratio:2560/1390;border-radius:4px;overflow:hidden;background:#F5F1EA}
.pw-base{position:relative;height:15px;margin:0 -5.5%;background:linear-gradient(180deg,#e2ddd5,#bdb7ad 70%,#a8a298);border-radius:0 0 20px 20px;box-shadow:0 22px 34px -18px rgba(30,22,12,.55)}
.pw-base::before{content:"";display:block;width:15%;height:5px;margin:0 auto;background:#a8a298;border-radius:0 0 8px 8px}
.pw-phone{position:absolute;right:0;bottom:0;width:21%;border-radius:clamp(22px,2.6vw,36px);background:#111;padding:clamp(5px,.6vw,8px);box-shadow:0 34px 60px -22px rgba(20,14,8,.6),inset 0 0 0 1px #3a3a3a}
.pw-phone-screen{position:relative;aspect-ratio:390/800;border-radius:clamp(17px,2vw,28px);overflow:hidden;background:#F5F1EA}
.pw-layer{position:absolute;inset:0;opacity:0;transform:scale(1.015);transition:opacity .55s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.pw-layer.is-on{opacity:1;transform:none}
.pw-layer picture,.pw-layer img{display:block;width:100%;height:100%}
.pw-layer img{object-fit:cover;object-position:top center}

/* tablet: stack */
@media (max-width:1080px){
  .pw-wrap{grid-template-columns:1fr;gap:40px}
  .pw-steps{grid-template-columns:repeat(3,1fr);gap:8px}
  .pw-step{flex-direction:column;gap:6px;padding:14px}
  .pw-step.is-on .pw-body{max-height:160px}
}
/* phone: phone mockup only + swipe-like tabs */
@media (max-width:760px){
  .product-walk{padding:72px 0 76px}
  .pw-wrap{gap:28px}
  .pw-steps{grid-template-columns:1fr;gap:4px;margin-top:22px}
  .pw-step{flex-direction:row;padding:13px 14px}
  .pw-txt b{font-size:16px}
  .pw-body{font-size:14px}
  .pw-devices{padding:0;display:flex;justify-content:center}
  .pw-laptop{display:none}
  .pw-phone{position:relative;width:min(64vw,260px);right:auto;bottom:auto}
}
@media (prefers-reduced-motion:reduce){
  .pw-layer,.pw-body,.pw-prog,.pw-step{transition:none}
  .pw-step.is-on .pw-prog i{animation:none;transform:scaleX(1)}
}