/* Onboarding preview: Connect your CRM */
.ob{padding:40px 0 72px}
.ob-card{max-width:860px;margin:auto;background:#fff;color:var(--text);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(20px,4vw,36px)}
.stepper{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 26px;flex-wrap:wrap}
.stepper li{flex:1 1 120px;display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted)}
.stepper li::before{content:"";height:5px;border-radius:99px;background:var(--line)}
.stepper li.done::before{background:var(--mint-d)}
.stepper li.now{color:var(--text)}
.stepper li.now::before{background:linear-gradient(90deg,var(--mint-d),var(--mint))}
.stepper li.opt{font-style:italic}
.ob-card h1{font-size:clamp(1.6rem,3.6vw,2.2rem);margin-bottom:6px}
.ob-card .sub{color:var(--muted);margin-bottom:22px}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px}
.tile{font:inherit;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 14px;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;color:var(--text)}
.tile:hover{border-color:#c5cddd;transform:translateY(-2px);box-shadow:var(--shadow)}
.tile[aria-pressed="true"]{border-color:var(--mint-d);box-shadow:0 0 0 4px rgba(46,230,168,.2)}
.tile[aria-pressed="true"]::after{content:"✓";position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--mint-d);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center}
.ini{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:1rem;color:#fff;letter-spacing:-.02em}
.tile b{font-size:.95rem;line-height:1.25}
.tile small{color:var(--muted);font-size:.76rem;line-height:1.3}
.search{position:relative}
.search input{font:inherit;width:100%;padding:14px 16px 14px 46px;border-radius:14px;border:1.5px solid #d6dbe6;background:var(--bg-soft)}
.search input:focus{outline:none;border-color:var(--mint-d);background:#fff;box-shadow:0 0 0 4px rgba(46,230,168,.2)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.results{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:340px;overflow:auto}
.results button{font:inherit;width:100%;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;color:var(--text)}
.results button:hover{border-color:#c5cddd;background:var(--bg-soft)}
.results button[aria-pressed="true"]{border-color:var(--mint-d);background:#effcf7}
.results .ini{width:34px;height:34px;border-radius:9px;font-size:.8rem;flex:0 0 34px}
.results span small{display:block;color:var(--muted);font-size:.74rem}
.count{font-size:.8rem;color:var(--muted);margin-top:10px}
.none{margin-top:14px;background:var(--bg-soft);border:1px dashed #cdd4e2;border-radius:14px;padding:18px}
.none h3{font-size:1.05rem;margin-bottom:4px}
.none p{color:var(--muted);margin:0 0 12px;font-size:.92rem}
.none form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.none input{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid #d6dbe6;width:100%}
.none input:focus{outline:none;border-color:var(--mint-d);box-shadow:0 0 0 4px rgba(46,230,168,.2)}
.ob-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.ob-foot .sel{font-size:.92rem;color:var(--muted)}
.ob-foot .sel b{color:var(--text)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.oauth{margin-top:18px;background:var(--ink);color:var(--on-dark);border-radius:16px;padding:18px 20px;display:none;gap:14px;align-items:flex-start}
.oauth.show{display:flex}
.oauth b{color:#fff}
.oauth p{margin:4px 0 0;color:var(--on-dark-2);font-size:.9rem}
.ob-note{max-width:860px;margin:18px auto 0;text-align:center;color:var(--on-dark-2);font-size:.85rem}
.ob-note a{color:var(--mint)}
@media (max-width:820px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}.results{grid-template-columns:1fr}.none form{grid-template-columns:1fr}}