/* ════════════════════════════════════════════════════════════
   feature-tour.css — embedded (in-hero) tour chrome + new screens.
   Loads AFTER tour.css. Strips the dark letterbox so the demo sits
   cleanly inside the hero's window frame, and adds the new screens.
   ════════════════════════════════════════════════════════════ */

/* ── Embed shell: fill the iframe, no dark bg / window shadow ── */
html,body{height:100%}
body{background:var(--bg);overflow:hidden}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--bg)}
#canvas{
  border-radius:0;box-shadow:none;background:var(--bg);
  transform-origin:top left;
}
.app{height:800px}
.main{height:740px}

/* hide the base full-screen tour chrome if present */
#chrome,.endcard{display:none!important}

/* ── In-frame caption pill ── */
.fcap{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(6px);
  z-index:70;max-width:min(78%,560px);
  display:flex;align-items:center;gap:9px;
  background:rgba(17,17,27,.9);backdrop-filter:blur(8px);
  color:#fff;font-size:13.5px;font-weight:500;line-height:1.4;
  padding:10px 16px;border-radius:999px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08);
  opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;text-align:left;
}
.fcap.is-on{opacity:1;transform:translateX(-50%)}
.fcap b{color:#cfcdfa;font-weight:700}
.fcap__dot{width:7px;height:7px;border-radius:50%;background:#7c78ec;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(124,120,236,.3);animation:fcapPulse 1.6s ease-out infinite}
@keyframes fcapPulse{0%{box-shadow:0 0 0 0 rgba(124,120,236,.5)}70%{box-shadow:0 0 0 6px rgba(124,120,236,0)}100%{box-shadow:0 0 0 0 rgba(124,120,236,0)}}

/* ── Minimal replay/pause control (corner, on hover) ── */
.fctrl{
  position:fixed;top:12px;right:12px;z-index:72;display:flex;gap:7px;
  opacity:0;transition:opacity .2s;
}
#stage:hover ~ .fctrl,.fctrl:hover{opacity:1}
.fctrl__btn{
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(17,17,27,.78);color:#fff;display:grid;place-items:center;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.4);transition:background .15s,transform .1s;
}
.fctrl__btn:hover{background:var(--primary)}
.fctrl__btn:active{transform:scale(.92)}
.fctrl__btn svg{width:15px;height:15px}

/* ════════════════════════════════════════════════════════════
   LEAD FINDER
   ════════════════════════════════════════════════════════════ */
.lf-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.lf-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;
  background:var(--surface);border:1px solid var(--hairline-strong);border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--ink-2)}
.lf-chip svg{width:15px;height:15px;color:var(--ink-4)}
.lf-chip b{color:var(--ink-1);font-weight:700}
.lf-chip--add{border-style:dashed;color:var(--primary);border-color:var(--primary-100)}
.lf-chip--add svg{color:var(--primary)}
.lf-search.is-press,.lf-addbtn.is-press,.ai-gen.is-press,.btn.is-press{transform:scale(.96)}
.lf-resulthead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lf-count{font-size:13px;color:var(--ink-3)}
.lf-count b{color:var(--ink-1);font-weight:700;font-variant-numeric:tabular-nums}
.lf-table td{padding:11px 16px}
.lf-row{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
.lf-row.is-in{opacity:1;transform:none}
.lf-mail{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-4);font-weight:500}
.lf-mail svg{width:14px;height:14px}
.lf-mail.is-found{color:var(--success);font-weight:600}
.lf-stat{background:var(--bg);color:var(--ink-4)}
.lf-stat.is-ok{background:var(--success-50);color:var(--success)}
.lf-scan{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 15px;
  background:var(--primary-soft);border:1px solid var(--primary-100);border-radius:var(--r-md);
  font-size:12.5px;font-weight:600;color:var(--primary);opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s}
.lf-scan.is-on{opacity:1;transform:none}
.lf-scan.is-done{opacity:0;height:0;padding:0;margin:0;border:0}

/* ════════════════════════════════════════════════════════════
   EMAIL FINDER
   ════════════════════════════════════════════════════════════ */
