/* GPLGuide HOME 2: "How to start" section. Motion runs only after how-to-start.js arms the section. */
.how-start{border-top:1px solid var(--line);position:relative}
.how-start .hs-eyebrow{color:var(--accent);font-weight:600}
.how-start .hs-accent{color:var(--accent);position:relative;white-space:nowrap}
.how-start .hs-accent::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.12em;border-radius:99px;background:currentColor;opacity:.25;transform-origin:left;transform:scaleX(var(--hs-underline,1));transition:transform .9s cubic-bezier(.22,1,.36,1) .35s}

/* Progress rail connecting the three steps */
.hs-rail{position:relative;height:2px;margin:6px 16.66% 34px;background:var(--line);border-radius:2px}
.hs-rail-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),#ffa07c);border-radius:inherit;transform-origin:left;transform:scaleX(var(--hs-rail,1));transition:transform 1.5s cubic-bezier(.65,0,.35,1) .2s}
.hs-rail i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 0 5px var(--bg);transition:background .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
.hs-rail i:nth-of-type(1){left:0}.hs-rail i:nth-of-type(2){left:50%}.hs-rail i:nth-of-type(3){left:100%}
.how-start.is-in .hs-rail i{background:var(--accent)}
.how-start.is-in .hs-rail i:nth-of-type(1){transition-delay:.2s}.how-start.is-in .hs-rail i:nth-of-type(2){transition-delay:.95s}.how-start.is-in .hs-rail i:nth-of-type(3){transition-delay:1.7s}

