/* /app-development: "How we build your app" (Max, 4 Nov 2026).
   After 21st.dev's Timeline (Aceternity, id 857): sticky step titles on the left, a line that fills as you scroll and lights
   each step's dot, and a card per step with a small live-looking visual. Sits on a white band. Plain HTML/CSS + assets/app-process.js. */

.pc-section{--ss-ink:#0e0a17;--ss-mute:#4f4860;--ss-accent:#6d28d9;padding:110px 0 100px;color:#0e0a17}
.theme-apps main.svx>section.pc-section{background:#fff!important}
.theme-apps main.svx>section.pc-section::after{display:none}
.ap-inner-page.theme-apps main .pc-section .ss-h2{color:#0e0a17}

.pc-flow{position:relative;margin-top:12px}
.pc-line{position:absolute;left:11px;top:14px;bottom:40px;width:2px;border-radius:2px;background:#ece6f6;overflow:hidden}
.pc-line i{position:absolute;left:0;top:0;width:100%;height:var(--fill,0px);border-radius:inherit;background:linear-gradient(180deg,#c4b5fd 0%,#7c3aed 70%,#6d28d9 100%);
  box-shadow:0 0 12px rgba(124,58,237,.6)}

.pc-step{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;padding:0 0 72px}
.pc-step:last-child{padding-bottom:24px}
.pc-side{position:sticky;top:120px;align-self:start;padding-left:48px}
.pc-dot{position:absolute;left:2px;top:6px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #e4dcf2;transition:box-shadow .4s ease}
.pc-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#d8cdee;transition:background .4s ease,transform .4s ease}
.pc-step.is-on .pc-dot{box-shadow:0 0 0 2px #7c3aed,0 0 0 7px rgba(124,58,237,.15)}
.pc-step.is-on .pc-dot::after{background:#6d28d9;transform:scale(1.15)}
.pc-when{display:inline-block;margin-bottom:12px;padding:6px 11px;border-radius:999px;background:#f3eefb;color:#6d28d9;font:600 12px/1 Inter,sans-serif;letter-spacing:.2px}
.ap-inner-page main .pc-side h3{margin:0;font:600 clamp(26px,2.6vw,36px)/1.08 Fustat,Inter,sans-serif;letter-spacing:-.035em;color:#b8aecb;transition:color .4s ease}
.ap-inner-page main .pc-step.is-on .pc-side h3{color:#0e0a17}

.pc-card{display:grid;gap:24px;padding:26px;border-radius:26px;background:#faf7fe;box-shadow:inset 0 0 0 1px rgba(76,29,149,.07);
  opacity:.35;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pc-step.is-on .pc-card{opacity:1;transform:none}
.pc-copy p{margin:0;font:400 16px/1.65 Inter,sans-serif;color:#4f4860}
.pc-copy .pc-you{margin-top:14px;padding:12px 14px;border-radius:14px;background:#fff;font-size:14.5px;color:#2a2340;box-shadow:0 0 0 1px rgba(76,29,149,.06)}
.pc-you b{color:#6d28d9;font-weight:600}
.pc-vis{margin:0;padding:0;list-style:none}
.pc-foot{margin:28px 0 0 48px;font:500 13.5px/1.5 Inter,sans-serif;color:#8a7fa3}

/* step visuals share a white panel */
.pc-quote,.pc-phones,.pc-builds,.pc-stores,.pc-live{padding:18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(76,29,149,.07),0 24px 50px -36px rgba(59,26,98,.45)}

/* 1 quote */
.pc-quote{position:relative;font:400 13.5px/1.3 Inter,sans-serif;color:#4f4860;overflow:hidden}
.pc-quote-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid #f1ecf8}
.pc-quote-top img{height:20px;width:auto}
.pc-quote-top span{font:600 11px/1 Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#a197b8}
.pc-quote-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f6f2fb}
.pc-quote-row b{font:700 15px/1 Fustat,Inter,sans-serif;color:#0e0a17}
.pc-quote-split{display:flex;gap:16px;margin-top:12px;font-size:12.5px}
.pc-quote-split span{display:inline-flex;align-items:center;gap:6px}
.pc-quote-split i{width:8px;height:8px;border-radius:50%;background:#7c3aed}
.pc-quote-split span+span i{background:#c4b5fd}
.pc-stamp{position:absolute;right:16px;bottom:14px;padding:6px 10px;border:2px solid #16a34a;border-radius:8px;color:#16a34a;font:700 11px/1 Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;
  transform:rotate(-8deg) scale(1.6);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1) .5s,opacity .3s ease .5s}
.is-on .pc-stamp{transform:rotate(-8deg) scale(1);opacity:1}

/* 2 phones */
.pc-phones{display:flex;justify-content:center;align-items:flex-end;gap:14px;background:linear-gradient(180deg,#f6f1fd,#fff)}
.pc-phone{display:flex;flex-direction:column;gap:7px;width:96px;height:180px;padding:12px 9px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #e9e1f5,0 18px 34px -20px rgba(59,26,98,.5);
  transform:translateY(20px);opacity:0;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
.pc-phone--mid{height:200px;transition-delay:.12s}
.pc-phone:last-child{transition-delay:.24s}
.is-on .pc-phone{transform:none;opacity:1}
.pc-phone i{display:block;border-radius:6px;background:#efe9f8}
.pc-phone .h{height:8px;width:55%;background:#d8cdee}
.pc-phone .b1{height:60px;background:linear-gradient(135deg,#7c3aed,#c084fc)}
.pc-phone .b2{height:60px;background:linear-gradient(135deg,#4c1d95,#7c3aed)}
.pc-phone .l{height:7px}
.pc-phone .l.s{width:65%}
.pc-phone .btn{height:20px;margin-top:auto;border-radius:999px;background:#6d28d9}
.pc-phone .card{height:36px;background:#f6f2fc;box-shadow:inset 0 0 0 1px #ece5f6}
.pc-phone .tab{height:14px;margin-top:auto;background:#f1ecf8}

/* 3 builds */
.pc-builds{display:grid;gap:8px}
.pc-builds li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#faf8fe;
  opacity:0;transform:translateX(14px);transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--i)*.14s + .2s)}
.is-on .pc-builds li{opacity:1;transform:none}
.pc-builds .v{padding:5px 7px;border-radius:7px;background:#ede9fe;color:#6d28d9;font:600 11.5px/1 ui-monospace,"SF Mono",Menlo,monospace}
.pc-builds b{display:block;font:600 13.5px/1.25 Inter,sans-serif;color:#0e0a17}
.pc-builds small{display:block;margin-top:2px;font:400 12px/1.2 Inter,sans-serif;color:#8a7fa3}
.pc-builds em{font:600 11.5px/1 Inter,sans-serif;font-style:normal;color:#15803d}
.pc-builds li.now em{color:#6d28d9;display:inline-flex;align-items:center;gap:6px}
.pc-builds li.now em::before{content:"";width:7px;height:7px;border-radius:50%;background:#7c3aed;animation:pcBlink 1.4s ease-in-out infinite}
@keyframes pcBlink{50%{opacity:.25}}

/* 4 stores */
.pc-stores{display:grid;gap:10px}
.pc-store{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#faf8fe}
.pc-store img{width:36px;height:36px}
.pc-store b{display:block;font:600 14px/1.2 Inter,sans-serif;color:#0e0a17}
.pc-store small{font:400 12px/1.2 Inter,sans-serif;color:#8a7fa3}
.pc-status{position:relative;display:inline-flex;align-items:center;gap:6px;min-width:118px;justify-content:flex-end;font:600 12px/1 Inter,sans-serif}
.pc-status i{width:8px;height:8px;border-radius:50%;background:#f59e0b;transition:background .3s ease 1.2s}
.pc-status em{font-style:normal;transition:opacity .3s ease 1.2s}
.pc-status .a{color:#a16207}
.pc-status .b{position:absolute;right:0;color:#15803d;opacity:0}
.is-on .pc-status i{background:#22c55e}
.is-on .pc-status .a{opacity:0}
.is-on .pc-status .b{opacity:1}
.pc-store+.pc-store .pc-status i,.pc-store+.pc-store .pc-status em{transition-delay:1.6s}

/* 5 live */
.pc-live{display:grid;gap:4px;background:linear-gradient(135deg,#2a1454,#4c1d95 60%,#6d28d9);box-shadow:0 30px 60px -36px rgba(59,26,98,.7)}
.pc-live-badge{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-bottom:10px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:600 13px/1 Inter,sans-serif}
.pc-live-badge i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pcPing 2s ease-out infinite}
@keyframes pcPing{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.pc-live-row{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);font:400 14px/1.3 Inter,sans-serif;color:#d6ccea}
.pc-live-row b{color:#fff;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .pc-card,.pc-phone,.pc-builds li,.pc-stamp,.pc-status *{transition:none}
  .pc-live-badge i,.pc-builds li.now em::before{animation:none}
}
@media (max-width:980px){
  .pc-step{grid-template-columns:1fr;gap:16px;padding-bottom:48px}
  .pc-side{position:relative;top:auto}
}
@media (max-width:640px){
  .pc-section{padding:72px 0 64px}
  .pc-side,.pc-foot{padding-left:40px}
  .pc-foot{margin-left:0}
  .pc-card{margin-left:40px;padding:18px;border-radius:22px}
  .pc-copy p{font-size:15px}
  .pc-phone{width:78px;height:150px}
  .pc-phone--mid{height:166px}
  .pc-phones{gap:10px}
  .pc-status{min-width:0}
}

/* sticky panels need main to clip without becoming a scroll container */
main.svx{overflow:visible;overflow-x:clip}