.ef-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.ef-headic{width:42px;height:42px;border-radius:11px;background:#FEF0E8;color:#E5734F;display:grid;place-items:center}
.ef-headic svg{width:22px;height:22px}
.ef-headt{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ef-heads{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.ef-table td{padding:13px 16px}
.ef-mail{font-size:13px;color:var(--ink-1);font-weight:600;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center}
.ef-mail .ef-mailtxt:empty::before{content:'—';color:var(--ink-4)}
.ef-conf{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ef-conf__bar{width:54px;height:5px;border-radius:999px;background:var(--hairline);overflow:hidden}
.ef-conf__bar>i{display:block;height:100%;width:0;background:var(--success);border-radius:999px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.ef-conf__bar.is-catch>i{background:var(--amber)}
.ef-stat{background:var(--bg);color:var(--ink-4)}
.ef-stat.is-checking{background:var(--primary-soft);color:var(--primary)}
.ef-stat.is-valid{background:var(--success-50);color:var(--success)}
.ef-stat.is-catch{background:var(--warn-50);color:var(--warn)}
.ef-foot{display:flex;align-items:center;gap:11px;margin-top:16px;padding:13px 16px;
  background:var(--success-50);border:1px solid #bbf3d0;border-radius:var(--r-md);
  font-size:12.5px;font-weight:600;color:var(--success);transition:background .3s,border-color .3s,color .3s}
.ef-foot__ic{display:grid;place-items:center;flex:0 0 auto}
.ef-foot__ic svg{width:18px;height:18px}

/* ════════════════════════════════════════════════════════════
   AI PERSONALIZATION
   ════════════════════════════════════════════════════════════ */
.ai-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;height:100%}
.ai-profile{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:18px}
.ai-prof__top{display:flex;align-items:center;gap:11px;padding-bottom:15px;border-bottom:1px solid var(--hairline);margin-bottom:14px}
.ai-prof__av{width:42px;height:42px;border-radius:50%;background:#5D59D8;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex:0 0 auto}
.ai-prof__name{font-size:14.5px;font-weight:700;color:var(--ink)}
.ai-prof__role{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.ai-prof__li{width:22px;height:22px;color:var(--li);margin-left:auto}
.ai-prof__li svg{width:100%;height:100%}
.ai-prof__lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:11px}
.ai-sig{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-md);margin-bottom:8px;font-size:12.5px;color:var(--ink-2);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s,border-color .3s,background .3s}
.ai-sig.is-in{opacity:1;transform:none}
.ai-sig.is-hot{border-color:var(--primary);background:var(--primary-soft)}
.ai-sig svg{width:16px;height:16px;color:var(--primary);flex:0 0 auto}
.ai-sig b{font-weight:700;color:var(--ink-1)}
.ai-compose{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:16px 18px;min-width:0}
.ai-compose__bar{display:flex;align-items:center;margin-bottom:14px}
.ai-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--li);background:var(--li-soft);padding:5px 11px;border-radius:999px}
.ai-tag svg{width:14px;height:14px}
.ai-gen svg{transition:transform .3s}
.ai-gen.is-busy svg{animation:spin .8s linear infinite}
.ai-body{flex:1;border:1px solid var(--hairline-strong);border-radius:var(--r-lg);padding:16px 17px;position:relative;min-height:150px;transition:border-color .2s,box-shadow .2s}
.ai-body.is-active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ai-text{font-size:14px;line-height:1.6;color:var(--ink-1)}
.ai-text .mt{color:var(--primary);font-weight:700;background:var(--primary-soft);padding:0 4px;border-radius:4px}
.ai-cur{display:inline-block;width:2px;height:16px;background:var(--primary);margin-left:1px;vertical-align:-2px;animation:blink 1s step-end infinite}
.ai-shimmer{position:absolute;inset:16px 17px;display:flex;flex-direction:column;gap:11px;opacity:0;transition:opacity .25s}
.ai-shimmer.is-on{opacity:1}
.ai-shimmer span{height:13px;border-radius:6px;background:linear-gradient(90deg,var(--bg) 25%,var(--hairline) 37%,var(--bg) 63%);background-size:400% 100%;animation:shim 1.3s ease infinite}
.ai-shimmer span:nth-child(2){width:88%}.ai-shimmer span:nth-child(3){width:62%}
@keyframes shim{0%{background-position:100% 0}100%{background-position:0 0}}
.ai-vars{display:flex;gap:8px;margin-top:13px}
.ai-var{font-size:11px;font-weight:600;color:var(--ink-3);background:var(--bg);border:1px solid var(--hairline);padding:4px 10px;border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ai-var--ai{color:var(--primary);background:var(--primary-soft);border-color:var(--primary-100);display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.ai-var--ai svg{width:13px;height:13px}

/* ════════════════════════════════════════════════════════════
   EMAIL WARMUP
   ════════════════════════════════════════════════════════════ */
.wu-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.wu-head__ic{width:42px;height:42px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.wu-head__ic svg{width:22px;height:22px}
.wu-head__t{font-size:15.5px;font-weight:700;color:var(--ink)}
.wu-head__s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.wu-rep{color:var(--primary);font-weight:700}
.wu-rep.is-good{color:var(--success)}
.wu-tiles{margin-bottom:16px}
.wu-feed{margin-top:0}

/* ════════════════════════════════════════════════════════════
   EMAIL INFRASTRUCTURE
   ════════════════════════════════════════════════════════════ */
.inf-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.inf-head__ic{width:42px;height:42px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.inf-head__ic svg{width:22px;height:22px}
.inf-head__t{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.inf-head__s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.inf-prog{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.inf-prog b{color:var(--primary);font-weight:700;font-variant-numeric:tabular-nums}
.inf-table td{padding:13px 16px}
.inf-dns{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-4)}
.inf-dns__ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink-4);transition:background .3s,color .3s}
.inf-dns__ic svg{width:12px;height:12px}
.inf-dns.is-ok{color:var(--success)}
.inf-dns.is-ok .inf-dns__ic{background:var(--success-50);color:var(--success)}
.inf-spin{width:13px;height:13px;border-width:2px}
.inf-stat{background:var(--primary-soft);color:var(--primary)}
.inf-stat.is-live{background:var(--success-50);color:var(--success)}
.inf-foot{display:flex;align-items:center;gap:11px;margin-top:16px;padding:13px 16px;
  background:var(--bg-soft);border:1px solid var(--hairline);border-radius:var(--r-md);
  font-size:12.5px;font-weight:600;color:var(--ink-2)}
.inf-foot__ic{color:var(--primary);display:grid;place-items:center;flex:0 0 auto}
.inf-foot__ic svg{width:18px;height:18px}