/* Step cards */
.hs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hs-step{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:0 5px 18px #17120f06;transition:translate .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease,opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.hs-step-head{display:flex;align-items:center;gap:14px}
.hs-num{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:14px;background:var(--pale);color:var(--accent);font-size:15px;font-weight:700;letter-spacing:-.3px}
.hs-step h3{font-size:20px}
.hs-step .hs-step-copy{margin:14px 0 24px;font-size:14px;line-height:1.7;min-height:3.4em}
.hs-stage{margin-top:auto;display:grid;place-items:center;min-height:272px;padding:22px;border-radius:18px;background:var(--surface);border:1px solid #f6e9e3;overflow:hidden;position:relative}
.hs-stage::before{content:"";position:absolute;inset:-40% -40% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ff673314,transparent 70%);pointer-events:none}
@media(hover:hover) and (pointer:fine){.hs-step:hover{translate:0 -6px;border-color:#ffb297;box-shadow:0 22px 44px #a94a211c,0 6px 14px #17120f08}}

/* Step 1: plan card */
.hs-plan{position:relative;width:100%;max-width:270px;padding:26px 22px 18px;border-radius:18px;background:var(--bg);box-shadow:0 14px 34px #17120f12;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.hs-tag{position:absolute;top:-11px;left:50%;translate:-50% 0;padding:3px 12px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:10px;font-weight:600;letter-spacing:.6px;white-space:nowrap}
.hs-plan-label{font-size:10.5px;letter-spacing:1.4px;font-weight:600;color:var(--muted)}
.hs-plan-price{font-size:44px;font-weight:700;letter-spacing:-2px;line-height:1.1;color:var(--ink)}
.hs-plan-price small{font-size:22px;vertical-align:top;line-height:1.7;margin-right:2px}
.hs-plan-btn{position:relative;overflow:hidden;margin-top:8px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 20px;border-radius:99px;background:var(--accent);color:var(--ink);font-size:14px;font-weight:600}
.hs-plan-btn b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:Arial,sans-serif;font-weight:400;font-size:18px}
.hs-plan-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff8c,transparent);transform:skewX(-18deg);opacity:0}
.hs-plan-note{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.hs-plan-note svg,.hs-search svg,.hs-file svg,.hs-active svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Step 2: search and results */
.hs-stage:has(.hs-search){place-items:stretch;align-content:center;gap:12px}
.hs-search{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:14px;color:var(--ink);box-shadow:0 6px 16px #17120f08}
.hs-search svg{width:17px;height:17px;color:var(--muted)}
.hs-typed{white-space:nowrap;overflow:hidden}
.hs-caret{width:2px;height:18px;margin-left:-8px;border-radius:2px;background:var(--accent)}
.hs-results{border-radius:14px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.hs-row{display:flex;align-items:center;gap:11px;padding:10px 12px;font-size:13.5px;color:var(--ink);transition:background .35s ease,opacity .35s ease}
.hs-row+.hs-row{border-top:1px solid #f4ebe7}
.hs-row img{width:30px;height:30px;border-radius:8px;object-fit:contain;background:var(--surface);padding:3px}
.hs-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-row em{font-style:normal;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:99px;background:var(--ink);color:var(--bg);transition:background .3s ease,color .3s ease}
.hs-results.is-filtering .hs-row:not(.is-match){opacity:.42}
.hs-row.is-match{background:var(--pale)}
.hs-row.is-match em{background:var(--accent);color:var(--ink)}
.hs-row.is-done em::before{content:"✓ "}

/* Step 3: WordPress upload window */
.hs-wp{width:100%;border-radius:14px;background:var(--bg);box-shadow:0 14px 34px #17120f12;overflow:hidden}
.hs-wp-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--ink);color:#fff;font-size:12px}
.hs-wp-bar i{width:8px;height:8px;border-radius:50%;background:#ffffff38}
.hs-wp-bar i:first-child{background:var(--accent)}
.hs-wp-bar span{margin-left:8px;opacity:.85}
.hs-wp-body{padding:16px}
.hs-drop{display:flex;flex-direction:column;gap:12px;padding:16px;border:2px dashed #ecd9d0;border-radius:12px;transition:border-color .3s ease,background .3s ease}
.hs-file{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink)}
.hs-file svg{width:22px;height:22px;color:var(--accent)}
.hs-file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-progress{height:6px;border-radius:99px;background:#f4ebe7;overflow:hidden}
.hs-progress span{display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:left}
.hs-wp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.hs-install{padding:8px 15px;border-radius:9px;background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:600}
.hs-active{display:flex;align-items:center;gap:6px;color:#13804b;font-size:13px;font-weight:600}
.hs-active svg{width:16px;height:16px;stroke-width:2.6}

.hs-outro{margin:52px auto 0;max-width:760px;text-align:center;font-size:17px}
.hs-outro strong{color:var(--ink);font-weight:600}

/* Armed state: hidden until in view (only when JS is running) */
.how-start.is-armed{--hs-rail:0;--hs-underline:0}
.how-start.is-armed .hs-step{opacity:0;transform:translateY(30px)}
.how-start.is-armed.is-in{--hs-rail:1;--hs-underline:1}
.how-start.is-armed.is-in .hs-step{opacity:1;transform:none}
.how-start.is-armed.is-in .hs-step:nth-child(2){transition-delay:0s,0s,0s,.15s,.15s}
.how-start.is-armed.is-in .hs-step:nth-child(3){transition-delay:0s,0s,0s,.3s,.3s}

/* Looping micro-animations while visible */
.how-start.is-in .hs-plan{animation:hs-float 5s ease-in-out infinite}
.how-start.is-in .hs-plan-btn::after{animation:hs-shine 3.2s ease-in-out 1s infinite}
.how-start.is-in .hs-caret{animation:hs-blink 1s steps(1) infinite}
.how-start.is-in .hs-file{animation:hs-file-in 6s cubic-bezier(.22,1,.36,1) infinite}
.how-start.is-in .hs-progress span{animation:hs-fill 6s ease-in-out infinite}
.how-start.is-in .hs-drop{animation:hs-drop 6s ease infinite}
.how-start.is-in .hs-install{animation:hs-press 6s ease infinite}
.how-start.is-in .hs-active{animation:hs-pop 6s cubic-bezier(.34,1.56,.64,1) infinite}
.how-start.is-paused *{animation-play-state:paused!important}
@keyframes hs-float{50%{translate:0 -6px}}
@keyframes hs-shine{0%{left:-60%;opacity:0}10%{opacity:1}40%,100%{left:130%;opacity:0}}
@keyframes hs-blink{50%{opacity:0}}
@keyframes hs-file-in{0%{opacity:0;translate:0 -14px}10%,92%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
@keyframes hs-fill{0%,12%{transform:scaleX(0)}48%,92%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes hs-drop{0%,8%{border-color:var(--accent);background:#fff8f5}20%,100%{border-color:#ecd9d0;background:transparent}}
@keyframes hs-press{0%,52%{scale:1}56%{scale:.92}60%,100%{scale:1}}
@keyframes hs-pop{0%,58%{opacity:0;scale:.6}66%,92%{opacity:1;scale:1}100%{opacity:0;scale:1}}

@media(max-width:1024px){.hs-steps{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.hs-rail{display:none}.hs-step .hs-step-copy{min-height:0}}
@media(max-width:600px){.hs-step{padding:20px}.hs-stage{min-height:220px;padding:16px}.hs-outro{font-size:15px;margin-top:36px}.how-start .hs-accent{white-space:normal}}
@media(prefers-reduced-motion:reduce){
.how-start *,.how-start *::before,.how-start *::after{animation:none!important;transition:none!important}
.how-start.is-armed .hs-step{opacity:1;transform:none}
.how-start.is-armed{--hs-rail:1;--hs-underline:1}
.how-start .hs-rail i{background:var(--accent)}
}