/* /pro-landing "How it works": five steps, each with a screen rebuilt in HTML/CSS. Uses the page's --ql-* variables. */
.phw{background:linear-gradient(180deg,#fff,#f8fafc 40%,#fff);overflow:hidden}
.phw-eyebrow{display:inline-flex;gap:.35rem;align-items:center;background:rgba(30,79,216,.09);color:var(--ql-primary);font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px}
.phw-step{position:relative;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.phw-step:not(:last-of-type)::after{content:"";position:absolute;left:50%;bottom:calc(-1 * clamp(2.5rem,6vw,4.5rem) + .4rem);width:2px;height:calc(clamp(2.5rem,6vw,4.5rem) - .8rem);background:repeating-linear-gradient(var(--ql-line) 0 6px,transparent 6px 12px);display:none}
@media (min-width:992px){.phw-step:not(:last-of-type)::after{display:block}.phw-flip .phw-text{order:2}}

.phw-num{width:44px;height:44px;border-radius:50%;background:var(--ql-primary);color:#fff;font-weight:900;font-size:1.15rem;display:grid;place-items:center;margin-bottom:.9rem;box-shadow:0 0 0 6px rgba(30,79,216,.12)}
.phw-text h3{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.02em;color:var(--ql-dark);display:flex;gap:.55rem;align-items:center}
.phw-text h3 .bi{color:var(--ql-primary);font-size:1.25rem}
.phw-text p{color:var(--ql-muted);font-size:1.02rem}
.phw-points{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.45rem}
.phw-points li{display:flex;gap:.55rem;align-items:flex-start;font-weight:600;color:#1e293b;font-size:.95rem}
.phw-points .bi{color:var(--ql-accent);margin-top:.15rem}

/* screen frame */
.phw-screen{background:#fff;border:1px solid var(--ql-line);border-radius:16px;box-shadow:0 24px 48px -20px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.06);overflow:hidden;max-width:620px;margin:0 auto;text-align:left}
.phw-bar{display:flex;align-items:center;gap:.4rem;background:#f1f4f9;border-bottom:1px solid var(--ql-line);padding:.55rem .8rem}
.phw-bar>i{width:10px;height:10px;border-radius:50%;background:#cbd5e1;display:block}
.phw-bar>i:nth-child(1){background:#fda4af}.phw-bar>i:nth-child(2){background:#fde68a}.phw-bar>i:nth-child(3){background:#86efac}
.phw-url{flex:1;margin:0 .5rem;background:#fff;border:1px solid var(--ql-line);border-radius:999px;padding:.15rem .7rem;font-size:.72rem;color:var(--ql-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phw-tag{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#92400e;background:#fef3c7;border-radius:999px;padding:.12rem .55rem}
.phw-body{padding:1rem;background:#f8fafc;font-size:.88rem;color:#1e293b}
.phw-av{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--ql-primary),#3b6cf0);color:#fff;font-weight:900;display:grid;place-items:center;flex:none}
.phw-av.sm{width:38px;height:38px;border-radius:50%;font-size:.8rem;background:linear-gradient(135deg,#0ca678,#34d399)}

/* 1 profile */
.phw-profile{background:#fff;border:1px solid var(--ql-line);border-radius:12px;overflow:hidden}
.phw-cover{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#e2e8f0}
.phw-cover span{height:78px;display:grid;place-items:center;color:#94a3b8;font-size:1.4rem;background:linear-gradient(135deg,#dbeafe,#e0f2fe)}
.phw-cover span:nth-child(2){background:linear-gradient(135deg,#dcfce7,#ccfbf1)}.phw-cover span:nth-child(3){background:linear-gradient(135deg,#fef3c7,#ffedd5)}
.phw-id{display:flex;gap:.8rem;align-items:center;padding:.9rem 1rem .5rem}
.phw-name{font-weight:800;font-size:1.02rem;color:var(--ql-dark)}
.phw-sub{color:var(--ql-muted);font-size:.8rem}
.phw-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.3rem 1rem .8rem}
.phw-chips span{background:rgba(30,79,216,.09);color:var(--ql-primary);font-weight:700;font-size:.76rem;border-radius:999px;padding:.25rem .65rem}
.phw-chips .add{background:#fff;border:1px dashed #94a3b8;color:#64748b}
.phw-rows{border-top:1px solid var(--ql-line);padding:.7rem 1rem;display:grid;gap:.4rem;font-size:.82rem}
.phw-rows .bi{color:var(--ql-accent);margin-right:.35rem}
.phw-rows em{font-style:normal;color:#94a3b8;font-size:.72rem;margin-left:.3rem}

/* 2 job board */
.phw-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.7rem}
.phw-tabs span{background:#fff;border:1px solid var(--ql-line);border-radius:10px;padding:.5rem;text-align:center;font-weight:700;font-size:.8rem;color:#475569}
.phw-tabs .on{background:#e8eefc;border-color:#9db4ee;color:var(--ql-primary)}
.phw-job{display:flex;gap:.6rem;background:#fff;border:1px solid var(--ql-line);border-radius:12px;padding:.75rem .85rem;margin-bottom:.55rem}
.phw-job .dot{width:9px;height:9px;border-radius:50%;background:var(--ql-accent);margin-top:.35rem;flex:none}
.phw-job .dot.old{background:#cbd5e1}
.phw-job .grow{flex:1;min-width:0}
.phw-job .top{display:flex;justify-content:space-between}
.phw-job .top small{color:#94a3b8}
.phw-job .t{font-weight:800;color:var(--ql-dark)}
.phw-job .m{color:var(--ql-muted);font-size:.78rem}
.phw-job .tags{display:flex;gap:.3rem;flex-wrap:wrap;margin:.35rem 0}
.phw-job .tags span{background:#f1f5f9;border-radius:6px;padding:.1rem .5rem;font-size:.7rem;font-weight:600;color:#475569}
.phw-job .f{font-size:.74rem;color:var(--ql-muted)}

/* 3 quote panel */
.phw-quote{background:#fff;border:1px solid var(--ql-line);border-radius:12px;padding:1rem;position:relative}
.phw-quote .hd{font-weight:800;font-size:1.02rem;color:var(--ql-dark);margin-bottom:.7rem}
.phw-quote .hd small{display:block;font-weight:500;color:var(--ql-muted);font-size:.76rem}
.phw-quote .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:.8rem}
.phw-quote .seg span{border:1px solid var(--ql-line);border-radius:9px;text-align:center;padding:.4rem .2rem;font-size:.74rem;font-weight:700;color:#64748b}
.phw-quote .seg .on{border-color:var(--ql-primary);background:rgba(30,79,216,.07);color:var(--ql-primary)}
.phw-quote label{font-size:.74rem;font-weight:700;color:#475569;display:block;margin-bottom:.25rem}
.phw-quote label em{font-style:normal;font-weight:500;color:#94a3b8}
.phw-quote .price{display:flex;align-items:center;gap:.25rem;border:2px solid var(--ql-primary);border-radius:10px;padding:.55rem .8rem;font-size:1.3rem;font-weight:800;margin-bottom:.8rem;background:#fff}
.phw-quote .typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.phw-quote .caret{width:2px;height:1.2em;background:var(--ql-primary);display:inline-block}
.phw-quote .msg{border:1px solid var(--ql-line);border-radius:10px;padding:.6rem .75rem;color:#475569;font-size:.82rem;line-height:1.45;margin-bottom:.8rem;min-height:4.4em}
.phw-quote .send{background:var(--ql-accent);color:#fff;font-weight:800;text-align:center;border-radius:10px;padding:.7rem}
.phw-quote .sent{position:absolute;inset:auto .8rem .8rem .8rem;background:#ecfdf5;border:1px solid #6ee7b7;color:#047857;font-weight:700;border-radius:10px;padding:.7rem .8rem;font-size:.82rem;opacity:0}
.phw-quote .sent .bi{margin-right:.3rem}

/* 4 contact */
.phw-contact{background:#fff;border:1px solid var(--ql-line);border-radius:12px;padding:1rem}
.phw-contact .done{background:#ecfdf5;color:#047857;font-weight:700;border-radius:9px;padding:.45rem .7rem;font-size:.8rem;margin-bottom:.8rem}
.phw-contact .who{display:flex;gap:.65rem;align-items:center;margin-bottom:.7rem}
.phw-contact .who small{display:block;color:var(--ql-muted)}
.phw-contact .act{display:flex;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap}
.phw-contact .act span{border-radius:999px;padding:.4rem .9rem;font-weight:700;font-size:.82rem}
.phw-contact .call{background:rgba(30,79,216,.09);color:var(--ql-primary)}
.phw-contact .wa{background:#dcfce7;color:#15803d}
.phw-contact .bubble{display:flex;margin-bottom:.45rem}
.phw-contact .bubble span{max-width:80%;padding:.5rem .75rem;border-radius:14px;font-size:.83rem}
.phw-contact .bubble.in span{background:#f1f5f9;border-bottom-left-radius:4px}
.phw-contact .bubble.out{justify-content:flex-end}
.phw-contact .bubble.out span{background:var(--ql-primary);color:#fff;border-bottom-right-radius:4px}
.phw-contact .hint{color:var(--ql-muted);font-size:.76rem;margin-top:.6rem}

/* 5 reviews */
.phw-reviews{display:grid;gap:.7rem}
.phw-reviews .score{background:#fff;border:1px solid var(--ql-line);border-radius:12px;padding:.9rem;text-align:center}
.phw-reviews .big{font-size:2.4rem;font-weight:900;line-height:1;color:var(--ql-dark)}
.phw-reviews .stars{color:var(--ql-star);letter-spacing:2px;margin:.2rem 0}
.phw-reviews .score small{color:#94a3b8}
.phw-reviews .rv{background:#fff;border:1px solid var(--ql-line);border-radius:12px;padding:.8rem .9rem}
.phw-reviews .rv span{color:var(--ql-muted);font-size:.76rem;margin-left:.4rem}
.phw-reviews .rv p{margin:.3rem 0 0;color:#475569}
.phw-reviews .ask{background:linear-gradient(135deg,#eff5ff,#ecfdf5);border:1px solid var(--ql-line);border-radius:12px;padding:.8rem .9rem}
.phw-reviews .ask .t{font-weight:800;margin-bottom:.5rem}
.phw-reviews .btns{display:flex;gap:.45rem;flex-wrap:wrap}
.phw-reviews .btns span{background:#fff;border:1px solid var(--ql-line);border-radius:999px;padding:.35rem .8rem;font-weight:700;font-size:.78rem}
.phw-reviews .btns .wa{background:#dcfce7;color:#15803d;border-color:#bbf7d0}

/* motion: only once the script has run (no script = everything simply visible) */
.phw-ready .phw-step .phw-text,.phw-ready .phw-step .phw-screen{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.phw-ready .phw-step .phw-screen{transition-delay:.12s}
.phw-ready .phw-step.in .phw-text,.phw-ready .phw-step.in .phw-screen{opacity:1;transform:none}
.phw-ready .phw-step .phw-job,.phw-ready .phw-step .rv,.phw-ready .phw-step .ask,.phw-ready .phw-step .bubble{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.phw-ready .phw-step.in .phw-job-1{opacity:1;transform:none;transition-delay:.5s}
.phw-ready .phw-step.in .phw-job-2{opacity:1;transform:none;transition-delay:.75s}
.phw-ready .phw-step.in .phw-job-3{opacity:1;transform:none;transition-delay:1s}
.phw-ready .phw-step.in .rv{opacity:1;transform:none;transition-delay:.9s}
.phw-ready .phw-step.in .ask{opacity:1;transform:none;transition-delay:1.5s}
.phw-ready .phw-step.in .bubble.in{opacity:1;transform:none;transition-delay:.8s}
.phw-ready .phw-step.in .bubble.out{opacity:1;transform:none;transition-delay:1.5s}
.phw-ready .phw-step .typed{width:0}
.phw-ready .phw-step.in .typed{width:3ch;transition:width .7s steps(3) .7s}
.phw-ready .phw-step.in .caret{animation:phwBlink 1s steps(2) 6}
.phw-ready .phw-step.in .phw-quote .sent{animation:phwSent .5s ease 2.6s forwards}
.phw-ready .phw-step.in .phw-quote .send{animation:phwPress .4s ease 2.4s}
.phw-ready .phw-step .stars .bi{opacity:.15;transform:scale(.6)}
.phw-ready .phw-step.in .stars .bi{opacity:1;transform:none;transition:opacity .3s ease,transform .3s cubic-bezier(.3,1.6,.6,1)}
.phw-ready .phw-step.in .s1{transition-delay:.5s}.phw-ready .phw-step.in .s2{transition-delay:.62s}.phw-ready .phw-step.in .s3{transition-delay:.74s}.phw-ready .phw-step.in .s4{transition-delay:.86s}.phw-ready .phw-step.in .s5{transition-delay:.98s}
@keyframes phwBlink{50%{opacity:0}}
@keyframes phwSent{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes phwPress{50%{transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){
  .phw-ready .phw-step *{transition:none!important;animation:none!important}
  .phw-ready .phw-step .phw-text,.phw-ready .phw-step .phw-screen,.phw-ready .phw-step .phw-job,.phw-ready .phw-step .rv,.phw-ready .phw-step .ask,.phw-ready .phw-step .bubble,.phw-ready .phw-step .stars .bi{opacity:1;transform:none}
  .phw-ready .phw-step .typed{width:3ch}
  .phw-quote .sent{opacity:1}
}