/* ============================================================
   Welcome / onboarding pages — shared styles
   Post-install onboarding + newsletter opt-in.
   ============================================================ */

.wl-wrap{max-width:1060px;margin:0 auto;padding:0 28px}

/* ---------- Hero ---------- */
.wl-hero{position:relative;padding:132px 0 64px;text-align:center;overflow:hidden}
.wl-hero__glow{position:absolute;inset:auto 50% auto 50%;transform:translateX(-50%);
  width:900px;height:520px;top:-160px;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--wl-accent-glow) 0%,transparent 68%);
  filter:blur(12px)}
.wl-eyebrow{position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--wl-display);font-size:11px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--wl-accent);
  border:1px solid var(--wl-accent-line);background:var(--wl-accent-soft);
  padding:7px 15px;border-radius:100px;margin-bottom:26px}
.wl-eyebrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.wl-hero h1{position:relative;font-family:var(--wl-display);font-size:clamp(38px,6.2vw,68px);
  font-weight:800;line-height:1.04;letter-spacing:-1px;margin-bottom:20px}
.wl-hero h1 em{font-style:normal;color:var(--wl-accent)}
.wl-hero__sub{position:relative;max-width:640px;margin:0 auto;font-size:clamp(16px,2vw,19px);
  color:var(--wl-muted);line-height:1.62}

/* ---------- Section headings ---------- */
.wl-section{padding:52px 0}
.wl-section__head{max-width:660px;margin:0 auto 40px;text-align:center}
.wl-section__head h2{font-family:var(--wl-display);font-size:clamp(26px,3.6vw,38px);
  font-weight:800;letter-spacing:-.6px;line-height:1.1;margin-bottom:12px}
.wl-section__head p{color:var(--wl-muted);font-size:16px}

/* ---------- Setup steps ---------- */
.wl-steps{display:grid;gap:14px;counter-reset:wlstep}
.wl-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--wl-card);border:1px solid var(--wl-line);border-radius:16px;
  padding:24px 26px;transition:border-color .25s ease,transform .25s ease}
.wl-step:hover{border-color:var(--wl-accent-line);transform:translateY(-2px)}
.wl-step__icon{position:relative;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;flex:0 0 auto;
  background:var(--wl-accent-soft);border:1px solid var(--wl-accent-line)}
.wl-step__icon svg{width:21px;height:21px;stroke:var(--wl-accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wl-step__n{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;
  border-radius:100px;background:var(--wl-accent);color:#fff;
  font-family:var(--wl-display);font-size:11px;font-weight:800;
  display:grid;place-items:center;line-height:1}
.wl-step h3{font-family:var(--wl-display);font-size:19px;font-weight:700;
  letter-spacing:-.2px;margin-bottom:6px;line-height:1.25}
.wl-step p{color:var(--wl-muted);font-size:15px;line-height:1.6}
.wl-step__tag{display:inline-block;margin-top:10px;font-family:var(--wl-display);
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--wl-accent);border:1px solid var(--wl-accent-line);
  border-radius:100px;padding:4px 10px}

/* ---------- Newsletter ---------- */
.wl-news{position:relative;overflow:hidden;background:var(--wl-card);
  border:1px solid var(--wl-line);border-radius:22px;padding:clamp(30px,5vw,52px);
  text-align:center}
.wl-news__glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:640px;height:340px;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--wl-accent-glow) 0%,transparent 70%)}
.wl-news__inner{position:relative}
.wl-news h2{font-family:var(--wl-display);font-size:clamp(24px,3.4vw,34px);font-weight:800;
  letter-spacing:-.5px;margin-bottom:12px;line-height:1.12}
.wl-news p{color:var(--wl-muted);max-width:520px;margin:0 auto 26px;font-size:16px}
.wl-form{display:flex;gap:10px;max-width:470px;margin:0 auto;flex-wrap:wrap}
.wl-form input[type=email]{flex:1 1 240px;min-width:0;padding:14px 16px;font:inherit;
  font-size:15px;color:var(--wl-text);background:var(--wl-input);
  border:1px solid var(--wl-line-2);border-radius:11px;transition:border-color .2s ease}
.wl-form input[type=email]::placeholder{color:var(--wl-muted-2)}
.wl-form input[type=email]:focus{outline:none;border-color:var(--wl-accent);
  box-shadow:0 0 0 3px var(--wl-accent-soft)}
.wl-form button{flex:0 0 auto;padding:14px 26px;font:inherit;font-size:15px;font-weight:600;
  color:#fff;background:var(--wl-accent);border:none;border-radius:11px;cursor:pointer;
  transition:filter .2s ease,opacity .2s ease}
.wl-form button:hover:not(:disabled){filter:brightness(1.12)}
.wl-form button:disabled{opacity:.55;cursor:not-allowed}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-news__note{margin:16px auto 0;font-size:13px;color:var(--wl-muted-2);max-width:470px}
.wl-msg{margin:16px auto 0;max-width:470px;font-size:15px;min-height:1.4em;
  display:flex;align-items:center;justify-content:center;gap:8px}
.wl-msg svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wl-msg--ok{color:var(--wl-ok)}
.wl-msg--err{color:var(--wl-err)}

/* ---------- Help links ---------- */
.wl-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.wl-link{display:block;background:var(--wl-card);border:1px solid var(--wl-line);
  border-radius:14px;padding:22px;transition:border-color .25s ease,transform .25s ease}
.wl-link:hover{border-color:var(--wl-accent-line);transform:translateY(-2px)}
.wl-link h4{font-family:var(--wl-display);font-size:16px;font-weight:700;margin-bottom:5px}
.wl-link p{color:var(--wl-muted);font-size:14px;line-height:1.55}
.wl-link span{display:inline-block;margin-top:9px;color:var(--wl-accent);font-size:14px;
  font-weight:600}

.wl-disclaimer{margin-top:44px;padding-top:26px;border-top:1px solid var(--wl-line);
  text-align:center;font-size:13px;color:var(--wl-muted-2);line-height:1.6}

@media (max-width:640px){
  .wl-hero{padding:104px 0 44px}
  .wl-step{grid-template-columns:1fr;gap:14px;padding:22px}
  .wl-form button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .wl-step,.wl-link{transition:none}
  .wl-step:hover,.wl-link:hover{transform:none}
}